Mini Programs
Mini Programs
小程序上线以来，依附微信的社交场景及自身特性，迅速普及起来，各大公司产品都在跟进小程序的开发。
app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
1 | { |
Launch
 微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径。
 这个配置说明在 QuickStart 项目定义了两个页面，分别位于 pages/index/index 和 pages/logs/logs。而写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。
 于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。
 小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行。整个小程序只有一个 App 实例，是全部页面共享的。
Statement Period
onLoad(Object query)
页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。onReady
页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。onShow / onHide
页面显示/切入前台时触发
页面隐藏/切入后台时触发
Event Handling
小程序本身对于使用频率较高的页面事件进行了处理，可直接调用。
onPullDownRefresh
 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。onReachBottom
 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
 在触发距离内滑动期间，本事件只会被触发一次。onPageScroll(Object)
Object: scrollTop 页面在垂直方向已滚动的距离（单位px）
Pit
1. modify the object property values
Sometimes we need to modify a value of the object instead of modifying the entire object.
1
2
3
4
5handler () {
this.setData({
['Object.key']: value
})
}
2. modify one value of array
1 | handler () { |
3. stop event bubbling
1 | <view catchtap='handler'></view> |
4. ios8 compatibility of wxss
ios8 is not very good for flex compatibility, flx needs to complete the suffix.
1 | .style { |
5. canvas notice
When the drawn text is too long, we need to handle the line break yourself.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26textByteLength(text, num) {
let strLength = 0;
let rows = 1;
let str = 0;
let arr = [];
for (let j = 0; j < text.length; j++) {
if (text.charCodeAt(j) > 255) {
strLength += 2;
if (strLength > rows * num) {
strLength++;
arr.push(text.slice(str, j));
str = j;
rows++;
}
} else {
strLength++;
if (strLength > rows * num) {
arr.push(text.slice(str, j));
str = j;
rows++;
}
}
}
arr.push(text.slice(str, text.length));
return [strLength, arr, rows] // [text byte length，text displayed per line，rows]
},Since drawing is an async process, use canvasToTempFilePath api after drawing is complete.
1
2
3ctx.draw(false, () => {
//your code
})When using clip api to crop the image, there may be a problem that the clipping does not take effect, probably cause there is no stroke, which is a bug in the mini program.
6. wxParse related issues
wxParse can parse html code into mini program components, and the images rendered width wxParse can view large images.
But There’re some problems:
- When images are many, the page is too laggy, affect user experience.
- Native rich-text reqires high inline style format, and easily render error.Meanwhile, it can’t view large images.
- There is no perfect solution, using web-view may be better.
Sometimes we might meet situations where wxParse can’t parse the content, the reason is in lines 112 and 119 of wxparse/html2json.js, there is a console.dir, comment out the function, the content can be resolved.
7. query node information
mini program is data-driven and don’t support DOM operations, so you need to use a specific api to query related information.
1 | handler () { |
8. swiper infinite sliding
if you use setData in bindchange event callback function to change the current value, it may cause setData to be called continuously.
Therefore, in general, please check the source field before changing the current value to determine whether it is caused by user touch.
1 | swiperChange (e) { |
9. create poster by wxCanvas
1 | <canvas canvas-id="shareCanvas" class='canvas-container' style="width:{{posterWidth}}px; height:{{posterHeight}}px;"></canvas> |
1 | data: { |
Mini Programs