小程序学习（四）

小程序逻辑顺序

• 小程序在初始化的时候会调用一次调用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的属性是支持数据绑定的，因此在项目中我们可以通过属性的配置动态绑定所需要的模板）