微信小程序语法

一. 微信小程序的业务逻辑(完整功能) -> js行为

二. 微信小程序的生命周期[函数]

① 全局生命周期函数
本质就是事件, 微信小程序某个阶段自动触发的事件
onLaunch: 小程序初始化结束调用(一次)
onShow: 启动, 后者从后台进入前台
onHide: 当小程序从前台进入后台时
onError: 当小程序发生脚本错误或api调用失败时

② 局部生命周期函数(各个组件都有)
onLoad : 页面加载
onReady: 初次渲染完成
onShow: 页面显示
onHide: 页面隐藏
onUnload: 页面卸载
onPullDownRefresh: 下拉动作
onReachBottom: 上拉触底[加载更多数据]

三. 微信小程序 – 指令

1.数据绑定: {{}}
注意:
① 花括号
② 不能直接 checked="false" -> checked="{{false}}"

2.列表渲染: wx:for
<view wx:for="{{array}}">{{item}}</view>
注意:
① 小程序中for中数组每个默认关键字 item
② wx:key 主要功能: 提高渲染排序效率
<view wx:for="{{array}}" wx:key="id">{{item}}</view>
#id 是item中的一个属性
#index 是item的下标

3.判断语句
<view wx:if="{{msg === 0}}">优秀</view>

四. 微信数据请求

    wx.request({url: 'http://127.0.0.1:3000/list',   //请求地址data: {id: 1}, // 请求参数method: "GET", // 请求方式dataType: "json", // 返回数据类型success: function (res) { // 成功后执行this.datas = res.data},fail: function (err) { //失败后执行},complete: function (res) { // 成功失败都执行}})在请求返回时如何保存 data(1) 不能直接保存(2) 小城提供其他方法[更新数据]

五. 微信小程序的ajax请求

通过ajax获取图片数据不能正常显示
给图片添加属性: lazy - onLoad

六. 微信小程序 – 组件之间跳转, 参数传递
目标:

(1) 标签方式跳转, 添加一个<navigator>元素，在元素里面使用属性url就可以
<navigator url="../test/test">点击跳转</navigator>

(2) 使用wx.navigateTo(OBJECT)
wx.navigateTo(OBJECT)
保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面

   wx.navigateTo({url: 'test?id=1',success: function (res) {}})// test.jsPage({onLoad: function (option) {console.log(option.query)}})

注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，尽量避免多层级的交互方式

(3) wx.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面

 wx.redirectTo({url: 'test?id=1'})

加粗样式 关闭所有页面，打开到应用内的某个页面 wx.reLaunch(OBJECT)

(4) wx.switchTab(OBJECT)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

 {"tabBar": {"list": [{"pagePath": "index","text": "首页"}, {"pagePath": "other","text": "其他"}]}}wx.switchTab({url: '/index'})

注意: url 需要跳转的 tabBar 页面的路径（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数

(5) wx.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层

            // 此处是A页面wx.navigateTo({url: 'B?id=1'})// 此处是B页面wx.navigateTo({url: 'C?id=1'})// 在C页面内 navigateBack，将返回A页面wx.navigateBack({delta: 2})

注意:
1. 调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会
2. delta 返回的页面数，如果 delta 大于现有页面数，则返回到首页
3. wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面

七. 微信小程序的事件(重点)

什么是事件
1. 事件是视图层到逻辑层的通讯方式。
2. 事件可以将用户的行为反馈到逻辑层进行处理。
3. 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
4. 事件对象可以携带额外信息，如 id, dataset, touches。

使用:
(1) 冒泡事件
<view bindtap="show" data-index="10">点击</view> // 按下操作
参数不能加括号不能加参数

  function show(event) {event.target.dataset.index}

(2) 阻止冒泡事件

 <view catchtap="show">点击</view>

(3) 冒泡事件列表:touchstart	                  手指触摸动作开始	touchmove	                      手指触摸后移动	touchcancel	                  手指触摸动作被打断，如来电提醒，弹窗	touchend	                      手指触摸动作结束	tap	                          手指触摸后马上离开	longpress	                      手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发longtap	                      手指触摸后，超过350ms再离开（推荐使用longpress事件代替）	transitionend	                  会在 WXSS transition 或 wx.createAnimation 动画结束后触发	animationstart	              会在一个 WXSS animation 动画开始时触发	animationiteration	          会在一个 WXSS animation 一次迭代结束时触发	animationend	                  会在一个 WXSS animation 动画完成时触发	touchforcechange                在支持 3D Touch 的 iPhone 设备，重按时会触发非冒泡事件:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件

(4) 事件绑定:
事件绑定的写法同组件的属性，以 key-value 键值对的形式

1. key 以bind或catch开头，然后跟上事件的类型，如 bindtap、catchtouchstart
2. 在非原生组件中，bind 和 catch后可以紧跟一个冒号，其含义不变，如 bind:tap、catch:touchstart
3. value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错
4. bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡
5. 事件传参注意: 小程序绑定事件只能写函数名称, 不能通过括号传参
   <view data-index="1" bind:tap="tapHandle">点击事件</view>

(5) 事件的捕获阶段
1. 触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反
2. 需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段

(6)事件对象
如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象

        BaseEvent    基础事件对象属性列表属性	         类型	        说明type	        String	      事件类型timeStamp	    Integer       事件生成时的时间戳target	        Object	      触发事件的组件的一些属性值集合currentTarget   Object	      当前组件的一些属性值集合CustomEvent                    自定义事件对象属性列表（继承 BaseEvent）属性	     类型	     说明detail	    Object	  额外的信息TouchEvent 触摸事件对象属性列表（继承 BaseEvent）属性	          类型	              说明touches	         Array	      触摸事件，当前停留在屏幕中的触摸点信息的数组changedTouches	 Array	      触摸事件，当前变化的触摸点信息的数组特殊事件： <canvas/> 中的触摸事件不可冒泡，所以没有 currentTarget。type代表事件的类型。timeStamp页面打开到触发事件所经过的毫秒数。target 触发事件的源组件属性	     类型	        说明id	        String	    事件源组件的idtagName	    String	    当前组件的类型dataset	    Object	    事件源组件上由data-开头的自定义属性组成的集合currentTarget 事件绑定的当前组件属性	    类型	      说明id	       String	  当前组件的idtagName	   String	  当前组件的类型dataset	   Object	  当前组件上由data-开头的自定义属性组成的集合dataset在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如: data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType示例：<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>Page({bindViewTap:function(event){event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写}})touchestouches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）表示当前停留在屏幕上的触摸点。Touch 对象属性	             类型	        说明identifier	        Number	    触摸点的标识符pageX, pageY        Number    	距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴clientX, clientY	Number	    距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴CanvasTouch 对象属性	         类型	      说明	  identifier	    Number	  触摸点的标识符	x, y	        Number	  距离 Canvas 左上角的距离，Canvas 的左上角为原点 ，横向为X轴，纵向为Y轴	changedToucheschangedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart）位置变化（touchmove），从有变无（touchend、touchcancel）detail自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入媒体的错误事件会携带错误信息，详见官方文档组件定义中各个事件的定义。点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。