小程序
2021-06-28 本文已影响0人
南枫小谨
生命周期
应用周期
- onLaunch 首次打开
- onShow 初始化完成
- onHide 切换
页面周期
- onLoad 加载页面
- onShow 前后台切换
- onHide 前后台切换
- onUnLoad 重定向 / 路由切换
- onPullDownRefresh 下拉
- onReachBottom 上拉
- onShareAppMessage 分享
应用生命周期
- onLaunch 用户首次打开小程序 全局只触发一次
- onShow 小程序初始化完成以后触发、从后台进入前台触发
- onHide 小程序从前台进入后台触发
页面生命周期
- onLoad 加载页面
- onSHow 显示页面，从后台，或者重新进入本页面触发
- onReady 首次显示页面，一个页面只会触发一次
- onHide 后台运行或者跳转到其他页面触发
- onUnLoad 重定向 / 路由切换
双线程模型
小程序的渲染层和逻辑层分别由2个线程管理
- 在渲染层将wxml与wxss转化成js对象也就是虚拟DOM
- 在逻辑层将虚拟的DOM对象配合生成真实的DOM树，交给渲染层渲染
- 当数据变化时，逻辑层提供更新数据，js对象发生改变，用diff算法进行比较
4 将更新的反馈到真实的DOM树中，更新页面
运行机制
- 热启动：假如⽤户已经打开过某⼩程序，然后在⼀定时间内再次打开该⼩程序，此时⽆需重新启动，只需将后台态的⼩程序切换到前台，这个过程就是热启动；
- 冷启动：⽤户⾸次打开或⼩程序被微信主动销毁后再次打开的情况，此时⼩程序需要重新加载启动，即冷启动。
遇到的坑
1. 自定义tabbar在页面存在下拉更新（scrollview）的时候，页面被下拉，tabbar也会跟着下拉。
2. require在小程序中不支持绝对路径，只能用相对路径去选取'../../../utils/tool.js'
- 方案：
App({
require: function($uri) {
return require($url);
}
})
comp.js
const Api = app.require('utils/tool.js');
利用require返回uri带上/
3. 组件引用资源路径不能解析特殊字符或汉字
4. {{}}模板中不能执行特殊方法，只能处理简单的四则运算
const money = 345678;
<view>{{ money }}</view>
- 利用wxs的format
vue {{ money | moneyFilter }}
wxs 实现format
.wxs
const fnToFixed = function(num) {
return num.toFixed(2);
}
module.exports = {
fnToFixed
}
<wxs src='../../../xxx.wxs' module="filters">
<view>{{ filters.fnToFixed(money) }}</view>
5.wxs无法使用new Date()
- getDate()
6.setData过程中需要注意对象覆盖
data: {
a: '1',
b: {
c: 2,
d: 3
}
}
this.setData({
b: {
c: 4
}
});
const { b } = this.data;
b.c = 4;
this.setData({ b });
// wx-update-data
7. IOS的date不支持2020-06-26格式，必须要转成2020/06/26
8. wx接口promise化
wx-promise-pro
- 安装Promise wx-promise-pro
npm i -S wx-promise-pro
import { promisifyAll } from 'wx-promise-pro';
// before
wx.showLoading({
success: res => {
wx.request({
// ……
})
}
})
// after
wx.pro.showLoading({
title: 'loading',
mask: true
}).then(() => {
consol.log('I am in promise');
})
- 自己手写封装一个promise化的接口
wx.request({
url: '',
data: (),
success: res => {}
})
// 实现
wx.pro.request({
url: '',
data: ()
}).then(res => {}).catch(res => {})
- 做法：
function request(opt) {
return new Promise( (resolve, reject) => {
wx.request({
...opt,
success: res => {
resolve(res);
},
fail: err => {
reject(err);
}
})
} )
}
function promisify(api) {
return (opt = {}) => {
return new Promise((resolve, reject) => {
api({
...opt,
success: resolve,
fail: reject
})
})
}
}
promisify(wx.request)(opt);
9. app入口
-
可以通过getApp来获取全局的app()
a. 如果在App()内部函数中，在调用APP之前用getApp,直接用this即可
b. 获取getApp之后，可不可以拿到生命周期？可以，但是禁止操作 -
page()
a. getCurrentPage()获取当前page，不要修改页面栈，不要在app.onLaunch时候调用，page还没生成
b. wx.navigateTo(). 被打开的页面可以通过调用？this.getOpenEventChannel()来获取eventChannel对象
打开方，也可以在回调中拿到这个对象
