微信小程序学习笔记

最新推荐文章于 2021-08-19 11:46:02 发布

束千凡

最新推荐文章于 2021-08-19 11:46:02 发布

阅读量223

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/mxthing/article/details/102937036

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

数据绑定
   1.
   <text>当前时间：{{time}}</text>
   pages/wxml/index.js 文件，在 data 的大括号中加入：time: (new Date()).toString()。
   WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。

   2.变量名是大小写敏感的
   3.没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中

逻辑语法
   1.三元运算：
       
       <text>{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}</text>

   2.{{ }}中还可以直接放置数字、字符串或者是数组
       <text>{{[1,2,3]}}</text>

   3.WXML 中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
       <view wx:if="{{condition}}"> True </view>

       使用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
           <view wx:elif="{{length > 2}}"> 2 </view>
           <view wx:else> 3 </view>

       因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，
       可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
           <block wx:if="{{true}}">
           <view> view1 </view>
           <view> view2 </view>
           </block>

   4.列表渲染
       在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
       默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
       
       <view wx:for="{{array}}">
       {{index}}: {{item.message}}
       </view>

使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名：

       <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
       {{idx}}: {{itemName.message}}
       </view>


   5.模板
       WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段，如：

代码清单2-16 定义模板

       <template name="msgItem">
       <view>
           <text> {{index}}: {{msg}} </text>
           <text> Time: {{time}} </text>
       </view>
       </template>

       使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

       <template is="msgItem" data="{{...item}}"/>

       is可以动态决定具体需要渲染哪个模板

   6.引用
       WXML 提供两种文件引用方式import和include。

       需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，
       而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。

       include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

程序页面

   1. 程序构造器App()
       App() 构造器必须写在项目根目录的app.js里，App实例是单例对象，在其他JS脚本中可以使用宿主环境提供的 getApp()
       来获取程序实例
       App构造器接受一个Object参数其中onLaunch / onShow / onHide 三个回调是App实例的生命周期函数

   2.程序的什么周期和打开场景
       进入小程序之后，用户可以点击右上角的关闭，或者按手机设备的Home键离开小程序，此时小程序并没有被直接销毁，
       我们把这种情况称为“小程序进入后台状态”，App构造器参数所定义的onHide方法会被调用。

       当再次回到微信或者再次打开小程序时，微信客户端会把“后台”的小程序唤醒，我们把这种情况称为“小程序进入前台状态”，App构造器参数所定义的onShow方法会被调用。

   3. 页面构造器Page()
       宿主环境提供了 Page() 构造器用来注册一个小程序页面，Page()在页面脚本page.js中调用
       其中data属性是当前页面WXML模板中可以用来做数据绑定的初始数据

       页面初次加载的时候，微信客户端就会给Page实例派发onLoad事件，Page构造器参数所定义的onLoad方法会被调用，onLoad在页面没被销毁之前只会触发1次，
       在onLoad的回调中，可以获取当前页面所调用的打开参数option

       页面显示之后，Page构造器参数所定义的onShow方法会被调用，一般从别的页面返回到当前页面时，当前页的onShow方法都会被调用。
       在页面初次渲染完成时，Page构造器参数所定义的onReady方法会被调用，onReady在页面没被销毁前只会触发1次，onReady触发时，表示页面已经准备妥当，
       在逻辑层就可以和视图层进行交互了。
       以上三个事件触发的时机是onLoad早于 onShow，onShow早于onReady。
       页面不可见时，Page构造器参数所定义的onHide方法会被调用，这种情况会在使用wx.navigateTo切换到其他页面、底部tab切换时触发。
       当前页面使用wx.redirectTo或wx.navigateBack返回到其他页时，当前页面会被微信客户端销毁回收，此时Page构造器参数所定义的onUnload方法会被调用。


   4.页面跳转和路由
       一个小程序拥有多个页面，我们可以通过wx.navigateTo推入一个新的页面
       小程序宿主环境限制了这个页面栈的最大层级为10层

       使用 wx.navigateTo({ url: 'pageD' }) 可以往当前页面栈多推入一个 pageD，此时页面栈变成 [ pageA, pageB, pageC, pageD ]。
       使用 wx.navigateBack() 可以退出当前页面栈的最顶上页面，此时页面栈变成 [ pageA, pageB, pageC ]。
       使用 wx.redirectTo({ url: 'pageE' }) 是替换当前页变成pageE，此时页面栈变成 [ pageA, pageB, pageE ]，
           当页面栈到达10层没法再新增的时候，往往就是使用redirectTo这个API进行页面跳转。

       wx.navigateTo和wx.redirectTo只能打开非TabBar页面，wx.switchTab只能打开Tabbar页面。
       我们还可以使用 wx. reLaunch({ url: 'pageH' }) 重启小程序，并且打开pageH，此时页面栈为 [ pageH ]