微信小程序

本章只是对一些常用的给介绍了，不足之处请指出，大家一起学习，萌新上路

一. 主要文件

1. app.js 全局生命周期

微信小程序生命周期：

onLaunch 打开APP就被调用，只有一次
onShow 打开小程序触发，可多次
onHide 从手机端到后台就会触发的时间（按home键之后触发等
onError 小程序出现错误时，可以统一处理
其他小程序提供自定义全局方法

1. app.json

pages: [] 存放所有页面，默认第一个显示
window: {} 窗口设置颜色等
tabBar: {} 底部导航栏
以下是底部导航栏模板

"tabBar": {
    "list": [
        {
        	"pagePath": "pages/xxx/xxx"
        	"text": "首页"
        }
    ]
}

1. xxx.js 页面生命周期

普通页面生命周期：

onLoad: 页面加载执行一次，可以获取传递过来的参数
onShow: 页面打开时调用
onReady: 页面初次渲染完成，只会执行一次，可以和视图层操作
onHide: 页面隐藏，navigateTo 或底部 tab 切换调用
onUnload: 页面卸载，执行 redirectTO 或 navigateBack（上一级）调用

二. 常用基本功能

在这里没介绍还未介绍请求效应

1. 小程序获取全局变量和赋值方式

var app = getApp() //getApp() 是一个全局方法
this.setData({
    xxx: app.xxx
})
// 获取当前data中的属性
this.data.xxx

2. 断点

只需要在对应代码上加一台代码 debugger，可进行在微信小程序段测试，也可以在手机端测试，这里不做多介绍，本人也只做过PC端测试，手机端测试一般是测试 onHide 等需要手机端才可看到实际效果

3. wx.redirectTo 和 wx.navigateTo

3.1 wx.redirectTo 重定向

// 重定向页面，可以传值，新页面可以在 onLoad(o) 接受参数
// path 接收的是相对路径
var path = ''
wx.redirectTo({
  url: path?key1=value&key2=value2
})
// 使用 redirectTo 会触发 onUnload 事件， 且没有后退
// path对应页面接收
onLoad: function(option){
	var val1 = option.query.key1
    var val2 = option.query.key2
}

3.2 wx.navigateTo 跳转

// 挑战页面，可以传值，新页面可以在 onLoad(o) 接受参数
// path 接收的是相对路径
var path = ''
wx.navigateTo({
    url: path?key1=value&key2=value2
})
// redirectTo 触发本页面 onHide 事件
onHide: function () {}
// path对应页面接收
onLoad: function (option) {
	var val1 = option.query.key1
	var val2 = option.query.key2
}
// 点击回退时，只会触发 onShow 事件， 因为页面没被卸载
// 没有触发 onLoad 和 onReady

事件避免使用过多 navigateTo，会使页面叠加，影响体验效果

4. 页面其他API事件

onPullDownRefresh 下拉刷新事件，分页效果
onReachBottom 上拉刷新事件
onShareAppMessage 分享转发
onPageScroll 页面滚动事件
onTabItemTap 点击 tab 页时触发的事件，
其他自己定义的。

5. 组件绑定事件 (bindtap & catchtap)

<view id="tapTest" bindtap="clickMe" data-haHa="haha">点击事件</view>
<!-- bindtap 冒泡事件，catchtap 非冒泡事件 -->

page({
    clickMe (event) {
        // event 事件对象，就是调用的组件
        console.log('点击事件',event)
        // 对应触发元素上的 data 属性 data-xxx
        console.log('触发元素'，event.target.dataSet)
        // 同样可以获取捕事件元素的 data 属性 
        console.log('捕获事件元素'，event.currenTarget。dataSet)
        console.log('haHa', event.currentTarget.dataSet.haha)
    }
})

6. 模块化

在微信小程序中，可以将一些公共的代码抽离为一个单独的js文件，作为一个模块，而在其它需要使用的页面，对该js文件进行引用。而模块的内容通过module.exports 或 exports 来对外暴露接口。而在需要使用的地方，使用关键字 require(path) 进行引入。
require 不支持绝对路径

function sayHello (name) {
    console.log(`hello ${name}`)
}
function sayGoodbye (name) {
    console.log('Goodbye ' + name)
}
// 导出方式
module.exports.sayHello = sayHello
exports.syaGoodbye = sayGoodbye

// 引入方式
var common = require('xxx.js')

7. 数据绑定

7.1 大括号表达式 {{ XX }}

<!-- 内容上 -->
<view>{{message}}</view>
<!-- 组件属性上 需要在双引号中-->
<view id="item-{{id}}"></view>
<!-- 关键字 -->
<checkbox checked="{{flage}}"></checkbox>
<checkbox checked="{{!falg}}"></checkbox>
<!-- 运算： 逻辑运算、算术运算、字符串运算等  -->
{{a + b === 3 ? 'true' : 'false'}}
<!-- 优先执行算术运算-->
{{a + b + message}}

Page({
    data: {
        id：0,
        message: 'hello world',
        flag: false,
        a: 1,
        b: 2
    }
})

8. 列表渲染 (wx:for)

<view wx:for="{{Array}}"></view> 带自身节点
<block wx:for="{{Array}}"></block> 不带自身节点
如果遇到需要随机排序，则需要设置 key 值，不然容易出现混乱

<view class="container">
    
  <!-- users 是一个对象数组 -->
	<view wx:for="{{users}}">
    	下表：{{index}}, 对象：{{item}}
    </view>
    
	<!-- 可修改 下表跟对象的 -->
	<view wx:for="{{users}}" wx:for-index="id" wx:for-item="user">
    	下表：{{id}}, 对象：{{user}}
  </view>
    
	<!-- 使用 block 渲染， 只会重复子节点，不会重复本身-->
	<block wx:for="{{users}}" wx:for-index="id" wx:for-item="user">
    	下表：{{id}}, 对象：{{user}}
  </block>
</view>

9. 条件渲染 (wx.if & hidden)

带自身节点: <view wx:for="{{Array}}"></view>
不带自身节点:<block wx:for="{{Array}}"></block>

if 和 hidden:

if 是惰性加载，每次切换时都会销毁或重新渲染，相当于 display: none，适用于运行条件不大可能改变的
hidden 组件始终渲染，适用于频繁切换

<!-- 查看对应的页面结构可知 -->
<view wx.if="false">if</view>
<view hidden="false">hidden</view>

10. 页面引用模板 (template)

定义模板：<template name="[templateName]"></template>
引用模板：is = "[templateName]"
传入参数: data={{data}}
跨页面引入：<import src="templateFileName.wxml" />
跨页面引入，需要把对应的 xss 样式也引入进去

<template name="temp1">
  <view>姓名：{{name}}</view>
  <view>年龄：{{age}}</view>
  <view>地址：{{address}}</view>
  <view>备注：{{remark}}</view>
  <view>消息：{{msg}}</view>
</template>

<view class="container">
  <!-- 模板接收的是属性值，所以需要把对象解析 采用es6语法 ... -->
	<template is="temp1" data="{{...person, msg, name: 'zxh', age: 18}}"></template>
</view>

Page({
  data: {
    person: {address: '北京', remark: '演示第一个模板'}
    msg: '这是一条消息'
  }
})

<!-- new.wxml -->
<import src="../temps/temps.wxml"/>
<template is="mytemp" data="{{name: 'zxh', age: 18}}"></template>

11. WXS 模块

定义 *.wxs 文件， modeule.exports 暴露接口和属性
引入：<wxs src="" module="" />
一般用来做工具类，如时间格式，字符串处理，过滤
使用 require 函数，可以引入另一个模块

WXS 是与 wxml 一同于视图层，运行在同一个线程内，因此减少了线程通信的开销。

小程序在Android上，使用V8引擎解析和渲染 JavaScript; 而在iOS上，则是使用 JavaScriptCore，这两者在解析性能的表现上差异比较大，相对来说 V8 的性能比 JSC 要好得多，那么在 IOS 的小程序中，使用脱离 JavaScript 环境的 WXS，就会使性能有更多的提升，这也是WXS文档中提及 “在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍” 的具体原因。
个人觉得，WXS 模块类似于 vue 的 fiter 全局过滤器的作用

/** module.wxs*/
var name = 'zxh'
var age = 18
var method = function (obj) {
  return obj
}

module.exports = {
  name: name,
  age: age
  method: method
}

<!-- wxs.wxml -->
<view>
	<WXS src="module.wxs" module="item"></WXS>
  <view>姓名：{{item.name}}</view>
  <view>年龄: {{item.age}}</view>
  <view>方法：{{item.method('参数’)}}</view>
</view>

// module2.wxs 引入modelu
 var num2 = require('module.wxs')

12. include 引入页面

template，wxs除外，其他页面都可以引入，达到共用

	<!-- index.wxml -->
	<include src="header.wxml" />
	<view>body</view>
	<include src="footer.wxml">

	<!-- header.wxml -->
	<view>header</view>

	<!-- footer.wxml -->
	<view>footer</view>

这种就像是上中下布局一样

13. 标签属性

标签属性的属性值只有 true 和 false 的，且默认值为 false 情况下，直接在标签添加该属性，则该属性值为 true