该文档列举的功能点全部为uniapp开发微信小程序
地图开发
uniapp开发微信小程序有提供map组件，使用map组件开发地图加载的是腾讯地图。可以正常开发点聚合，围栏，路线轨迹等功能。
注意点：<map> 组件默认为国测局坐标(火星坐标系)，调用 uni.getLocation 返回结果传递给 <map> 组件时，需指定 type 为 gcj02。
点聚合案例
https://gitee.com/github-29244000/uni-work/blob/master/pages/map/map.vue
功能点模板
以一个车辆管理系统举例
点聚合：车辆定位点过多导致地图加载慢，地图点显示密集不方便查看。可以通过点聚合快速查看分布情况，优化加载性能。
围栏：围栏有多边形，圆形等围栏，可以规定车辆必须在围栏内行驶；超出围栏进行报警。比如共享电动车就有类似功能。
点聚合讲解
使用小程序默认map组件可以直接绘制腾讯地图，基于map组件mapContext 对象。然后基于mapContext对象初始化点聚合实例将需要聚合的点通过addMarkers方法注入到地图中从而实现点聚合效果
图表开发
选型
uniapp插件市场中ucharts是下载次数是最高的，也是各平台兼容性最好的
官方地址：https://www.ucharts.cn/v2/#/
柱状图案例
https://gitee.com/github-29244000/uni-work/blob/master/pages/charts/charts.vue
地图案例
https://gitee.com/github-29244000/uni-work/blob/master/pages/charts/map.vue
抽奖功能
选型
lucky-canvas插件
官方链接：https://100px.net/
uniapp中使用：https://100px.net/usage/uni-app.html
大转盘案例
https://gitee.com/github-29244000/uni-work/blob/master/pages/lucky/lucky.vue
分包加载
功能点模板
使用小程序分包防止主包超出2M限制，加快主包加载
小程序分包讲解
1. 小程序代码包限制
由于目前小程序主包有大小限制，超过这个大小无法预览，也无法上传代码。所以需要进行合理的分包
目前小程序分包大小有以下限制：
整个小程序所有分包大小不超过 20M
单个分包/主包大小不能超过 2M
小程序分包可以根据功能，模块划分也可以根据第三方包模块划分，比如说图表资源包过大，可以让所有图表页面都放在一个分包里
2. 分包加载
分包加载是微信官方提供的一种方案，整个的思路是： 将代码划分成不同的包，打开一个包中的某个页面，才加载这个包的代码，以此来优化小程序首次启动的下载时间。
分包有这么几个注意点：
使用 subpackages 进行分包路径声明，subpackages 配置路径外的目录会被打包到主包中
tabBar 里配置的路径必须放在主包里
不同的分包之间的资源不能相互引用，但都可引用主包中的资源
3. 代码包大小优化
代码上传进行压缩处理
将静态资源存储在服务器，比如图片
更多优化参考官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips/start_optimizeA.html
小程序更新机制
官方地址：https://uniapp.dcloud.net.cn/api/other/update.html#getupdatemanager
开发者在管理后台发布新版本的小程序之后，微信客户端会有若干个时机去检查本地缓存的小程序有没有新版本，并进行小程序的代码包更新。但如果用户本地有小程序的历史版本，此时打开的可能还是旧版本。
功能点模板
当小程序有版本更新时，用户打开小程序自动进行弹窗提醒用户更新小程序
小程序更新讲解
小程序版本更新小程序默认有定期更新和异步更新但都不是实时的，如果希望小程序立刻更新，可以调用小程序的api进行手动触发更新
1. 启动时同步更新
在以下情况下，小程序启动时会同步更新代码包。同步更新会阻塞小程序的启动流程，影响小程序的启动耗时。
如果更新失败或超时，为了保障小程序的可用性，还是会使用本地版本打开。
定期检查发现版本更新
微信运行时，会定期检查最近使用的小程序是否有更新。如果有更新，下次小程序启动时会同步进行更新，更新到最新版本后再打开小程序，尽可能保证用户能够尽快使用小程序的最新版本。
总的来说，开发者在后台发布新版本之后，无法立刻影响到所有现网用户，但最差情况下，也在发布之后 24 小时之内覆盖绝大多数用户。
用户长时间未使用小程序
用户长时间未使用小程序时，为保障小程序版本的实时性，会强制同步检查版本更新，更新到最新版本后再打开小程序。
2. 启动时异步更新
即使启动前未发现更新，小程序每次冷启动时，都会异步检查是否有更新版本。如果发现有新版本，将会异步下载新版本的代码包。但当次启动仍会使用客户端本地的旧版本代码，即新版本的小程序需要等下一次冷启动才会使用。
3. 开发者手动触发更新
在启动时异步更新的情况下，如果开发者希望立刻进行版本更新，可以使用 wx.getUpdateManager API 进行处理。在有新版本时提示用户重启小程序更新新版本。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="js" cid="n79" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">const updateManager = uni.getUpdateManager();
updateManager.onCheckForUpdate(function (res) {
// 请求完新版本信息的回调
console.log(res.hasUpdate);
});
updateManager.onUpdateReady(function (res) {
uni.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
success(res) {
if (res.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate();
}
}
});
});
updateManager.onUpdateFailed(function (res) {
// 新的版本下载失败
});</pre>
获取用户信息
官方地址：https://uniapp.dcloud.net.cn/api/plugins/login.html#getuserprofile
功能点模板
通过getUserProfile进行小程序授权，获取用户头像昵称等
使用webview嵌套远程地址
官方地址：https://uniapp.dcloud.net.cn/component/web-view.html#web-view
功能点模板
采用webview内嵌h5文章页面，网页端通过uni.postMessage向小程序传输信息
代码：https://gitee.com/github-29244000/uni-work/tree/master/pages/webview
使用live-server打开index.html
封装公用搜索组件及页面
https://escook.cn/docs-uni-shop/mds/5.search.html
列表页上拉刷新下拉加载
https://escook.cn/docs-uni-shop/mds/6.goodslist.html
请求响应拦截器
功能点模板
使用uni.addInterceptor拦截器对请求和响应增加相应处理，如
登录信息处理
请求头处理
成功失败处理
根据环境进行域名处理
官方文档：https://uniapp.dcloud.net.cn/api/interceptor.html
代码：https://gitee.com/github-29244000/uni-work/blob/master/pages/interceptor/interceptor.vue
解决微信小程序IOS兼容问题
功能点模板
解决微信小程序IOS日期无法正在转换的兼容问题
系统信息获取
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false"
lang="js"
cid="n114"
mdtype="fences"
style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
uni.getSystemInfoSync().platform == 'ios' // IOS/苹果 系统
uni.getSystemInfoSync().platform == 'android' // Android/安卓系统</pre>
日期转换问题
问题描述
在使用日期相关业务，如倒计时、星期几获取；根据后台返回的时间格式转换时，后台返回了时间格式为"2022-02-22 22:22:22"，然后利用new Date() 转换时，ios中无法展示，安卓中显示正常
解决方案
将日期通过replace转换成"2022/02/22 22:22:22"形式，即可正常使用
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false"
lang="vue"
cid="n120"
mdtype="fences"
style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><template>
<view>
{{date.getDay()}}
</view>
</template>
<script>
export default {
data() {
return {
temporaryTime1: ''
}
},
onShow() {
let time = '2022-02-22 22:22:22';
let date = new Date(time.replace(/-/g, '/')); //
let date = new Date(time.replace(/-/g, '/'));
this.date = date
}
}
</script>
</pre>
webp图片无法正常显示
解决方案
将后端返回的地址链接webp格式图片全部替换成jpg或png形式的图片，前提是服务器本身是有jpg和png资源
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="vue" cid="n124" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><!-- 无法正常显示 -->
<image src="http://p1-growth.byteimg.com/tos-cn-i-0y3neq6l41/44eb8c8d678049c5962f62bb2d352e09~tplv-0y3neq6l41-webp.webp"></image>
<!-- 可以正常显示 -->
<image src="http://p1-growth.byteimg.com/tos-cn-i-0y3neq6l41/44eb8c8d678049c5962f62bb2d352e09~tplv-0y3neq6l41-webp.jpg"></image>
<!-- 转换方法 url.replace(/webp/g, 'jpg') --></pre>
小程序发布
前端铺子
可以自行学习里面的功能点，组件
文档地址：https://qdpz.zhoukaiwen.com/
