小程序模板网

微信小程序项目总结《二》配置、首页面开发

发布时间:2018-04-18 09:51 所属栏目:小程序开发教程

第三章:配置

根据项目需求和教程,小程序配置文件的代码为:

app.json

App.json 里面有几个配置项:

Pages:这个是编写的 js 文件,后缀 .js 这里不需要使用,配置好正确路径即可正常应用到(应用不到在重启微信开发者工具会直接报 page 错误)。 
Window:配置顶部的一些样式,文档介绍比较详细。 
tabBar:底部的几项配置,见名知意。 
iconPath 和 selectedIconPath:底部菜单按钮图片与得到切换点击高亮。

app.wxss(配置全局wxss样式)

第四章:微信小程序首页(静态页面)开发

welcome.wxml

1.视图容器view

这里用视图容器view块级元素将每个元素包裹起来,以便方便wxss的样式添加和js交互实现。常用的样式的属性: 
display :显示的模式。可选项有:flex(代表view可以伸缩,弹性布局)

flex-direction :view容器主轴布局方向。可选项有:row , column

justify-content :view容器子元素沿着主轴的排列方式。可选项有:flex-start、center、flex-end、space-around

align-items :view容器子子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式。可选项有:flex-start、center、flex-end

flex :权重。可选项:1,2, 3, 4, 5…(flex与display属性一般结合使用,单独使用flex无效)

2.{{ }}数据绑定机制。上述部分有两点需要说明:

(1): 视图层嵌入的是{{motto}}而不是{{data.motto}},微信框架默认设定视图层绑定的变量定义在Page对象的data属性中,也就是说,如果变量需要绑定到视图层,一定要定义data属性中

(2): 通过调用Page对象的setData(Page对象预定义)方法,可以更新界面数据,但是直接设置变量是无效的,因此对于绑定到视图层的变量,要永远使用setData方法来设置变量值

welcome.wxss(接下来的页面不会上wxss代码,完成这些主要是前期对效果图的精准制作和分析)

微信小程序尺寸单位rpx以及样式

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。

规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0. 
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0。

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)

iPhone5 1rpx = 0.42px 1px = 2.34px 
iPhone6 1rpx = 0.5px 1px = 2rpx 
iPhone6s 1rpx = 0.552px 1px = 1.81rpx

微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem: 规定屏幕宽度为20rem;1rem = (750/20)rpx

注:开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

welcome.js

1.wx.switchTab(OBJECT) 
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面(搭配onTap组件使用,点击后跳转页面)

2.app.js中包含一个App()函数,我把它理解为微信小程序真正意义上的入口,也就是说当启动一个小程序的时候,首先会执行到这里。App()函数用来注册一个小程序,参数为Object类型,可以在其中指定小程序的生命周期函数(理解还不是很透彻), 当然,也可以定义一个全局的数据和函数,我们可以在页面中调用全局的getApp()方法,获得小程序实例,从而来调用我们定义的全局数据和函数。



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23623.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询