【微信小程序 事件绑定】

事件绑定

条件渲染
1. block包裹性容器：条件成立渲染

<block wx:if="{{ true }}">
 
<block wx:if="{{true}}">
    <view>view1</view>
    <view>view2</view>
</block>

2. wx:if：动态创建移除元素控制展示与隐藏

wx:if 搭配 wx:elif || wx:else

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else="{{type === 0}}">保密</view>

	值：data:   type:2
	

3. hidden：控制展示与隐藏

<view hidden="{{flag}}">true隐藏，false显示</view>

4. wx:if 和 hidden对比

a. wx:if 动态创建和移除元素，控制元素展示 / 隐藏 场景：控制条件复杂时使用
b. hidden 切换样式控制展示与隐藏，节点一直存在场景：频繁切换

列表渲染

1. wx:for 指定数组，进行循环渲染
2. wx:for-index 手动指定索引名
3. wx:for-item 手动指定当前项名
4. wx:key="id" 提高渲染效率

data: {  arr1: ['苹果','华为','小米']  }
<view wx:for="{{ arr1 }}"  wx:key="id">
      索引是 {{ index }} 当前项是： {{ item }}
</view>
 
<view wx:for="{{arr}}" wx:for-index="i" wx:for-item="m">
      索引是 {{ i }} 当前项是： {{ m }}
</view>

模板样式：rpx

• 布局使用 flex 布局，尺寸单位使用 rpx
  ( responsive pixel )是微信小程序独有的，用来解决屏适配的尺寸单位。

• 实现原理：不同设备屏幕的大小不同，实现屏幕的自动适配， rpx 把所有设备的屏幕，在宽度上等分为 750 份, 1份就是1 rpx 。较小(大)的设备上，1 rpx 所代表的宽度较小(大)。

全局配置文件 app.json 及常用的配置项

导航栏、背景区、页面主体区：
style：是否启用新版组件样式
局部样式：当前页面配置json文件，会覆盖全局的配置

tabBar：底部效果

1. backgroundColor ： tabBar背景色
2. borderStyle：上边框的颜色
3. selectedColor：选中时文字的颜色
4. color：未选中颜色

"tabBar":{  // 与window同级
  "list":[{
     "pagePath":"页面路径",
     "text":"底部文字",
     "iconPath":"未激活图标地址",
     "selectedIconPath":"激活图标地址"
},{},....]},

网络数据请求

• 配置request合法域名(只支持https;不能ip或本地;必须ICP备案)
  小程序管理后台 -> 开发管理 -> 开发设置 -> 服务器域名 -> 修改 request 域名

1. 发起GET请求：wx.request()

2. 发起POST请求 ：wx.request() ———— method: ‘POST ‘,

onTapGet () {
  wx.request({
     url: 'https://... .../api/get',   // 在request合法域名已配置
     method: 'GET',
     data: {  name: 'zs', age: 22  },  // 请求参数
  success: (res) => {                  // 请求成功的回调
     console.log(res)
}})

页面刚加载时请求数据：onLoad

// 生命周期函数-->监听页面加载-->初始化页面的数据
	onLoad: function (options) {
	    this.onTapGet()  // 通过 this 调用上述方法
	    this.onTapPost()
	},

跨域 和 Ajax 的说明

• 跨域问题是基于浏览器的 Web 开发。小程序的宿主环境是微信客户端，所以不存在跨域的问题。
• Ajax 技术的核心是依赖于浏览器中的XMLHttpRequest 对象，由于小程序环境是微信，不能叫做“发起 Ajax 请求”，而是叫“发起网络数据请求”。

页面导航

声明式导航:

1. 导航tabBar页面：switchTab
2. 非 tabBar 页面：navigate

	导航tabBar页面：
	<navigator url="/页面路径" open-type="switchTab">链接文字</navigator>
	
	非 tabBar 页面：
	<navigator url="/页面路径" (open-type="navigate")>链接文字</navigator>

后退导航：navigateBack

<navigator open-type="navigateBack" (delta="1")>返回上一页</navigator>

编程式导航

• wx.switchTab() 方法：跳转到 tabBar 的页面
• wx.navigateTo() 方法：跳转到非 tabBar 的页面
• wx.navigateBack() 方法：返回上一页面或多级页面

 <button bindtap="goto">链接文字</button>
 goto () {
     wx.switchTab({     // wx.navigateTo({     // wx.navigateBack()
        url: '/ 跳转到页面路径',
  })},

判断跳转 路径为 – /pages/info/info?name=zs&age=20

	<navigator url="/pages/info/info?name=zs&age=20">跳至info页面</navigator>
	url: '/pages/info/info?name=李&gender=男',
 ------------------------------------------------------------------------------	
	定义 data:{ query: {} }   
	onLoad 事件中获取参：this.setData({ query: options })

页面事件

下拉刷新事件

① 全局开启：app.json 的 window 中
② 局部开启：在页面的app.json 配置文件 "enablePullDownRefresh": true

-window
 
"backgroundColor": "#ccc",
"backgroundTextStyle": "dark/light"
 
onPullDownRefresh() 函数监听刷新
wx.stopPullDownRefresh() 关闭加载状态
 
onPullDownRefresh: function () {
    this.setData({
      count: 0
    })
    wx.stopPullDownRefresh()
},

上拉触底事件

1. onReachBottom() 函数监听页面的上拉触底事件
2. onReachBottomDistance 配置上拉触底的距离

节流

• data 定义一节流阀 请求方法中修改节流阀的值
  在complete中修改值，成功失败都关闭 onReachBottom 判断节流阀的值

	loading: false
	this.setData({  loading: true  })
	this.setData({isloading: false})
	if(this.data.isloading) return

生命周期

应用生命周期写在index.js

1. onLaunch：小程序启动，渲染完成时触发时 (全局只触发一次)
2. onShow：小程序启动 或 从后台进入前台时 (可触发多次)
3. onHide：小程序隐藏起来 或 从前台进入后台时 (可触发多次)
4. onError：出现异常时触发

页面生命周期

onload()：监听页面加载。一个页面调一次，可获取当前页面路径中的参数； 
onShow()：监听页面显示 / 切入前台；
onReady()：监听页面初次渲染完成。一个页面调一次，页面可以和视图层进行交互；
onHide()：监听页面隐藏 / 切入后台。 顶部或底部 tab 切到其他页面；
onUnload(): 监听页面卸载。如 redirectTo 或 navigateBack 到其他页面时；一次

详细生命周期 vue生命周期-小程序生命周期-react生命周期

WXS脚本

   13.1 wxs和JavaScript的关系
wxs数据类型：number/string/boolean/object /function/array/date/regexp 
不支持es6及以上的语法：支持 var/function 函数等 ES5 语法
遵循ComminJS规范：module 对象、require() 函数、module.exports 对象
13.2 基础语法
1.内嵌 wxs 脚本：通过模块名调用向外暴露的脚本方法
<view>{{ m1.toUpper(username) }}</view>
<wxs module="m1">
module.exports.toUpper = function(str) {
return str.toUpperCase()  }
</wxs>
2. 外联的 wxs 脚本：
//   1. 新建文件，定义方法，暴露成员  utils/tools.wxs
function toLower(str) {  return str.toLowerCase()  }
module.exports = { toLower: toLower  }
//   2. 使用外联式引入外部的wxs文件
<wxs module="m2" src="../../utils/tools.wxs"></wxs>
//   3. 调用 m2 模块的方法
<view>{{ m2.toLower(country) }}</view>
13.3 WXS 的特点
场景：过滤器<view>{{ m2.toLower(country) }}</view>
隔离性：不能调用 js 定义的函数和小程序的 API
性能好：iOS 设备上WXS 比 JavaScript 代码快 2 ~ 20 倍，Android 设备上无差异
十四、自定义组件
14.1 创建和引用
根目录中 -> 创建components -> test 文件夹 -> 新建 Component -> 回车
局部引用：页面的 .json 文件中引用组件
全局引用：app.json 全局配置文件中引用组件
"usingComponents": {"my-test": "/components/test/test"}
my-test 就是组件使用时的标签名：<my-test></my-test>
14.2 组件和页面的区别
组件的.json 中需要声明 "component": true,
组件的.js调用函数Component，页面是Page
组件事件处理函数需定义在methods，页面在Page下
14.3 组件样式隔离
每个组件和页面样式之间不会影响，全局样式对组件无效，只有 class 选择器会有样式隔离效果
修改组件的样式隔离选项：
Component({
options: { styleIsolation: 'isolated'}
})
isolated启用隔离不会影响；
apply-shared页面样式可改变组件；
shared相互影响；
14.4 属性
properties：对外属性，接收外界传递到组件的数据
properties: {
max: { type: Number, value: 10 },  // 完整写法
min: Number   // 简化
},
data 和 properties 区别？  都可读可写
data 是组件私有数据，properties是外界传入的数据
14.5 数据监听器：observers
Components({
observers: {
'字段A， 字段B': function(A的新值， B的新值) {}
})
监听个别属性
'rgb.r, rgb.g, rgb.b': function (r, g, b){
this.setData({
fullColor: `${r}, ${g}, ${b}`  
})
}
通配符监听对象的所有属性
'rgb.**': function (obj){
this.setData({
fullColor: `${obj.r}, ${obj.g}, ${obj.b}`  
})
}
14.6 纯数据字段
不用于页面渲染的data字段，用于业务逻辑，有助于提升页面更新的性能
使用：
Component 构造器的 options 节点中，指定 pureDataPattern 为一个 正则表达式
Component({
options: {  pureDataPattern: /^_/  },
data: {   _b: true // 纯数据字段  }
})
14.7 生命周期函数
组件生命周期定义，在lifetimes 字段内：
lifetimes: { 
created(){ },
attached() { }
}
组件所在页面生命周期，定义在 pageLifetimes 节点：
Component({
pageLifetimes: {
show:  function () {  },       // 页面被展示
hide:  function () {  },       // 页面被隐藏
resize:  function (size) {  }  // 页面尺寸变化
}})
created： 监听组件实例被创建；(用于给组件的 this 添加自定义的属性)
attached：监听组件初始化完毕 / 进入页面节点树；(发请求获取初始数据)
ready：监听组件在视图层布局完成；(可操作页面)
moved：监听组件实例被移动到节点树另个位置；
detached：监听组件实例从页面节点树被移除；(清除定时器)
error：监听组件方法抛出错误；
14.8 插槽
1. 单个插槽
<!-- 组件的封装者 -->
<view>
<view>这里是组件的内部结构</view>
<!-- 封装组件的时候，使用slot进行占位 -->
<slot></slot>
</view>
<!-- 组件的使用者 -->
<my-test4>
<!-- 使用组件的时候，这部分被放在slot中 -->
<view>通过插槽填充的内容</view>
</my-test4>
2. 多个插槽
启用 多个插槽
Component({
options: {
multipleSolts: true
}
})
定义 多个插槽：
<view class="wrapper">
<slot name="before"></slot>
<slot name="after"></slot>
</view>
<my-test4>
<view slot="before">1111</view>
<view slot="after">2222</view>
</my-test4>
14.9 组件通讯
1. 属性绑定：只能传递数据，不能传递方法
父组件：定义->传出
data: {count: 0}
<my-test5 count="{{count}}">111</my-test5>
子组件接收：properties: {count: Number}
2. 事件绑定：子组件向父组件传递任意数据
父组件js中定义函数，通过父组件wxml自定义事件传给子组件
子组件js中，通过this.triggerEvent('自定义事件名',{ /*参数对象*/})
将数据发送到父组件，父组件js中通过e.detail获取子组件传的数据
syncCount(){}
<my-test5 count="{{count}}" bind:sync="syncCount"></my-test5>
this.triggerEvent('sync',{value:this.properties.count+1})
syncCount(e){
this.setData({
count: e.detail.value
})}
3. 获取组件实例
父组件通过 this.selectComponent() 获取子组件实例对象，访问子组件的数据和方法;
给子组件添加类或id -> 父组件绑定事件获取实例
<my-test5 class="customA" ... ... ></my-test5>
<button bindtap="getChild">获取组件实例</button>
getChild() {
const child = this.selectComponent('.customA')
}
十五、基础加强
15.1 behaviors
用于实现组件间代码共享：类似于mixins
每个 behaviors 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中
创建：创建behaviors文件夹 -> 新建my-behavior.js文件
导入：const myBehavior = required("../../behaviors/my-behavior")
Component({  myBehavior: [myBehavior],  )}
使用：<view>在组件中共享的behavior是： {{username}}</view>
module.exports = Behavior({
properties: {},
data: { username: 'zs' },
methods: {},
behaviors{}
// 其他节点/生命周期函数...
})
15.2 vant-weapp组件库
有赞前端团队开源的一套小程序 UI 组件库，官方文档地址 https://youzan.github.io/vant-weapp
安装、app.json引入、wxml使用：
1. 初始化 package.json ，项目根目录执行 npm init -y
2. npm i @vant/weapp@1.3.3 -S --production
3. 工具 -> 构建npm
4. 将 app.json 中的 "style": "v2" 去除
5. 在 app.json 的 "usingComponents": {} 中引入需要的组件
6. 在wxml 中使用
定制全局主题样式：page {}节点定义
<van-button type="danger">危险按钮</van-button>
page { 
--button-danger-background-color: #c00000;
}
15.3 API Promise 化
官方提供的异步 API 都是基于回调函数实现,容易造成回调地狱，可读性、维护性差.
1. 安装 npm i --save miniprogram-api-promise@1.0.4
2. 先删除原有的miniprogram_npm，重新构建npm包
3. app.js入口文件  导入并执行代码
import { promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp) // 参数wx顶级对象，wxp指向一个空对象
15.4 MobX全局数据共享
1. 使用 mobx-miniprogram创建 Store 实例对象
配合 mobx-miniprogram-bindings把 Store 中的共享数据或方法
绑定到组件或页面中，实现全局数据共享。
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
MobX 安装完毕，删除 miniprogram_npm 目录，重新构建 npm
创建MobX的Store实例：根目录下新建store文件夹，并新建 store.js 文件
在引用store的页面或组件的js文件内：绑定store里的成员
在页面中使用Store 中的成员
1. store 导入安装的插件
import { observable } from 'mobx-miniprogram'
export const store = observable({
numA: 1,     //  2. 定义数据字段
numB: 2,
get sum() {     //  3. get 定义计算属性
return this.numA + this.numB
},
//  4. 定义 actions 方法，用来修改 store 中的数据 
updateNum1: action(function (step) {
this.numA += store
}),
})
2. 引用 store 的页面的 .js文件
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
onLoad: function (options) {
this.storeBindings = createStoreBindings(this, {
store,   // 数据源
//  5. 绑定计算属性和字段数据
fields: ['numA', 'numB', 'sum'],
actions: ['updateNum1']    // 映射方法
})
},
btnHandler1(e) {
this.updateNum1(e.target.dataset.step)
},
15.5 分包
1. 解释：把一个完整的小程序项目，按需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载；可以首次启动时间，共同开发时可以更好的解耦协作。
2. 体积限制：整个小程序的主包+分包不超过16M，单个包不超过2M；
3. 引用原则：主包、普通分包、独立分包之间私有资源不能相互引用；
1. 分包的使用：
pages 是主包的所有页面
在 app.json 中, 新增 subpackages 的节点, 将放到分包的页面写入 subpackages 数组元素中.
"subPackages": [
{
"root": "pagA",  // 分包根目录
"name": "p1",    // 分包的别名
"pages": [
"pages/cat/cat",
"pages/dog/dog"
]
}
], 
2. 独立分包：
不打开主包而进入分包也可以启动小程序。本质也是分包，独立于主包和其他分包单独运行
"independent": true
3. 分包预下载
在 app.json 中，使用 preloadRule 规则，全加起来限额2M
"preloadRule": {             // 规则
"page/contact/conyact": {  // 页面路径
"network": "all",        // 指定网络模式
"packages": ["p1"]        // 下载哪些分包
},
}