关于uniapp开发微信小程序的功能点整理

该文档列举的功能点全部为uniapp开发微信小程序

地图开发

uniapp开发微信小程序有提供map组件，使用map组件开发地图加载的是腾讯地图。可以正常开发点聚合，围栏，路线轨迹等功能。

注意点： 组件默认为国测局坐标(火星坐标系)，调用 uni.getLocation 返回结果传递给 组件时，需指定 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. 分包加载

分包加载是微信官方提供的一种方案，整个的思路是： 将代码划分成不同的包，打开一个包中的某个页面，才加载这个包的代码，以此来优化小程序首次启动的下载时间。

分包有这么几个注意点：

1. 使用 subpackages 进行分包路径声明，subpackages 配置路径外的目录会被打包到主包中

2. tabBar 里配置的路径必须放在主包里

3. 不同的分包之间的资源不能相互引用，但都可引用主包中的资源

3. 代码包大小优化

1. 代码上传进行压缩处理

2. 将静态资源存储在服务器，比如图片

更多优化参考官方文档

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 进行处理。在有新版本时提示用户重启小程序更新新版本。

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) {
 // 新的版本下载失败
});

获取用户信息

官方地址：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拦截器对请求和响应增加相应处理，如

1. 登录信息处理

2. 请求头处理

3. 成功失败处理

4. 根据环境进行域名处理

官方文档：https://uniapp.dcloud.net.cn/api/interceptor.html

代码：https://gitee.com/github-29244000/uni-work/blob/master/pages/interceptor/interceptor.vue

解决微信小程序IOS兼容问题

功能点模板

解决微信小程序IOS日期无法正在转换的兼容问题

系统信息获取

uni.getSystemInfoSync().platform == 'ios' // IOS/苹果 系统
uni.getSystemInfoSync().platform == 'android' // Android/安卓系统

日期转换问题

问题描述

在使用日期相关业务，如倒计时、星期几获取；根据后台返回的时间格式转换时，后台返回了时间格式为"2022-02-22 22:22:22"，然后利用new Date() 转换时，ios中无法展示，安卓中显示正常

解决方案

将日期通过replace转换成"2022/02/22 22:22:22"形式，即可正常使用

webp图片无法正常显示

解决方案

将后端返回的地址链接webp格式图片全部替换成jpg或png形式的图片，前提是服务器本身是有jpg和png资源

小程序发布

https://escook.cn/docs-uni-shop/mds/11.publish.html#_11-1-%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%8F%91%E5%B8%83

前端铺子

可以自行学习里面的功能点，组件

文档地址：https://qdpz.zhoukaiwen.com/

源码地址：https://gitee.com/kevin_chou/qdpz

小程序演示：https://qdpz.zhoukaiwen.com/other/see.html