小程序个人总结最佳实践

作者: 李诚_0356 | 来源:发表于2018-11-19 13:48 被阅读108次

一、开发环境

1.成为微信公众平台开发者

成为微信公众平台的开发者，是小程序开发的首要条件。只有成为微信公众平台的开发者，才可以使用公众平台的各种开发接口。如果你已经是开发者，则可以跳过本章。

(1) 进入微信公众平台官网（mp.weixin.qq.com）点击右上角的“立即注册”按钮
（2）选择“小程序”。
（3）请填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱。
（4）登录邮箱，查收激活邮件，点击激活链接。
（5）选择主体类型选择，完善主体信息和管理员信息。
（6）完成注册后，在微信公众平台官网首页（mp.weixin.qq.com）的登录入口直接登录。
（7）选择通过微信认证验证主体身份的用户，需先完成微信认证后，才可以补充小程序名称信息，上传小程序头像，填写小程序介绍并选择服务范围。
（8）登录微信公众平台小程序，进入用户身份- 开发者，新增绑定开发者。

个人主体小程序最多可绑定5个开发者，10个体验者。
未认证的组织类型小程序最多可绑定10个开发者，20个体验者。
已认证的小程序最多可绑定20个开发者，40个体验者。

image

2.获取AppID

进入“设置-开发设置”，获取AppID信息。

image

3.下载并安装开发者工具

登录微信小程序官网下载对应的版本：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

4.登录

开发者工具使用管理员或者绑定的开发者微信号扫码登录。

二、技术选型

目前主流3种开发方式：wepy 、mpvue 、小程序原生开发

开发文档以及介绍：

原生开发小程序文档：点此进入
wepy 开发文档：点此进入
mpvue 开发文档：点此进入

三者的简单对比

image

个人选择mpvue作为开发方式

原因：原生小程序开发ide太难用；wepy相对于vue开发还有很多不一样的地方；mpvue最吸引人的地方是代码的移植性，一套代码写的好就可以在h5项目和小程序中通用，并且潜力很大。

mpvue主要特性

彻底的组件化开发能力：提高代码
完整的 Vue.js 开发体验
方便的数据管理方案：方便构建复杂应用
快捷的webpack 构建机制：自定义构建策略、开发阶段 hotReload
支持使用 npm 外部依赖
使用 Vue.js命令行工具 vue-cli 快速初始化项目
H5 代码转换编译成小程序目标代码的能力

三、小程序运营功能

1.API实现相关:

onShareAppMessage

小程序如果想对外分享，必须在page里面定义onShareAppMessage函数，来配置页面分享转发相关的信息。
只有定义了此事件处理函数，右上角菜单才会显示 “转发” 按钮
用户点击转发按钮的时候会调用
此事件需要 return 一个 Object，用于自定义转发内容
一个页面可能会有多个分享，可以由插入的参数options来判断具体是由哪个位置进行分享，从而做不同的逻辑判断。
return对象的返回函数：

image
如果定义了该事件，又不想通过页面menu转发，可以通过hideShareMenu来隐藏掉
注意事项：
转发后不添加imageUrl的话，将截图作为转发的默认图片。
from 字段可以通过在转发成功后调取的 success、complete 来进行对 menu 和 button 的不同操作
如果有携带 shareTicket 值，会在 success 回调产生，返回结果在 shareTickets 字段中，是一个数组，可以做一定处理

wx.showShareMenu

一般是用来配置相关的参数，常见的如withShareTicket，用它来获取群信息，群的相关标示。

wx.showShareMenu({  withShareTicket: true})

wx.hideShareMenu

隐藏menu级别的转发功能，但是button中还存在着转发。

如果先设置 showShareMenu ，并且配置了 withShareTicket，再用 hideShareMenu 方法，通过按钮转发，照样能获取 shareTicket，如下：

wx.showShareMenu({  withShareTicket: true})wx.hideShareMenu({})

wx.updateShareMenu

更新shareMenu信息需要用update操作哦，这里需要注意下，一般都是会更新withShareTicket属性。

wx.getShareInfo

在拿到了shareTicket信息后，可以由此API获取转发详细信息

wx.getShareInfo({    shareTicket: res.shareTickets[0],    success: ...    fail: ...})

button转发

页面内需要转发时，需要给button组件设置open-type="share"，并在触发的地方判断来源。

获取分享链接流程

在小程序中，获取openGId主要有两种途径，也一般围绕着两种途径做分享相关的开发：

当用户打开withShareTicket的卡片时，可以在onLauch或者getShareInfo中获取加密信息，并且传给服务端获得openGId。
当用户分享成功后，会在回调里收到一个shareTicket，然后通过getShareInfo来获得加密信息，获得openGId。

2.小程序分享个人：

实现路径清晰，获取openGId需要服务端支持。

小程序测试版不能分享
小程序账号必须和app微信分享账号绑定

3.小程序分享朋友圈：

小程序无法直接分享到朋友圈，是没有api接口的！！！

间接的方法是分享二维码到朋友圈

通过微信api申请小程序二维码
获取小程序二维码接口文档
下载二维码到服务器并返回url
小程序接收url并从服务器下载图片

wx.downloadFile
小程序将下载好的图片保存至用户相册

wx.saveImageToPhotosAlbum

4.app 分享小程序：

实现路径清晰
《微信官方文档》

5.app和小程序互相跳转：

1、App主动发起小程序卡片分享到微信，微信点击打开小程序，这时的小程序可以打开App
2、App主动发起打开小程序，这时的小程序可以打开App
App主动打开小程序（微信官网）：
小程序返回App（微信官网）

6.公众号和小程序互相跳转：

可以跳转，但是必须把公众号和小程序关联

可关联已有的小程序或快速创建小程序。已关联的小程序可被使用在自定义菜单和模版消息等场景中。
公众号可关联同主体的10个小程序及不同主体的3个小程序。同一个小程序可关联最多50个公众号。
公众号跳小程序：比如说 “丰巢快递柜” 公众号关联的小程序：丰巢寄快递。
小程序跳公众号：打开“丰巢寄快递”，点击右上角的菜单选项，然后点击”关于丰巢寄快递“，就可以看见关联的公众号了。

7.h5和小程序互相跳转：

可以相互跳转。

小程序跳H5

image

web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。但个人类型与海外类型的小程序暂不支持使用。

注：基础库 1.6.4 开始支持，低版本需做兼容处理。

H5跳小程序
image
只要引入路径为https://res.wx.qq.com/open/js/jweixin-1.3.0.js的js文件，然后在执行以下代码就可以了。

wx.miniProgram.navigateTo({url: '/path/to/page'})

8.小程序和小程序互相跳转：

可以相互跳转。

image

低版本需要做兼容处理。
相互跳转的小程序必须是同一公众号下关联的。

9.小程序获取用户隐私信息（手机号等）：

可以获取

1.getPhoneNumber这个组件通过button来实现（别的标签无效）。将button中的open-type=“getPhoneNumber”,并且绑定bindgetphonenumber事件获取回调。

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

2.在使用这个组件之前必须先调用login接口，如果没有调用login点击button时会提示先调用login。

App({
    onLaunch: function () {
        wx.login({
            success: function (res) {
                if (res.code) {
                    //发起网络请求
                    console.log(res.code)
                } else {
                    console.log('获取用户登录态失败！' + res.errMsg)
                }
            }
        });
    }
})

3.通过bindgetphonenumber绑定的事件来获取回调。
回调的参数有三个，
errMsg：用户点击取消或授权的信息回调。
iv：加密算法的初始向量（如果用户没有同意授权则为undefined）。
encryptedData：用户信息的加密数据（如果用户没有同意授权同样返回undefined）

image

getPhoneNumber: function(e) { 
    console.log(e.detail.errMsg) 
    console.log(e.detail.iv) 
    console.log(e.detail.encryptedData) 
    if (e.detail.errMsg == 'getPhoneNumber:fail user deny'){
      wx.showModal({
          title: '提示',
          showCancel: false,
          content: '未授权',
          success: function (res) { }
      })
    } else {
      wx.showModal({
          title: '提示',
          showCancel: false,
          content: '同意授权',
          success: function (res) { }
      })
    }
  }

4.最后我们需要根据自己的业务逻辑来进行处理
如果用户不同意授权的话可能我们会有一个让他手动输入的界面，如果不是强制获取手机号的话可以直接跳转页面进行下一步。（用户不同意授权errMsg返回‘getPhoneNumber:fail user deny’）
5.用户同意授权
我们可以根据login时获取到的code来通过后台以及微信处理拿到session_key，最后通过app_id，session_key,iv,encryptedData（用户同意授权errMsg返回‘getPhoneNumber:ok’）
6.解密
解密的方法可以去微信官方开发文档查看，有很详细说明。
加密数据解密算法（官方文档）

10.小程序获取微信id

可以获取，单必须由服务端去做

在18年4月25日小程序做了一次更新,小程序授权不再支持直接弹框获取用户信息授权了

image
小程序调用wx.login() 获取临时登录凭证code ，并回传到开发者服务器。
开发者服务器以code换取用户唯一标识openid 和会话密钥session_key。
之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

11.小程序向公众号导流

在小程序中，可以利用一些引导性文案指引用户点击进入客服会话页面，然后客服自动回复一条公众号图文消息，而图文消息则有引导关注公众号获取更多服务的指引文案。（经典用法，但是小心被封）

image

12.小程序和微信卡劵能力结合

比较小众的玩法：用户可以从小程序中快速领取会员卡和优惠券，也可以从卡包中的会员卡直达小程序。

增加接入途径：从卡包直接进入（发卡需要注册并认证）

image

四、小程序审核上架

小程序的审核风格跟苹果的APP STORE风格很像，一样是邮件沟通，一样的审核严格，一样会有一些让人哭笑不得的拒绝理由。
类目不完善或者是类目选择不当
这是目前最容易出现的坑。小程序服务类目所对应的页面中的核心内容必须与该类目一致，并且跳转不要超过2次。
例如，不能选择的类目是工具类，小程序里却搞起了电商。千万不能搞一些挂羊头卖狗肉的小程序，这是肯定要禁止的。
审核前一定要仔细看区分，可以了解下竞品发的是什么类目。
下面这张类目表可以收藏一下，标红的部分代表要相关证照才能通的类别。

image.jpg
“功能不完善/功能不完整”
这个有时候是审核人员不会用，误以为你的小程序没开发完整，如果你确定没问题的话可以多提交一次试试。
产品的某个功能有bug
小程序简介没有介绍小程序功能
很多人刚开始开发的时候，随便填写了一下简介，开发结束后忘记补充完整就直接提交了。将简介补充完整，重新上传就可以了。
这种低级失误还是少犯才好，来回折腾很浪费时间的。
含有声音视频类目，请补充对应类目
音频和视频文件不好管理，容易出现风险，所以微信官方审核特别严格。一定要慎之又慎！

小程序个人总结最佳实践

一、开发环境

1.成为微信公众平台开发者

2.获取AppID

3.下载并安装开发者工具

4.登录

二、技术选型

开发文档以及介绍：

三者的简单对比

个人选择mpvue作为开发方式

mpvue主要特性

三、小程序运营功能

1.API实现相关:

onShareAppMessage

wx.showShareMenu

wx.hideShareMenu

wx.updateShareMenu

wx.getShareInfo

button转发

获取分享链接流程

2.小程序分享个人：

3.小程序分享朋友圈：

4.app 分享小程序：

5.app和小程序互相跳转：

6.公众号和小程序互相跳转：

7.h5和小程序互相跳转：

8.小程序和小程序互相跳转：

9.小程序获取用户隐私信息（手机号等）：

10.小程序获取微信id

11.小程序向公众号导流

12.小程序和微信卡劵能力结合

四、小程序审核上架

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

小程序个人总结最佳实践

一、开发环境

1.成为微信公众平台开发者

2.获取AppID

3.下载并安装开发者工具

4.登录

二、技术选型

开发文档以及介绍：

三者的简单对比

个人选择mpvue作为开发方式

mpvue主要特性

三、小程序运营功能

1.API实现相关:

onShareAppMessage

wx.showShareMenu

wx.hideShareMenu

wx.updateShareMenu

wx.getShareInfo

button转发

获取分享链接流程

2.小程序 分享 个人：

3.小程序 分享 朋友圈：

4.app 分享 小程序：

5.app和小程序互相跳转：

6.公众号和小程序互相跳转：

7.h5和小程序互相跳转：

8.小程序和小程序互相跳转：

9.小程序 获取用户隐私信息（手机号等）：

10.小程序 获取微信id

11.小程序向公众号导流

12.小程序和微信卡劵能力结合

四、小程序审核上架

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

2.小程序分享个人：

3.小程序分享朋友圈：

4.app 分享小程序：

9.小程序获取用户隐私信息（手机号等）：

10.小程序获取微信id