# 小程序工作总结
- #### 小程基础知识
1. 小程序页面:
- 页面组成：
一个小程序页面由四个文件组成，分别是：
| 文件类型 | 必需 | 作用 |
| ---- | ---- | ---- |
| js | 是 | 页面逻辑 |
| wxml | 是 | 页面结构 |
| json | 否 | 页面配置 |
| wxss | 否 | 页面样式 |
- 页面注册：[页面注册](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html)
- 页面生命周期：
onLoad—-监听页面加载
onReady—-监听页面初次渲染完成
onShow—-监听页面显示
onHide—-监听页面隐藏
onUnload—-监听页面卸载
[页面生命周期](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html)
- 页面的路由：[页面路由](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html)
2. 组件的介绍和使用:[组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)
3. 获取界面上的节点信息:[获取界面上的节点信息](https://developers.weixin.qq.com/miniprogram/dev/framework/view/selector.html)
4. 小程序分包:[小程序分包](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html)
5. 用微信小程序开发工具生成骨架屏:[骨架屏](https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html)
6. 常用组件：[scroll-view](https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html) [swiper](https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html)
7. 调试：[vconsole](https://developers.weixin.qq.com/miniprogram/dev/framework/usability/vConsole.html) [调试工具](https://developers.weixin.qq.com/miniprogram/dev/framework/performance/perf_debug.html)
8. 页面通信:
- #### storeage+onShow
```
// 以A->B示例
// A 页面
Page({
onShow(){
if(wx.getStorageSync('$datas')){
console.log(wx.getStorageSync('$datas')) // 11111
}
},
})
// B 页面
Page({
someActions(){
wx.setStorageSync('$datas','11111')
},
})
```
- #### globalData + onShow
```
// 以A->B示例
// A 页面
const app = getApp();
Page({
onShow(){
if(app.globalData.$datas){
console.log(app.globalData.$datas) // 11111
}
},
})
// B 页面
const app = getApp();
Page({
someActions(){
app.globalData.$datas = '11111';
},
})
```
- #### EventChannel
```
// A页面
wx.navigateTo({
url: 'B?id=1',
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
// B页面
Page({
onLoad: function(option){
console.log(option.query)
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
eventChannel.emit('someEvent', {data: 'test'});
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}
})
```
- #### getCurrentPages
```
// A页面
Page({
someActions(datas){
console.log(datas); // 11111
},
})
// B页面
Page({
someActions(){
const pages = getCurrentPages();
if (pages.length < 2) return;
// 如果页面层级较多，可用循环去匹配到A页面；
// 此处仅做2个页面的示例
const prevPage = pages[pages.length - 1];
// 路由匹配到A
if (prevPage.route === 'A') {
prevPage.someActions('11111');
}
},
})
```
9. 性能优化和进阶学习：
- [文档](https://developers.weixin.qq.com/miniprogram/dev/framework/performance/)
- [视频](https://developers.weixin.qq.com/community/business/doc/0002ce57c346300cccdd3ad835280d)
- #### 项目结构介绍
```
|——assets //主包的静态资源目录
|——image //主包的图片目录
|——style //图标和公共样式目录
|——icon //icon图标样式目录
|——common //公共样式目录
|——js //主包的js目录
|——node_modules //npm安装包的目录
|——miniprogram_npm //小程序构建后的node_moudels目录
|——components //公共组件目录
|——pages //主包页面
|——app.js //小程序的入口js文件（类似Vue的main.js）
|——app.json //小程序的配置文件
|——app.wxss //小程序全局样式文件
|——package.json //npm的项目信息文件
|——project.config.json //小程序的项目配置文件
```
- #### 项目工具库
1. UI库：[Vant Weapp](https://vant-contrib.gitee.io/vant-weapp/#/home)
2. 时间处理库：[dayjs](https://dayjs.fenxianglu.cn/)（moment.js有点大就没用）
3. echarts：[echarts在小程序中使用](https://blog.csdn.net/qq_38987146/article/details/120324006) [echarts自定义构建](https://echarts.apache.org/zh/builder.html)
- #### 组件的使用
1. ##### 页面标题组件：
因为用的标题和底部tabbar都不是微信原生的、是vantUI的、所以内容区域自适应高度的话要自己减去相应的高度。
- .wxml文件代码
```
<lb-box title="顶部标题内容" otherHeight="{{50}}" left-arrow="{{false}}">
<!-- 内容区域（其高度是自适应的默认除去上部的高,若otherHeight有值的话也会减去。） -->
</lb-box>
```
- .json文件代码
```
{
"usingComponents": {
"lb-box": "/components/lb-box/lb-box" //不需要局部注册、已经在全局注册过了
},
}
```
3. ##### 页面scorll-view加载组件：
- .wxml文件代码
```
<lb-scroll-list class="scroll-list" url="{{url}}" search-form="{{searchForm}}" bind:handleData="handleData" bind:reLoad="reLoad">
<view wx:for="{{dataList}}" class="scroll-item" wx:key="index">
<view>
<view class="item-title">{{item.pointChangeName}}</view>
<view class="item-time">{{item.createTimeStr}}</view>
</view>
<view class="item-integral">{{(item.pointChange > 0 ? '+':'')+item.pointChange}}</view>
</view>
</lb-scroll-list>
```
- .js文件代码
```
data: {
// 搜索条件
searchForm: {
operationTypes: '0,5,6,8,9,10,11,12,13',
},
//列表数据
dataList: [],
url: "/api/v3.0/vip-management/vip-card-log-do/getVipCardLogInfo",
}
reLoad() {
this.setData({
dataList: [],
})
// reload做的外部操作
this.getAllPoint()
},
```
- .json文件代码
```
{
"usingComponents": {
"lb-scroll-list":"/components/lb-new-scroll-list/lb-new-scroll-list"
},
}
```
4. ##### 图片上传组件：
- .wxml文件代码
```
<lb-upload-img bind:getFileList="getFileList" maxCount="{{5}}" />
```
- .js文件代码
```
data: {
fileList: [] //已上传图片展示数组
}
getFileList(e) {
// console.log(e);
this.setData({
fileList: e.detail
})
},
```
- .json文件代码
```
{
"usingComponents": {
"lb-upload-img":"/components/lb-upload-img/lb-upload-img"
},
}
```
- #### 踩坑和注意事项
- ##### scorll-view的高度问题：
每次高度改变的话记得用wx:if重新渲染，从而让其重新初始化、否则造成意想不到的坑。列：自适应scorll-view高度时应赋值其高度为'',因为过早赋值其高度会导致微信渲染其的下拉刷新高度出现问题。
- ##### ios机型下拉的问题：
每个页面的.JSON文件都要记得配置"disableScroll": true用来禁止ios机型下拉的,全局配置设置没用。
- ##### 解决图片设置widFix闪烁的问题：
在全局app.wxss设置height:auto,所以除了widthFix大部分的图片要加上高度、不然会不显示。
- ##### 微信开发者工具的坑：
微信开发者工具中引入一些Vant组件时一开始样式会不生效，可以先注释app.wxss的样式再保存，引入组件的样式就会生效了。一些样式在微信开发者工具上展示是有问题的，但是实机暂无问题，列：echarts在滚动时会出现偏移，实机无问题。
- ##### 关注小程序bug列表（尽量避免）：[小程序bug](https://developers.weixin.qq.com/community/develop/issueList?type=%E4%BF%AE%E5%A4%8D%E4%B8%AD&block=bug)
