微信小程序开发
发布于 1 个月前 作者 kalengo 581 次浏览 来自 分享

前言

程序小哥参与的原生小程序,目前累计用户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个工作日左右,日后的升级版本审核就很快了,基本上可以做到半天就审核通过。
回到顶部