V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
kaolalicai
V2EX  ›  微信

微信小程序开发及上线

  •  
  •   kaolalicai · 2019-08-18 20:43:18 +08:00 · 3087 次点击
    这是一个创建于 1685 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    程序小哥参与的原生小程序,目前累计用户 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 个工作日左右,日后的升级版本审核就很快了,基本上可以做到半天就审核通过。
    5 条回复    2019-08-19 15:47:46 +08:00
    xingso
        1
    xingso  
       2019-08-18 21:08:41 +08:00
    老哥,个人发布小程序需要上传软著么?
    GeekCourse
        2
    GeekCourse  
       2019-08-18 21:13:39 +08:00   ❤️ 1
    @xingso 小游戏需要,小程序不需要
    pycoder233
        3
    pycoder233  
       2019-08-18 21:16:21 +08:00
    小程序如何推广呢?每天 150 个搜索来的新用户,200 个老用户,一天一共 350 的用户访问,流量主收益 25 块钱左右,但是没有推广渠道,小程序也没有做分享功能,想做一个分享后查看内容,但是可能违反小程序运营条例于是就没做,现在每天的流量全靠搜索,搜索流量也稳定,每天 100 个左右,流量主收益也每天稳定在 25 块钱左右,现在就是想把流量主收益全部拿去推广,也没好的渠道,微信的广告主可靠吗?别把钱投进去了人影都见不到
    xingso
        4
    xingso  
       2019-08-18 21:19:18 +08:00
    @GeekCourse 好的。谢谢老哥
    kakudesu
        5
    kakudesu  
       2019-08-19 15:47:46 +08:00
    用户授权过,没打开小程序的情况下能推送消息给用户吗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2599 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 15:37 · PVG 23:37 · LAX 08:37 · JFK 11:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.