小程序个人总结最佳实践

2018-11-19  本文已影响108人  李诚_0356

一、开发环境

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

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

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

image
2.获取AppID

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


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

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

4.登录

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

二、技术选型

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

开发文档以及介绍：
三者的简单对比
image
个人选择mpvue作为开发方式

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

mpvue主要特性

三、小程序运营功能

1.API实现相关:
onShareAppMessage
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: ...})

相关回调的参数

{    errMsg: "getShareInfo:ok",     iv: "gRHeFU+Nhr36RmladCXnRQ==",     encryptedData: "IQ/RwZLeQFUGuxv0bBfOrL/KLnXO+bxcyCBru5lB92FkHIg8ae…7TnHwU+rqgerFKvpvS5JbFyh+9liUqyb2bk6/LETYQ+h/FQ=="}

由iv和encryptedData进行解密，可以拿到openGId的值。为当前群对当前小程序的唯一值。额外还可以拿到群名称等更多的开放数据。

button转发

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

获取分享链接流程

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

2.小程序 分享 个人：

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

3.小程序 分享 朋友圈：

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

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

  1. 通过微信api申请小程序二维码
    获取小程序二维码接口文档

  2. 下载二维码到服务器并返回url

  3. 小程序接收url并从服务器下载图片

    wx.downloadFile

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

    wx.saveImageToPhotosAlbum

4.app 分享 小程序：

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

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

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

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

可以相互跳转。

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

wx.miniProgram.navigateTo({url: '/path/to/page'})
8.小程序和小程序互相跳转：

可以相互跳转。


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

可以获取

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

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

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) { }
      })
    }
  }
10.小程序 获取微信id

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

11.小程序向公众号导流

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


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

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

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


image

四、小程序审核上架

上一篇下一篇

猜你喜欢

热点阅读