小程序开发流程

山脚發表於 2021-10-15 17:21:00

<h1 class="md-end-block md-heading">小程序的运行环境差异</h1>
小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端
<img src="https://img2020.cnblogs.com/blog/1186521/202110/1186521-20211015170118662-1816010651.png" alt="" loading="lazy">
<h1 class="md-end-block md-heading">小程序开发流程</h1>
<h3 class="md-end-block md-heading">注册小程序：申请帐号</h3>
注册小程序链接：https://mp.weixin.qq.com/wxopen/waregister?action=step1
<h3 class="md-end-block md-heading">登录小程序后台</h3>
登录链接：https://mp.weixin.qq.com/
在菜单 “开发”-“开发设置” 看到小程序的 AppID
<h3 class="md-end-block md-heading">开发工具下载</h3>
微信开发者工具下载链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
<h3 class="md-end-block md-heading md-focus">新建小程序：如下图步骤</h3>
<img src="https://img2020.cnblogs.com/blog/1186521/202110/1186521-20211015170155012-1202699861.png" alt="" loading="lazy">
注：没有APPID会限制功能体验具体参照微信开发者文档！
<h3 class="md-end-block md-heading">小程序文件的相关作用</h3>
<ol class="ol-list" start="">
<li class="md-list-item">
<code>.json</code> 后缀的 <code>JSON</code> 配置文件
</li>
<li class="md-list-item">
<code>.wxml</code> 后缀的 <code>WXML</code> 模板文件
</li>
<li class="md-list-item">
<code>.wxss</code> 后缀的 <code>WXSS</code> 样式文件
</li>
<li class="md-list-item">
<code>.js</code> 后缀的 <code>JS</code> 脚本逻辑文件
</li>
<li class="md-list-item">
<code>app.json</code> 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
</li>
</ol>
小程序全局配置文档（app.json文件）：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
小程序页面配置文档（每个页面的json文件）https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
页面中配置项在当前页面会覆盖 <code>app.json</code> 的 <code>window</code> 中相同的配置项
sitemap 配置文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html
开发者可以通过 <code>sitemap.json</code> 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中
项目配置文件（project.config.json）文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
<h3 class="md-end-block md-heading">配合weui使用</h3>
组件库文档：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/
在全局配置app.json文件下增加如下配置即可正常使用内部组件
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"> "useExtendedLib": {
"weui": true
},
</pre>
</div>
<div class="cnblogs_code">
<pre>"usingComponents": {
"mp-icon": "weui-miniprogram/icon/icon"
}</pre>
</div>
另外一种npm方式具体参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
<h1 class="md-end-block md-heading md-focus">小程序版本</h1>
<img src="https://img2020.cnblogs.com/blog/1186521/202110/1186521-20211015170352684-2117774880.png" alt="" loading="lazy">
<h3 class="md-end-block md-heading">小程序测试号申请</h3>
微信扫描二维码，即可获得为自己分配好的小程序和小游戏测试账号
链接：https://mp.weixin.qq.com/wxamp/sandbox?doc=1
<h3 class="md-end-block md-heading">发布上线</h3>
一个小程序从开发完到上线一般要经过预览-> 上传代码 -> 提交审核 -> 发布等步骤
<h3 class="md-end-block md-heading">代码管理（也可上传自己的git）</h3>
链接：https://git.weixin.qq.com/
<h3 class="md-end-block md-heading">运营数据查看</h3>
有两种方式可以方便的看到小程序的运营数据
方法一：登录 小程序管理后台 - 数据分析，点击相应的 tab 可以看到相关的数据。
方法二：使用小程序数据助手，在微信中方便的查看运营数据
<h1 class="md-end-block md-heading">小程序开发注意事项</h1>
<h3 class="md-end-block md-heading">允许上传的文件</h3>
只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传
<ol class="ol-list" start="">
<li class="md-list-item">
wxs
</li>
<li class="md-list-item">
png
</li>
<li class="md-list-item">
jpg
</li>
<li class="md-list-item">
jpeg
</li>
<li class="md-list-item">
gif
</li>
<li class="md-list-item">
svg
</li>
<li class="md-list-item">
json
</li>
<li class="md-list-item">
cer
</li>
<li class="md-list-item">
mp3
</li>
<li class="md-list-item">
aac
</li>
<li class="md-list-item">
m4a
</li>
<li class="md-list-item">
mp4
</li>
<li class="md-list-item">
wav
</li>
<li class="md-list-item">
ogg
</li>
<li class="md-list-item">
silk
</li>
<li class="md-list-item">
wasm
</li>
<li class="md-list-item">
br
</li>
</ol>
<h3 class="md-end-block md-heading md-focus">小程序生命周期</h3>
<img src="https://img2020.cnblogs.com/blog/1186521/202110/1186521-20211015170500797-1803060638.png" alt="" loading="lazy">
App() 必须在 <code>app.js</code> 中调用，必须调用且只能调用一次。不然会出现无法预期的后果
<h3 class="md-end-block md-heading md-focus">页面路由</h3>
<img src="https://img2020.cnblogs.com/blog/1186521/202110/1186521-20211015170524754-1490945022.png" alt="" loading="lazy">
<ul class="ul-list" data-mark="-">
<li class="md-list-item md-focus-container">
<code>navigateTo</code>, <code>redirectTo</code> 只能打开非 tabBar 页面。
</li>
<li class="md-list-item">
<code>switchTab</code> 只能打开 tabBar 页面。
</li>
<li class="md-list-item">
<code>reLaunch</code> 可以打开任意页面。
</li>
<li class="md-list-item">
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
</li>
<li class="md-list-item md-focus-container">
调用页面路由带的参数可以在目标页面的<code>onLoad</code>中获取
</li>
</ul>
<h3 class="md-end-block md-heading">关于异步 API 返回 Promise</h3>
基础库 2.10.2 版本起，异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise，否则仍按回调方式执行，无返回值
<h3 class="md-end-block md-heading">ES6 转 ES5</h3>
在 0.10.101000 以及之后版本的开发工具中，会默认使用 <code>babel</code> 将开发者 <code>ES6</code> 语法代码转换为三端都能很好支持的 <code>ES5</code> 的代码，帮助开发者解决环境不同所带来的开发问题
<h3 class="md-end-block md-heading">小程序检测版本更新（启动时更新和未启动时更新）</h3>
未启动时更新
开发者在管理后台发布新版本的小程序之后，如果某个用户本地有小程序的历史版本，此时打开的可能还是旧版本。微信客户端会有若干个时机去检查本地缓存的小程序有没有更新版本，如果有则会静默更新到新版本。总的来说，开发者在后台发布新版本之后，无法立刻影响到所有现网用户，但最差情况下，也在发布之后 24 小时之内下发新版本信息到用户。用户下次打开时会先更新最新版本再打开
启动时更新
在app.js中载入
<div class="cnblogs_code">
<pre> onShow() {
//使用更新对象之前判断是否可用
if (wx.canIUse('getUpdateManager')) {
 const updateManager = wx.getUpdateManager()
 updateManager.onCheckForUpdate(function (res) {
 // 请求完新版本信息的回调
 console.log(res.hasUpdate) // res.hasUpdate返回boolean类型
 if (res.hasUpdate) {
 updateManager.onUpdateReady(function () {
 wx.showModal({
 title: '更新提示',
 content: '新版本已经准备好，是否重启当前应用？',
 success(res) {
 if (res.confirm) {
 // 新的版本已经下载好，调用applyUpdate应用新版本并重启
 updateManager.applyUpdate()
 }
 }
 })
 })
 // 新版本下载失败时执行
 updateManager.onUpdateFailed(function () {
 wx.showModal({
 title: '发现新版本',
 content: '请删除当前小程序，重新搜索打开...',
 })
 })
 }
 })
} else {
 //如果小程序需要在最新的微信版本体验，如下提示
 wx.showModal({
 title: '更新提示',
 content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
 })
}
},</pre>
</div>
封装一个方法也行onLaunch()钩子中调用
<div class="cnblogs_code">
<pre>checkUpdateVersion() {
//判断微信版本是否兼容小程序更新机制API的使用
if (wx.canIUse('getUpdateManager')) {
 //创建 UpdateManager 实例
 const updateManager = wx.getUpdateManager();
 console.log('是否进入模拟更新');
 //检测版本更新
 updateManager.onCheckForUpdate(function (res) {
 console.log('是否获取版本',res);
 // 请求完新版本信息的回调
 if (res.hasUpdate) {
 //监听小程序有版本更新事件
 updateManager.onUpdateReady(function () {
 //TODO 新的版本已经下载好，调用 applyUpdate 应用新版本并重启（此处进行了自动更新操作）
 updateManager.applyUpdate();
 })
 updateManager.onUpdateFailed(function () {
 // 新版本下载失败
 wx.showModal({
 title: '已经有新版本喽~',
 content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试！',
 })
 })
 }
 })
} else {
 //TODO 此时微信版本太低（一般而言版本都是支持的）
 wx.showModal({
 title: '更新提示',
 content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试！'
 })
}
},</pre>
</div>
<h3 class="md-end-block md-heading">低版本兼容处理</h3>
对于新增的 API，可以通过判断该API是否存在来判断是否支持用户使用的基础库版本
<div class="cnblogs_code">
<pre>if (wx.openBluetoothAdapter) {
wx.openBluetoothAdapter()
} else {
// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
wx.showModal({
title: '提示',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
})
}</pre>
</div>
对于 API 的参数或者返回值有新增的参数，可以判断用以下代码判断
<div class="cnblogs_code">
<pre>wx.showModal({
success: function(res) {
if (wx.canIUse('showModal.success.cancel')) {
 console.log(res.cancel)
}
}
})</pre>
</div>
组件兼容处理使用组件的地方判断是否可支持使用
<div class="cnblogs_code">
<pre>data: {
canIUse: wx.canIUse('cover-view')
}</pre>
</div>
设置最低基础库版本：登录小程序管理后台，进入「设置 - 基本设置 - 基础库最低版本设置」进行配置
<h3 class="md-end-block md-heading">小程序授权登录</h3>
<img src="https://img2020.cnblogs.com/blog/1186521/202110/1186521-20211015170806606-246908841.png" alt="" loading="lazy">
<ol class="ol-list" start="">
<li class="md-list-item md-focus-container">
调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
</li>
<li class="md-list-item">
调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、用户在微信开放平台帐号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台帐号）和 会话密钥 session_key
</li>
<li class="md-list-item md-focus-container">
临时登录凭证 code 只能使用一次
</li>
</ol>
<h3 class="md-end-block md-heading">配置流程</h3>
服务器域名请在「小程序后台-开发-开发设置-服务器域名」中进行配置，配置时需要注意：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
域名只支持 <code>https</code> (wx.request、wx.uploadFile、wx.downloadFile) 和 <code>wss</code> (wx.connectSocket) 协议；
</li>
<li class="md-list-item">
域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost；
</li>
<li class="md-list-item">
可以配置端口，如 https://myserver.com:8080，但是配置后只能向 https://myserver.com:8080 发起请求。如果向 https://myserver.com、https://myserver.com:9091 等 URL 请求则会失败。
</li>
<li class="md-list-item">
如果不配置端口。如 https://myserver.com，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 https://myserver.com:443 请求则会失败。
</li>
<li class="md-list-item">
域名必须经过 ICP 备案；
</li>
<li class="md-list-item">
出于安全考虑，<code>api.weixin.qq.com</code> 不能被配置为服务器域名，相关API也不能在小程序内调用。 开发者应将 AppSecret 保存到后台服务器中，通过服务器使用 <code>getAccessToken</code> 接口获取 <code>access_token</code>，并调用相关 API；
</li>
<li class="md-list-item">
不支持配置父域名，使用子域名
</li>
</ul>
<h3 class="md-end-block md-heading">开发者代码注入优化</h3>
自基础库版本 2.11.1 起，小程序支持懒注入，在 <code>app.json</code> 中配置
<div class="cnblogs_code">
<pre>{
"lazyCodeLoading": "requiredComponents"
}</pre>
</div>
添加这项配置后，未使用到的代码文件将不被执行
<h3 class="md-end-block md-heading">其他优化</h3>
提前首屏数据请求
<ol class="ol-list" start="">
<li class="md-list-item">
数据预拉取
</li>
<li class="md-list-item">
周期性更新
</li>
<li class="md-list-item">
骨架屏
</li>
<li class="md-list-item">
缓存请求数据
</li>
<li class="md-list-item">
精简首屏数据：推荐开发者延迟请求非关键渲染数据，与视图层渲染无关的数据尽量不要放在 data 中，加快页面渲染完成时间
</li>
<li class="md-list-item">
性能数据获取：小程序助手
</li>
<li class="md-list-item">
性能得分：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
首屏时间不超过 5 秒
</li>
<li class="md-list-item">
渲染时间不超过 500ms
</li>
<li class="md-list-item">
一个执行周期内脚本运行时间不超过 1 秒
</li>
<li class="md-list-item">
每秒调用<code>setData</code>的次数不超过 20 次
</li>
<li class="md-list-item">
<code>setData</code>的数据在<code>JSON.stringify</code>后不超过 256KB
</li>
<li class="md-list-item">
页面WXML节点少于 1000 个，节点树深度少于 30 层，子节点数不大于 60 个
</li>
<li class="md-list-item">
所有图片均开启 HTTP 缓存
</li>
<li class="md-list-item">
图片宽高乘积 <= 实际显示宽高乘积 * (设备像素比 ^ 2)
</li>
<li class="md-list-item">
所有网络请求都在 1 秒内返回结果
</li>
<li class="md-list-item">
通过<code>wx.request</code>发起的耗时超过 300ms 的请求并发数不超过 10 个
</li>
<li class="md-list-item">
同域名耗时超过 100ms 的图片请求并发数不超过 6 个
</li>
<li class="md-list-item">
3 分钟以内同一个url请求不出现两次回包大于 128KB 且一模一样的内容
</li>
</ul>
</li>
</ol>
<h1 class="md-end-block md-heading md-focus">小程序基础语法</h1>
数据绑定
<div class="cnblogs_code">
<pre><view> {{ message }} </view></pre>
</div>
<div class="cnblogs_code">
<pre><view id="item-{{id}}"> </view></pre>
</div>
<div class="cnblogs_code">
<pre><checkbox checked="{{false}}"> </checkbox></pre>
</div>
三元运算
<div class="cnblogs_code">
<pre><view hidden="{{flag ? true : false}}"> Hidden </view></pre>
</div>
算术运算
<div class="cnblogs_code">
<pre><view> {{a + b}} + {{c}} + d </view></pre>
</div>
遍历
<div class="cnblogs_code">
<pre><view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view></pre>
</div>
条件渲染(<code>wx:if</code> 有更高的切换消耗而 <code>hidden</code> 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 <code>hidden</code> 更好)
<div class="cnblogs_code">
<pre><view wx:if="{{condition}}"> </view></pre>
</div>
定义模板
使用 name 属性，作为模板的名字。然后在<code><template/></code>内定义代码片段
<div class="cnblogs_code">
<pre><template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template></pre>
</div>
使用模板：用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入；
<div class="cnblogs_code">
<pre><template is="msgItem" data="{{...item}}"/></pre>
</div>
引用：WXML 提供两种文件引用方式<code>import</code>和<code>include</code>
<div class="cnblogs_code">
<pre><import src="item.wxml"/></pre>
</div>
<div class="cnblogs_code">
<pre><include src="header.wxml"/></pre>
</div>
import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template
<code>include</code> 可以将目标文件除了 <code><template/></code> <code><wxs/></code> 外的整个代码引入，相当于是拷贝到 <code>include</code> 位置
<h3 class="md-end-block md-heading">tabbar的配置（小程序自带配置好页面和路径以及图标和选中图标即可生效)</h3>
<div class="cnblogs_code">
<pre>"tabBar": {
"color": "#6e6d6b",
"selectedColor": "#f9f027",
"borderStyle": "white",
"backgroundColor": "#000",
"list": [
 {
 "pagePath": "pages/index/index",
 "iconPath": "images/tabbar-01.png",
 "selectedIconPath": "images/tabbar-01-active.png",
 "text": "首页"
 },
 {
 "pagePath": "pages/sort/index",
 "iconPath": "images/tabbar-02.png",
 "selectedIconPath": "images/tabbar-02-active.png",
 "text": "分类"
 },
 {
 "pagePath": "pages/cart/index",
 "iconPath": "images/tabbar-03.png",
 "selectedIconPath": "images/tabbar-03-active.png",
 "text": "购物车"
 },
 {
 "pagePath": "pages/my/index",
 "iconPath": "images/tabbar-04.png",
 "selectedIconPath": "images/tabbar-04-active.png",
 "text": "我的"
 }
]
},</pre>
</div>
<h3 class="md-end-block md-heading">常用API </h3>
一般建议该用同步的时候就要用同步，同步解决不了的问题再用异步
wx.canIUse(string schema)
判断小程序的API，回调，参数，组件等是否在当前版本可用
<div class="cnblogs_code">
<pre>wx.getSystemInfo()系统信息(同步版本)
wx.getSystemInfoAsync()系统信息(异步版本)
wx.getSystemInfo() 获取系统信息[一般用这个就好]</pre>
</div>
<div class="cnblogs_code">
<pre>try {
const res = wx.getSystemInfoSync()
console.log(res)
} catch (e) {
// Do something when catch error
}</pre>
</div>
<div class="cnblogs_code">
<pre>wx.getSystemInfo({
success (res) {
 console.log(res)
}
})</pre>
</div>
wx.updateWeChatApp(Object object)
更新客户端版本。当判断用户小程序所在客户端版本过低时，可使用该接口跳转到更新微信页面
<div class="cnblogs_code">
<pre>wx.updateWeChatApp({
success(res){
 console.log(res,'res')
}
})</pre>
</div>
wx.getUpdateManager()
获取全局唯一的版本更新管理器，用于管理小程序更新（相关代码前面小程序检测版本更新章节有参考）
关于小程序页面跳转
<div class="cnblogs_code">
<pre>wx.switchTab()
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch()
关闭所有页面，打开到应用内的某个页面
wx.redirectTo()
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.navigateTo()
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
wx.navigateBack()
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层</pre>
</div>
<div class="cnblogs_code">
<pre>wx.switchTab({
url: '/index'
})

wx.reLaunch({
url: 'test?id=1'
})
// 页面内获取参数
Page({
onLoad (option) {
console.log(option.query)
}
})
wx.redirectTo({
url: 'test?id=1'
})
wx.navigateTo({
url: 'test?id=1'
})
wx.navigateBack({
delta: 2
})</pre>
</div>
wx.showLoading(Object object)
wx.showToast(Object object)
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
wx.showLoading 和 wx.showToast 同时只能显示一个
</li>
<li class="md-list-item md-focus-container">
wx.showToast 应与 wx.hideToast 配对使用
</li>
</ul>
<div class="cnblogs_code">
<pre>wx.showToast({
title: '操作成功',
icon: 'loading', // success（成功） | error（失败） | loading（加载中..） | none(无图标)
duration: 2000,
})</pre>
</div>
wx.showModal(Object object) 显示模态对话框
<div class="cnblogs_code">
<pre>wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success (res) {
 if (res.confirm) {
 console.log('用户点击确定')
 } else if (res.cancel) {
 console.log('用户点击取消')
 }
}
})</pre>
</div>
wx.setNavigationBarTitle() 动态设置当前页面的标题
<div class="cnblogs_code">
<pre>wx.setNavigationBarTitle({
title:'自定义标题覆盖当前设置的'
})</pre>
</div>
wx.setNavigationBarColor() 设置页面导航条颜色背景字体样式对应api也可设置
<div class="cnblogs_code">
<pre>wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ff0000',
animation: {
 duration: 400,
 timingFunc: 'easeIn'
}
})</pre>
</div>
wx.hideHomeButton() 隐藏返回首页按钮
微信7.0.7版本起，当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。
wx.showTabBar() 显示 tabBar
wx.hideTabBar() 隐藏 tabBar
wx.pageScrollTo(Object object)
将页面滚动到目标位置，支持选择器和滚动距离两种方式定位
<div class="cnblogs_code">
<pre>wx.pageScrollTo({
scrollTop: 0,
duration: 300
})</pre>
</div>
wx.request(Object object) 网络请求（ajax）
<div class="cnblogs_code">
<pre>wx.request({
url: '/api/login', //仅为示例，并非真实的接口地址
data: {
parmas1: '',
parmas2: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})</pre>
</div>
wx.uploadFile() 上传文件
<div class="cnblogs_code">
<pre>wx.chooseImage({
success (res) {
const tempFilePaths = res.tempFilePaths
wx.uploadFile({
 url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
 filePath: tempFilePaths,
 name: 'file',
 formData: {
 'user': 'test'
 },
 success (res){
 const data = res.data
 //do something
 }
})
}
})</pre>
</div>
wx.downloadFile() 下载文件
<div class="cnblogs_code">
<pre>wx.downloadFile({
url: 'https://example.com/audio/123', //仅为示例，并非真实的资源
success (res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
 wx.playVoice({
 filePath: res.tempFilePath
 })
}
}
})</pre>
</div>
小程序数据缓存
<div class="cnblogs_code">
<pre>wx.setStorageSync() 将数据存储在本地缓存中指定的key中(同步)
wx.setStorage()从本地缓存中移除指定 key(异步)
wx.removeStorageSync() 从本地缓存中移除指定 key[同步]
wx.removeStorage() 从本地缓存中移除指定 key[异步]
wx.getStorageSync() 从本地缓存中获取指定 key[同步]
wx.getStorage() 从本地缓存中获取指定 key[异步]
wx.clearStorageSync() 清除缓存所有key[同步]
wx.clearStorage() 清除缓存所有key[异步]
wx.getStorageInfoSync() 从本地缓存中获取所有 key(同步)
wx.getStorageInfo() 从本地缓存中获取所有key(异步)
最后面两个几乎用不上</pre>
</div>
<div class="cnblogs_code">
<pre>// 设置
try {
wx.setStorageSync('key', 'value')
} catch (e) { }
// 移除
try {
wx.removeStorageSync('key')
} catch (e) {
// Do something when catch error
}
// 获取
try {
var value = wx.getStorageSync('key')
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}
// 清除
try {
wx.clearStorageSync()
} catch(e) {
// Do something when catch error
}</pre>
</div>
wx.getLocation() 获取当前的地理位置、速度。 开启高精度定位，接口耗时会增加，可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02。高频率调用会导致耗电，如有需要可使用持续定位接口 wx.onLocationChange()
使用：在app.json文件中配置
<div class="cnblogs_code">
<pre>"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}</pre>
</div>
<div class="cnblogs_code">
<pre>wx.getLocation({
type: 'wgs84',
success (res) {
 console.log(res,'res')
}
})</pre>
</div>
<div class="cnblogs_code">
<pre>wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
 success (res) {
const latitude = res.latitude
const longitude = res.longitude
// 使用微信内置地图查看位置
 wx.openLocation({
latitude,
longitude,
scale: 18 // 5 - 18 级缩放比例
 })
}
})</pre>
</div>
wx.chooseLocation() 打开地图选择位置
wx.showShareMenu() 显示当前页面的转发按钮参数
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
"shareAppMessage"表示“发送给朋友”按钮，"shareTimeline"表示“分享到朋友圈”按钮
</li>
<li class="md-list-item md-focus-container">
显示“分享到朋友圈”按钮时必须同时显示“发送给朋友”按钮，显示“发送给朋友”按钮时则允许不显示“分享到朋友圈”按钮
</li>
</ul>
<div class="cnblogs_code">
<pre>wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
})</pre>
</div>
<div class="cnblogs_code">
<pre>// 隐藏当前页面的转发按钮
wx.hideShareMenu({
menus: ['shareAppMessage', 'shareTimeline']
})</pre>
</div>
wx.showShareImageMenu() 打开分享图片弹窗
<div class="cnblogs_code">
<pre>wx.showShareImageMenu({
path: '../../images/tabbar-01-active.png',
})</pre>
</div>
wx.shareVideoMessage() 转发视频到聊天(功能类似分享图片)
wx.shareFileMessage() 转发文件到聊天(功能类似分享图片)
wx.scanCode() 调起客户端扫码界面进行扫码
<div class="cnblogs_code">
<pre>// 允许从相机和相册扫码
wx.scanCode({
success (res) {
 console.log(res)
}
})</pre>
</div>
wx.authorize() 授权 
调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。
小程序插件可以使用 wx.authorizeForMiniProgram
<div class="cnblogs_code">
<pre>// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
wx.getSetting({
success(res) {
if (!res.authSetting['scope.record']) {
 wx.authorize({
 scope: 'scope.record',
 success () {
 // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
 wx.startRecord()
 }
 })
}
}
})</pre>
</div>
授权列表
<img src="https://img2020.cnblogs.com/blog/1186521/202110/1186521-20211015171837912-1477402460.png" alt="" loading="lazy">
授权有效期
一旦用户明确同意或拒绝过授权，其授权关系会记录在后台，直到用户主动删除小程序。
最佳实践
在真正需要使用授权接口时，才向用户发起授权申请，并在授权申请中说明清楚要使用该功能的理由。
注意事项
<ol class="ol-list" start="">
<li class="md-list-item">
<code>wx.authorize({scope: "scope.userInfo"})</code>，不会弹出授权窗口，请使用 <button open-type="getUserInfo"/> [``](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)
</li>
<li class="md-list-item">
需要授权 <code>scope.userLocation</code> <code>scope.userLocationBackground</code> 时必须配置地理位置用途说明
</li>
</ol>
wx.navigateToMiniProgram() 打开另一个小程序
wx.navigateBackMiniProgram() 返回到上一个小程序
只有在当前小程序是被其他小程序打开时可以调用成功
注意：微信客户端 iOS 6.5.9，Android 6.5.10 及以上版本支持
wx.getUserProfile() 获取用户信息
页面产生点击事件（例如 <code>button</code> 上 <code>bindtap</code> 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 <code>userInfo</code>。该接口用于替换 <code>wx.getUserInfo</code>
优化改进规则：https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801?highLine=login
<div class="cnblogs_code">
<pre><block wx:elif="{{!hasUserInfo}}">
 <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
 <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
 <view wx:else> 请使用1.4.4及以上版本基础库 </view>
</block>
<block wx:else>
 <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
 <text class="userinfo-nickname"> {{userInfo.nickName}}</text>
</block></pre>
</div>
<div class="cnblogs_code">
<pre> getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
 wx.getUserProfile({
 desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
 success: (res) => {
 console.log(res)
 this.setData({
 userInfo: res.userInfo,
 hasUserInfo: true
 })
 }
})
},

getUserInfo(e) {
// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
 console.log(e)
this.setData({
 userInfo: e.detail.userInfo,
 hasUserInfo: true
})
}</pre>
</div>
wx.login() 调用接口获取登录凭证（code）
通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台帐号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台帐号）及本次登录的会话密钥（session_key）等
<div class="cnblogs_code">
<pre>// 登录
wx.login({
success: res => {
 console.log(res,'login信息')
 // 发送 res.code 到后台换取 openId,sessionKey, unionId
 }
})</pre>
</div>
wx.checkSession() 检查登录态是否过期
通过 wx.login 接口获得的用户登录态拥有一定的时效性。用户越久未使用小程序，用户登录态越有可能失效。反之如果用户一直在使用小程序，则用户登录态一直保持有效。具体时效逻辑由微信维护，对开发者透明。开发者只需要调用 wx.checkSession 接口检测当前用户登录态是否有效。
登录态过期后开发者可以再调用 wx.login 获取新的用户登录态。调用成功说明当前 session_key 未过期，调用失败说明 session_key 已过期。
<div class="cnblogs_code">
<pre>wx.checkSession({
success () {
//session_key 未过期，并且在本生命周期一直有效
},
fail () {
// session_key 已经失效，需要重新执行登录流程
wx.login() //重新登录
}
})</pre>
</div>
如果你只是用wx.login实现用户快速登陆账号，那么不需要使用checkSession。
除非服务端与小程序API交互需要用session_key时候(例如获取用户绑定的手机号)，不过期无所谓，过期了就重新wx.login，给后台换新的session_key
wx.checkSession几乎没有必要调用，而且他本身耗时，长达300+ms
以上API是较为常用的在实际项目开发中梳理了一遍；其他API遵照官方文档即可；
<h1 class="md-end-block md-heading">公众号关联小程序</h1>
关联规则：
<ol class="ol-list" start="">
<li class="md-list-item">
所有公众号都可以关联小程序。
</li>
<li class="md-list-item">
公众号可关联10个同主体，3个非同主体小程序。公众号一个月可新增关联小程序13次。
</li>
<li class="md-list-item">
小程序可设置无需关联确认。设置后，公众号关联小程序不需要小程序确认，单方操作即可关联成功。
</li>
<li class="md-list-item">
小程序可设置需关联确认。设置后，公众号关联小程序需小程序管理员确认后才能关联成功。
</li>
<li class="md-list-item">
小程序可设置不允许被关联。设置后，公众号无法关联此小程序。
</li>
</ol>
关联流程：
登录公众号后台-小程序-小程序管理-添加-关联小程序
 "style": "v2" wx7f576b5fa5065792
<h1 class="md-end-block md-heading">结语</h1>
以上就是小程序开发流程规范以及常用的API使用和注意的点，具体和齐全api参照官方文档！以上内容自己总结，未经允许，请勿随意转载~谢谢合作！

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：鱼樱前端，转载请注明原文链接：https://www.cnblogs.com/lhl66/p/15411951.html 
来源：https://www.cnblogs.com/lhl66/p/15411951.html

頁: [1]

琼殿技术论坛's Archiver

小程序开发流程