开发者文档:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html
一.文件结构
小程序包含一个描述整体程序的app和多个描述各自页面的page。
一个小程序主题部分由三个文件组成,必须放在项目的根目录,
如下:
app.js 必填 小程序逻辑
app.json 必填 小程序公共设置
app.wxss 否 小程序公共样式
一个小程序页面由四个文件组成,
分别是:
js 必填 页面逻辑
wxml 必填 页面结构
wxss 否 页面样式表
json 否 页面配置
注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径和文件名。
二、配置
app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。
pages
接受一个数组,每一项都是字符串,来指定小程序有哪些页面组成。每一项代表对应页面
【路径+文件名】信息,数组的第一项小程序的初始页面。小程序中新增/减少页面,都需要对pages数组进行修改。文件名不需要写文件后缀,因为框架会自动去寻找路径下.json,.js,.wxml,.wxss四个文件进行整合。
如开发目录为:
则需要在app.json中写:
tabBar
如果小程序是一个多tab应用(客户端窗口的底部或顶部有tab栏可以切换页面),可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页面。
Tip:
1.当设置position为top时,将不会显示icon
2.tabBar中的list是一个数组,只能配置最少2个、最多5个tab(太多图片过小影响用户体验),tab按数组的顺序排序。
属性说明:
其中list接受一个数组,数组中的每一项都是一个对象,其属性值如下:
三、页面路由
在小程序中所有页面的路由全部由框架进行管理。
页面栈
框架以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈的表现如下:
路由方式
对于路由的触发方式以及页面生命周期函数如下:
注意:打开新页面方式无法路由带有Tab的页面。
四、视图层
数据绑定
WXML中的动态数据均来自对应的Page的data。
简单的绑定
数据绑定使用Mustache语法(双大括号)将变量包起来(类似C语言中‘\n'),可以作用于:
内容
运算
可以在{{}}内进行简单的运算,如
三元运算
五、列表渲染
wx:for
在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该数组。
默认数组的当前项的下标变量名为index,数组当前项的变量名默认为item
使用wx:for-item可以指定当前数组当前元素的变量名,
使用wx:for-index可以指定当前下标的变量名:
wx:for也可以嵌套,下边是一个九九乘法表
六、条件渲染
wx:if
在框架中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块:
也可以用wx:elif和wx:else来添加一个else块:
七、事件
什么是事件
·事件是视图层到逻辑层的通讯方式。
·事件可以将用户的行为反馈到逻辑层进行处理。
·事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
·事件对象可以携带额外信息,如id,dataset,touches.
事件的使用方式
·在组件中绑定一个事件处理函数。
如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
·在相应的Page定义中写上相应的事件处理函数,参数是event。
·可以看到log出来的信息大致如下:
八、WXSS
WXX用来决定WXML的组件应该怎么显示。
尺寸单位
·rpx:可以根据屏幕宽度进行自适应。
建议:开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。
注意:在较小的屏幕上不可避免的会用一些毛刺,请在开发时尽量避免这种情况。
选择器
目前支持的选择器有:
全局样式与局部样式
定义在app.wxss中的样式为全局样式,作用于每一个页面。在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器。
2018/1/22
知了堂有温度的大学生众筹学习社区