小程序通用能力，你一定用得上

喜欢ヅ旅行 2022-02-28 23:40 197阅读 0赞

所谓小程序通用能力，就是如果你要做小程序，以下问题你通通都会遇到哦，我总结如下，让大家少踩坑，如有写得不当之处请指出。

## 设计指南 ##

微信官方提供的小程序界面设计指南和建议，附psd和sketch组件库下载。  
官方文档：[https://developers.weixin.qq.com/miniprogram/design/index.html?t=18111920][https_developers.weixin.qq.com_miniprogram_design_index.html_t_18111920]

## 登录授权 ##

**什么是登录授权：**  
确切的说是使用微信号登录小程序，需要用户手动点击同意授权，即可使用微信号登录，便利性在于不用注册，一键登录！  
接口文档：[https://developers.weixin.qq.com/miniprogram/dev/api/wx.login.html][https_developers.weixin.qq.com_miniprogram_dev_api_wx.login.html]

![Image 1][]

小程序登录流程时序图

**授权后获取的是微信什么信息？**  
获取微信号、头像、昵称、性别、地区、绑定的手机号码、openid、unionid。  
  
**怎么设计？**  
1、笔者的设计思路是：在需要获取用户信息的地方，如互动操作、表单交互、个人中心，而不是一打开小程序就让授权，一打开就提示授权容易被用户拒绝。这里需要特别强调常遗漏拒绝授权后的场景设计。可以参考「美团」系列小程序，都是在适当的时候提示授权。  
2、但是笔者还是看见绝大多数小程序是在首次进入小程序就让授权，如「步数宝」小程序授权，但是这个拒绝后是无法使用其它服务的。这种设计方式就是简单粗暴，无脑设计，因为完全可以不用考虑拒绝后的场景设计。

![Image 1][]

步数宝小程序授权界面

「美篇」小程序也是首次登录就让授权，否则无法浏览任何界面信息，如下图：

![Image 1][]

美篇小程序授权界面

**可以不用微信号登录吗？**  
可以，除了使用微信号登录外还可以使用手机号码和验证码登录，如美团小程序的登录界面有两种选择：

![Image 1][]

美团小程序登录页

**使用微信号登录后可以退出登录吗？**  
1、大部分小程序都没有设计退出登录功能，理由可能就是不想让用户退出登录，当用户删除小程序后需要重新登录。  
2、更甚有开发者这么设计，删除后再打开不用重新授权，等于永远都是登录状态，如「泰禾生活」小程序，感兴趣的朋友可以去体会一下～！（ps：这是朋友公司的老板需求?）  
3、当然也可以设计退出出口。

**删除小程序后用户数据还在吗？**  
1、如果用户信息是存储在微信缓存里，那么删除小程序就没有用户数据了，笔者曾经玩一个切水果的小游戏，玩到300多关不小心删除了小游戏，结果重新打开后发现数据没了……所以删除需谨慎，天黑路滑，你是猜不到伟大的开发者是怎么设计的。。  
2、如果用户信息是存储在数据库里，删除后当然还在啦。

## Openid和UnionID ##

**什么是openid？**  
用户的唯一标识，一个openid对应一个公众号。

**什么是unionid？**  
用户的统一标识，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的，即用户帐号互通。  
接口文档：[https://developers.weixin.qq.com/miniprogram/dev/api/uinionID.html][https_developers.weixin.qq.com_miniprogram_dev_api_uinionID.html]

> 微信的用户隐私策略：每个接入微信的应用（公众号、APP）就像一个独立的商场，用户使用这些应用就像逛商场，商场用会员卡识别用户，类似的，我们根据商场名字为每个用户生成了一张专属会员卡（openid），每张会员卡只能在对应的商场才能够使用，你不能拿着沃尔玛的会员卡去华润万家积分。这是一种安全的授权方式，如果没有这个会员卡，直接暴露微信号，就相当于拿着身份证去逛商场，丢失一个会员卡号远比丢失身份证号要安全。  
>   
> 那么问题来了，都是万达集团，万达大歌星与万达商场希望做到会员卡通用。微信在这里做了一个打通机制，对于同一个企业，在用户属性里面加了一个企业属性（UnionID），方便同一个企业在不同的产品中识别到同一个用户。  
>   
> 这个机制伴随着微信联合登录已经在微信开放平台(open.weixin.qq.com)推出了。获得了开放平台认证的企业，可以绑定10个手机应用、10个网站、10个公众号，他们对应的用户信息也可以互联互通。  
>   
> 强烈提示：对于开发团队而言，在接入微信登录之初，往往会忽视用户的UnionID，只记录了openid。这会导致后期账号打通时候，需要用户重新授权，运营成本增高，遇到此类问题的团队不在少数。

# 获取地理位置 #

**获取的是用户的什么地理位置？**  
获取用户当前的微信地理位置、速度，调用此接口需要用户授权。  
接口文档：[https://developers.weixin.qq.com/miniprogram/dev/api/wx.getLocation.html][https_developers.weixin.qq.com_miniprogram_dev_api_wx.getLocation.html]  
  
**何时出现？**  
笔者的设计原则是：在需要获取地理位置的页面调用此接口，非首次进入就调用此接口。

## 小程序缓存 ##

**什么是小程序缓存？**  
同浏览器缓存，保存在本地。  
  
**怎么清除缓存？**  
同一个小程序的开发版、体验版、线上版的缓存是共用的，你需要同时删除这三个版本的小程序，缓存才会被删除。  
  
**不清除缓存就不能看见最新版小程序了吗？**  
1、微信会固定一段时间后自动清除小程序缓存，如果没清除缓存则不能马上看到最新版的小程序；  
2、如果想看到最新版的小程序可以手动删除小程序，如果不想让用户手动清除缓存，可以添加更新提示，详见下一条更新提示。

# 更新机制 #

**冷启动**  
小程序首次打开或销毁后再次被打开，小程序冷启动时，会检查小程序是否有最新版本。如果有则将异步下载最新版本，但是仍将运行当前版本等到下一次冷启动时再运行最新版本。  
**热启动**  
小程序打开后，在一段时间内（目前：5分钟）再次被打开，此时会将后台的小程序切换到前台。  
小程序迭代速度比较快，比如修复某个BUG，每次发布了新的代码，更新不及时，着急的时候，得让用户删除小程序再进入才可以。这时候就需要使用强制更新技术，调用wx.getUpdateManager API进行处理，这样用户打开小程序将会出现更新提示，就不用让用户手动删除小程序啦。接口文档：[https://developers.weixin.qq.com/miniprogram/dev/api/wx.getUpdateManager.html?search-key=%E6%9B%B4%E6%96%B0][https_developers.weixin.qq.com_miniprogram_dev_api_wx.getUpdateManager.html_search-key_E6_9B_B4_E6_96_B0]

## 引导添加小程序 ##

**什么情况下引导？**  
在最能吸引用户回头率的业务场景中引导用户添加小程序。

**可以判断用户是否添加过当前小程序吗？**  
因为微信没有提供此接口，所以开发者无法判断用户是否添加过某小程序。

**如何设计？**  
手动点击「已添加小程序」或者「我知道了」后则不再弹出，如下图：

![Image 1][]

首次打开美团小程序

## 公众号关注组件 ##

用户扫码打开小程序时，开发者可在小程序内配置公众号关注组件，方便用户快捷关注公众号，实现一码两用使用场景。  
开发文档：[https://developers.weixin.qq.com/miniprogram/dev/component/official-account.html][https_developers.weixin.qq.com_miniprogram_dev_component_official-account.html]  
例：腾讯官方小程序「小经费」，在小程序首页加入公众号关注组件

![Image 1][]

腾讯小经费小程序

## 压缩图片接口 ##

用于前端压缩图片，可选压缩质量。  
接口文档：[https://developers.weixin.qq.com/miniprogram/dev/api/wx.compressImage.html?from=groupmessage&isappinstalled=0][https_developers.weixin.qq.com_miniprogram_dev_api_wx.compressImage.html_from_groupmessage_isappinstalled_0]

## 小程序转发 ##

微信不提倡开发者诱导或强制用户转发至朋友圈，如转发后才能解锁某项功能等。  
不自定义转发图片的情况下，默认会取当前页面，从顶部开始，高度为 80% 屏幕宽度的图像作为转发图片。  
文档说明：[https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html][https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_share.html]

## 小程序跳转 ##

**在小程序里打开另外一个小程序**  
接口文档：[https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateToMiniProgram.html][https_developers.weixin.qq.com_miniprogram_dev_api_wx.navigateToMiniProgram.html]  
  
**返回到上一个小程序**  
只有在当前小程序是被其他小程序打开时可以调用成功。  
接口文档：[https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateBackMiniProgram.html][https_developers.weixin.qq.com_miniprogram_dev_api_wx.navigateBackMiniProgram.html]

# 内容安全 #

当小程序提供UGC内容时，需要接入内容安全接口，否则审核有可能不通过。  
文字审核接口：[https://developers.weixin.qq.com/miniprogram/dev/api/msgSecCheck.html][https_developers.weixin.qq.com_miniprogram_dev_api_msgSecCheck.html]  
图片审核接口：[https://developers.weixin.qq.com/miniprogram/dev/api/imgSecCheck.html][https_developers.weixin.qq.com_miniprogram_dev_api_imgSecCheck.html]

## 模版消息 ##

去「微信公众平台」设置模版，拿到模板ID和模版格式，然后进行开发。开发完成后用户就可以在微信服务通知里接收到模版消息了。  
开发文档：[https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html][https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_template-message.html]

## 服务通知 ##

**什么是服务通知？**  
可以理解为它是个推送消息的微信服务号，用于接收各个小程序的模版消息，对应技术是模版消息。  
小程序不能随意给用户推送消息，只有当用户跟小程序发生互动行为后，才具备推送通知的能力。  
  
**如何让用户与小程序发生互动行为？**  
1、支付，1次支付可推送3条，多次支付时推送条数独立，支付后7天内有效；  
2、提交表单，1次提交表单可推送1条，多次提交时推送条数独立，表单提交后7天内有效。

**注意事项：**  
1、用户基本都不会关闭微信的消息推送，所以相比较 App推送和短信推送来说，小程序的推送触达率会高很多。  
2、但如果做的太过分了，恶意诱导用户进行触发操作令用户反感，会有被用户拒收该小程序模版消息的风险。  
  
**如何设计？**  
很多开发者会把推送的主题字号加大，也可以加上五彩斑斓的颜色，或者给内容加一些 Emoji，意图制造出Duang~ Duang~ Duang~的效果，吸引用户的注意力。

![Image 1][]

微信服务通知

# 客服消息 #

小程序内置客服，[点击这里查看详情][Link 1]。  
开发文档：[https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html][https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_customer-message_customer-message.html]

## 用户反馈 ##

1、可用「腾讯吐个槽」小程序快速建立小程序用户反馈平台，对应技术是小程序跳转。  
官网：[https://tucao.qq.com/][https_tucao.qq.com]  
2、也可使用小程序插件来建立，请在「微信公众号平台-插件」里搜索「腾讯吐个槽」。

## 附近的小程序 ##

在「微信公众平台」开启附近的小程序后，用户可以在「微信-发现-小程序-附近的小程序」里查找到。

## 小程序审核 ##

小程序审核一般24H内会审核通过，但是如果你的小程序涉及社交、提现、红包等内容时则需要当地工信部二次审核，审核时间7-14日，请开发者做好心理准备，避免在预计的上线时间时拉闸。

**你可能感兴趣的**

*  [黑科技！Fundebug支持网页录屏!][Fundebug]
 *  [Async/Await替代Promise的6个理由][Async_Await_Promise_6]
 *  [30个极大提高开发效率的VS Code插件][30_VS Code]
 *  [10个JavaScript难点][10_JavaScript]
 *  [2018前端工程师成长路线图][2018]
 *  [Source Map入门教程][Source Map]
 *  [2018年最值得关注的30个Vue开源项目][2018_30_Vue]
 *  [10个最佳ES6特性][10_ES6]
 *  [重新思考单元测试][Link 2]
 *  [不要争了！技术选择没那么重要][Link 3]

[https_developers.weixin.qq.com_miniprogram_design_index.html_t_18111920]: https://developers.weixin.qq.com/miniprogram/design/index.html?t=18111920
[https_developers.weixin.qq.com_miniprogram_dev_api_wx.login.html]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.login.html
[Image 1]: 
[https_developers.weixin.qq.com_miniprogram_dev_api_uinionID.html]: https://developers.weixin.qq.com/miniprogram/dev/api/uinionID.html
[https_developers.weixin.qq.com_miniprogram_dev_api_wx.getLocation.html]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.getLocation.html
[https_developers.weixin.qq.com_miniprogram_dev_api_wx.getUpdateManager.html_search-key_E6_9B_B4_E6_96_B0]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.getUpdateManager.html?search-key=%E6%9B%B4%E6%96%B0
[https_developers.weixin.qq.com_miniprogram_dev_component_official-account.html]: https://developers.weixin.qq.com/miniprogram/dev/component/official-account.html
[https_developers.weixin.qq.com_miniprogram_dev_api_wx.compressImage.html_from_groupmessage_isappinstalled_0]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.compressImage.html?from=groupmessage&isappinstalled=0
[https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_share.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html
[https_developers.weixin.qq.com_miniprogram_dev_api_wx.navigateToMiniProgram.html]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateToMiniProgram.html
[https_developers.weixin.qq.com_miniprogram_dev_api_wx.navigateBackMiniProgram.html]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateBackMiniProgram.html
[https_developers.weixin.qq.com_miniprogram_dev_api_msgSecCheck.html]: https://developers.weixin.qq.com/miniprogram/dev/api/msgSecCheck.html
[https_developers.weixin.qq.com_miniprogram_dev_api_imgSecCheck.html]: https://developers.weixin.qq.com/miniprogram/dev/api/imgSecCheck.html
[https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_template-message.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html
[Link 1]: https://www.jianshu.com/p/00575c6535bd
[https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_customer-message_customer-message.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html
[https_tucao.qq.com]: https://tucao.qq.com/
[Fundebug]: https://blog.fundebug.com/2018/05/21/fundebug_release_black_tech_replay/
[Async_Await_Promise_6]: https://blog.fundebug.com/2017/04/04/nodejs-async-await/
[30_VS Code]: https://blog.fundebug.com/2018/07/24/vs-extensions/
[10_JavaScript]: https://blog.fundebug.com/2017/07/17/10-javascript-difficulties/
[2018]: https://blog.fundebug.com/2018/09/04/2018-frontend-roadmap/
[Source Map]: https://blog.fundebug.com/2017/03/13/sourcemap-tutorial/
[2018_30_Vue]: https://blog.fundebug.com/2018/05/29/30-amazing-vuejs-open-source/
[10_ES6]: https://blog.fundebug.com/2017/08/21/10-best-es6-feature/
[Link 2]: https://blog.fundebug.com/2017/12/20/rethinking-unit-test/
[Link 3]: https://blog.fundebug.com/2018/07/19/technology-selection-is-not-critical/