微信小程序开发及上线

前言

程序小哥参与的原生程序，目前累计用户 240W，在这里整理了一下期间遇到的坑，也给其他朋友一些经验。

一、注册开发者帐号

微信公众平台前往进行注册，生成 appid 和 app secrect, appid 在登录微信开发者工具时需要。

注意：

• 小程序设置的修改都是有限制次数的，请谨慎修改。
• 服务器域名的配置 request 合法域名：配置后端接口的域名；
  socket 合法域名：
  uploadFile 合法域名：配置上传文件的域名，例如：七牛等；
  downloadFile 合法域名：下载文件的域名，例如：七牛，如下载微信头像，请配置http://www.qlogo.org/

二、开发

（一）目录结构

• pages
  • home
    • index.js Page({}) 注册页面 Page，页面的生命周期
    • index.json 页面配置文件
    • index.wxml 类似 html
    • index.wxss 样式文件
• styles 公用样式文件
• components
  • 公用组件 index.js index.json index.wxml index.wxss
• app.js App({}) 小程序启动文件，启动的生命周期
• app.json 小程序配置文件，pages: [ ‘’, ‘’] , window 配置 等, app.json 里配置的页面路径，需与 pages 文件夹内的页面文件一致
• app.wxss 小程序的样式文件
• project.config.json 小程序名称，appid 以及项目所需要的相关配置

三、微信开发中的登录机制

直接查看微信文档

（一）注意

• 获取用户信息，需要用户点击 Button （ open-type="getUserInfo"）来授权获取，之后可使用 wx.getUserInfo 获取；
• 获取 openid, wx.login 获取 Code, 然后在服务器后台调用 code2Session，使用 code 换取 openid 和 session_key 等信息；
• 获取 unionid （用于矩阵小程序）用户授权后，传入 rawUserInfo 和 session_key 服务端解密上报获取；
• 会出现解密失败的可能性很高，目前的做法是，失败重试。

1. 保证 wx.login 的 code 在 wx.getUserInfo 之前返回；
2. 解密失败，重新 wx.login 然后再请求一次。

四、微信分享

• 页面配置分享，必须有 onShareAppMessage()，页面才会有分享

onShareAppMessage() { return { title, summary, imageUrl, path, success } } 

• 按钮分享给好友 <button open-type="share">分享</button>
• 分享海报
  点击按钮生成 canvas，然后保存到手机相册

wx.saveImageToPhotosAlbum({ filePath, success: s => { wx.showToast({ title: '已保存图片', icon: 'success' }) }, fail: f => { console.log('f', f) } }) 

• 群分享 在分享时页面加入配置

   onLoad(e) { wx.showShareMenu({ withShareTicket: true }) } 

在打开分享页面的用户，通过启动小程序的场景 scene 值为 1044
打开页面，会在页面加载带上 shareTicket 参数。
注意：由于小程序生命周期的关系，根据业务不同情况来判断场景值。

 App({ // 每次进入就触发 onShow(e) { // 分享群的场景标识 if (e.scene === 1044 && e.shareTicket) { this.globalData.shareTicket = e.shareTicket } // 分享个人的场景标识 if (e.scene === 1007) { this.globalData.shareTicket = '' } } }) 

在通过 wx.getShareInfo(Object object)方法, 后端解密，返回一个 openGId

 export function fetchGroupId(shareTicket) { let { appName } = getApp().globalData return new Promise((resolve, reject) => { wx.getShareInfo({ shareTicket, complete(shareKey) { const data = { sessionKey: getApp().globalData.sessionKey } delete shareKey.errMsg Object.assign(data, shareKey) request({ url, method: 'POST', data }).then(r => { if (r.code) { // 解密失败重新登录重新解密 login(appName).then(() => { fetchGroupId(shareTicket).then(openGId => resolve(openGId)) }) } else { resolve(r.data.openGId) } }) } }) }) } 

通过微信控件显示群名

<open-data type="groupName" open-gid="{{ groupId }}" /> 

五、上线小程序

（一）发布体验版

1. 在微信开发者工具，工具栏上点击上传按钮即可发布到微信服务器，提交后就可以在微信开发管理端查看到新的开发版本，可以发布二维码白名单用户扫码后进行体验。
2. 测试环境的接口与 request 合法域名不一致时，可在手机端调试即可访问。
3. 测试完成没问题，提交审核。记得检查审核版本的 request 域名是否正确。
4. 审核成功后，提交发布。第一次发布审核时间会比较长，大约 3 － 5 个工作日左右，日后的升级版本审核就很快了，基本上可以做到半天就审核通过。