最近接了个小程序的活，时间紧任务重，以前做过，细节基本忘干净了，于是又回头翻api，加上新的规则变更(主要是登陆)，3天的活变成5天了。
大自然的搬运工要靠手速才能活下去。对着文档一定说时间要5天（3天干完，2天摸鱼）。
1 创建开发者账号
申请appId在manifest.json中mp-weixin中配置
小程序版本管理mp.weixin.qq.com/wxamp/index…
微信官方文档(包括小程序、公众号、开放平台) developers.weixin.qq.com/doc/
微信开放平台 open.weixin.qq.com/
微信公众平台(订阅号、服务号、小程序) mp.weixin.qq.com/wxamp/wacod…
2 工具选择(HBuilderX只是做编译和上传，vscode编辑代码)
HBuilderX+微信开发者工具+vscode
HBuilderX：hx.dcloud.net.cn/
微信开发者工具：developers.weixin.qq.com/doc/oplatfo…
3 使用架构
Uni-app + Vue
为什么使用uniapp：uniapp.dcloud.io/
创建uniapp小程序脚手架：
4 编译、协议限制(太大了就看依赖图，减少大小)
1 开发环境、编译环境下下预览都有主包2M的限制。
2 发行环境下会压缩代码(当前我开发环境下是2.8M, 压缩之后是1.9M )。
3 发行环境压缩超过2M没有办法部署以及真机调试(设置中真机调试可放开到4M)。
4 主包压缩会带着静态资源static目录。
5 所有连接到的请求必须是https请求(调试阶段可以放开限制)。
5 路由配置page.json
1 开发环境下第一个路由就是进去的第一个页面(线上环境可设置第一个页面路径)
2 分包subpackages(参数是[{root: ‘路径’,pages:[多个路由]}, {root: ‘路径1’,pages:[多个路由]}]), 路径1和路径2会压缩为2个分包。
6 底部菜单tabBar
1 tabBar的所有路由必须在pages里面(也就是主包内)。
2 tabBar的第一个路由必须和pages里的第一个路由一样。
3 tabBar菜单中引用相同的组件尽量不要太复杂，会产生缓存(具体原因没有排查出来)。
4 tabBar不支持单个菜单的隐藏和显示
详见: developers.weixin.qq.com/community/d…, 上面的方案都不行
推荐的自定义tabBar有切换页面时闪动的情况，官方没有解决方案
7 生命周期
uniapp.dcloud.net.cn/tutorial/pa…
8 公共组件
基础组件列表(最大区别是dom规范中不用div用view，其实用div也没事)
uniapp.dcloud.io/component/#…
uni_modules组件规范uniapp.dcloud.io/plugin/uni_…
添加uni_modules插件，插件市场ext.dcloud.net.cn/
小程序组件节点渲染都会使用Shadow DOM(外部的css不能改变组件内部的样式)
下载下来的包(在根目录uni_modules下)可以通过参数的形式传入修改或者直接修改 uniCloud组件uniapp.dcloud.io/component/#…
9 图标引入
1 iconfont中下载Unicode类型的icon数据
2 将iconfont.css和iconfont.ttf复制 uniapp的static目录下
3 引入uni-icons组件，替换引入
4 在App.vue中引入iconfont.css
5 使用
不引入插件 events.jianshu.io/p/ca463f362…
10 图片引入
<image class="user-title-img" src="~@/static/img/select-bg.png" mode="scaleToFill">
src是可以传图片路径和Base64格式
有时候base64太长会导致显示不出，需要去掉base64内的回车换行符来修正 base64.replace(/[\r\n]/g, "")
11 数据缓存
本地缓存uni.setStorageSync('token', token), uni.getStorageSync('token'),
优点是可以直接看到直接取到，缺点是没法监听值的变化。
Vuex 优点是可以监听值的变化，缺点是不可以直接看到直接取到以及调试起来非常费时费力。编译刷新就没了
12 地图相关
1 获取地理位置坐标和详细地址
2 地图相关接口需要审核之后才能发布正式版
developers.weixin.qq.com/doc/oplatfo…
3 当前位置查询和通过当前地址坐标进行详情查询和周边兴趣点查询(反查需要引库(开发版39K，压缩版26K))
4 创建地图，地图点位聚合
residential-end-applet/subpackages/problemReporting/pages/address.vue
5 地理位置权限拒绝之后获取权限弹窗不能由代码控制再次弹出
(直接提示让用户点击按钮跳到地理位置授权页授权之后退回页面)
<view class="textarea-content-warning">
请点击 <Button openType="openSetting" class="auth-button">按钮</Button> 授权，获取地理位置信息
</view>
6 地图定位单个点
this.mapCtx = wx.createMapContext("mapModelMap");
this.mapCtx.moveToLocation({longitude: this.longitude,latitude: this.latitude,});
7 地图定位多个点位的中心点
this.mapCtx.includePoints({ points[longitude: marker.longitude,latitude: marker.latitude], padding: [0, 0, 0, 0] });
13 链接跳转以及获取链接上的参数
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.navigateTo({url: `/address?lat=${currentGeo.lat}&lon=${currentGeo.lon}`,});
this.lat= this.$mp.query?.latthis.lon= this.$mp.query?.lon
uni.redirectTo(OBJECT)关闭当前页面，
跳转到应用内的某个页面 返回uni.navigateBack({delta: 1})
跳转到tabBar并关闭其他不是tabBar的页面uni.switchTab({url: url,});
14 获取设备系统信息
const systemInfo = uni.getSystemInfoSync()
15 地理位置、用户信息、获取手机号信息限制
uniapp.dcloud.net.cn/component/b…
所有限制必须让用户点击按钮触发微信接口回调
16 配置合法域名
有时候体验版和本地能请求到，线上的环境请求不到接口。需要去小程序管理页面
mp.weixin.qq.com/wxamp/devpr…
需要到小程序管理平台-开发管理-开发设置-服务器域名 request合法域名内添加地图相关链接
17 上传文件
uni-file-picker组件的select:
uni-file-picker组件的select: function (seleteImgInfo) {}
seleteImgInfo.tempFilePaths=[缓存链接路径]
uni.uploadFile({
url:`${host()}api/uploadImg`, //请求路径
filePath: file, // 缓存链接路径，上传时会转换为二进制
header: {
token: register.token,
'plat-token': register.platToken,
'village-id': village.id,
openId: openid
},
name :'file', //上传参数 {file: 二进制文件} 如果上传失败不显示参数
success(res) {},
fail(err){}
})
18 常见问题
1 ref拿不到或者函数调不到。
this指向问题
2 本地调试可以请求到链接，线上环境请求不到链接(配置合法域名)。
3 vuex里面的值拿不到的问题。
点击小程序的
编译，或者点击重新刷新小程序，就像重置了默认store, 就没值了
4 this指向加函数调用顺序导致的问题。
5 ios重新载入小程序跳转为什么不能跳转当前页或者首页？
（官方说法）我们发现分享小程序页面给用户，用户打开小程序，然后进行了一系列用户操作，回到了首页或者其他页面，分享这个页面只可以让用户访问一次，然后用户为ios用户，点击重新载入就回到了分享的页面，而安卓回到了首页。
developers.weixin.qq.com/community/d…
6 微信小程序的登陆流程必须要按照它的规范来
developers.weixin.qq.com/community/d…
