小程序逻辑顺序
- 小程序在初始化的时候会调用一次调用onload(),onshow(),onready()这几个方法,新页面调用仍然会调用上述三种方法,当页面从当前页面返回或者重定向的时候当前页面会调用onunload()方法进行卸载,返回的时候栈中的页面会不断地团出来并且卸载直至找到新页面,触发onshow()方法,重定向的页面则直接弹出栈卸载当前页面,新页面入栈调用上述3种方法。小程序底部的tab切换则是只调用onshow()和onhide()的方法进行显示和隐藏。如果由前台转到后台,则当前页面触发onhide(),同时也触发app.js中的onhide()方法,相反则调用app.js的onshow()方法和当前页面的onshow()方法。总结来说就是返回和重定向会调用卸载的方法,其余的都是onhide()方法和onshow()的方法的不断切换来实现页面的不断隐藏和显示,想具体看怎么调用在app.json中配置上debug模式,就可以跟踪调用顺寻了。
- -
好接下来说下页面结构文件wxml的内容:
- 数据绑定,小程序的数据绑定使用的是Mustache语法(双大括号)将变量包起来的
1、简单绑定
<!--作为内容-->
<view bindtap="countClick">{{content}}</view>
<!--作为属性绑定-->
<view id="item-{{id}}" style="border:{{border}}">属性渲染</view>
<!--作为控制属性-->
<view wx:if="{{showContent}}">作为控制属性</view>
<!--作为关键字-->
<view>{{2}}</view>
<!--<checkbox checked="false" />错误的形式-->
<checkbox checked="{{false}}" />
这种就是简单的绑定。(注意一点的是如果属性是boolean类型的不能直接写false需要用{{false}}这种形式的才可以,不然程序会认为false是个字符串,返回的结果是true)
效果图
2、运算
{{}}中可以做一些运算
<!--三元运算符-->
<view>{{ showContent ? "显示文本" : "隐藏文本" }}</view>
<!--数学运算符-->
<view>{{num1+num2}}+{{num3+1}}=?</view>
<!--字符串运算符-->
<view >{{"name:"+name}}</view>
<!--逻辑判断符-->
<view >{{num3>2}}</view>
<!--数据路径运算-->
<view >{{myObject.age}} {{myarray[1]}}</view>
3、组合
数组组合(这里用到了模板的内容,下边有模板的模块可以先看模板再回头看这块)
<!--作为数组组合-->
<view >{{[myValue,2,3,"stringType"]}}</view>
运行结果为[0,2,3,“stringType”]
对象组合
<!--对象组合-->
<template name="testTemp1" >
<view >{name:{{name}},age:{{age}}}</view>
</template>
<!--第一种组合直接将数据作为value进行组合-->
<template is="testTemp1" data="{{name:myValue1,age:myValue2}}"></template>
<template name="testTemp2" >
<view >{sex:{{sex}},name:{{name}}}</view>
</template>
<!--第二种通过...将对象展开,把key-value值拷贝到新的结构中-->
<template is="testTemp2" data="{{...myObject,name:'陈争'}}"></template>
<template name="testTemp3" >
<view >{num1:{{num1}},name:{{num2}}}</view>
</template>
<!--第三种如果对象key和value相同可以只写key值-->
<template is="testTemp3" data="{{num1,num2}}"></template>
注意如果一个组合中有相同的属性名时后者会覆盖前者
- 条件渲染
1、wx:if
<!--if elseif else语句写法-->
<view wx:if="{{false}}">我是隐藏文本</view>
<view wx:elif="{{false}}">我是显示文本</view>
<view wx:else>其它</view>
2、block wx:if block是一个包装元素,它里边可以放多个其它的组件
<block wx:if="{{true}}">
<view >我是显示文本</view>
</block>
<block wx:if="{{false}}">
<view >我是隐藏文本</view>
</block>
3、wx:if和hidden
它们两个在隐藏时的主要区别在于,第一:wx:if是惰性的,它只有在true时页面才会进行它所控制的那一项的渲染工作,否则是不进行渲染的,在值改变的时候会对自己负责的模块进行销毁和渲染工作,而hidden只是单纯的隐藏,但它控制的模块是始终进行渲染的。
- 列表渲染
1、wx:for
<!--这里的index和item是系统默认的可以通过属性wx:for-index和wx:for-item进行改变-->
<view wx:for="{{myArray}}">
{{index}}:{{item}}
</view>
<view wx:for="{{myArray}}" wx:for-index="myIndex" wx:for-item="myItem">
myIndex:{{myIndex}},myItem:{{myItem}}
</view>
另外这里进行二维数组测试时加入block和不用block时的布局差别
<view wx:for="{{myArrays}}" wx:for-index="myIndex" wx:for-item="myItem">
<block wx:for="{{myItem}}" wx:for-index="subIndex" wx:for-item="subItem">
{{subItem}}
</block>
</view>
<view wx:for="{{myArrays}}" wx:for-index="myIndex" wx:for-item="myItem">
<view wx:for="{{myItem}}" wx:for-index="subIndex" wx:for-item="subItem">
{{subItem}}
</view>
</view>
可见block这个可以当前数据遍历放在同一行里边显示
- 模板
1、定义一个模板
<template name="myTemp" >
<view >{{content}}</view>
<view >{{name}}</view>
<view >{{myObject.sex}}</view>
<view >{{age}}</view>
</template>
2、使用模板
模板的值绑定现在可以回头看绑定数据那块的内容例子了
(注意:在这里is的属性是支持数据绑定的,因此在项目中我们可以通过属性的配置动态绑定所需要的模板)