一、开发环境
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 、小程序原生开发
开发文档以及介绍：
三者的简单对比
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: ...})
相关回调的参数
{ 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主要有两种途径，也一般围绕着两种途径做分享相关的开发：
-
当用户打开withShareTicket的卡片时，可以在onLauch或者getShareInfo中获取加密信息，并且传给服务端获得openGId。
-
当用户分享成功后，会在回调里收到一个shareTicket，然后通过getShareInfo来获得加密信息，获得openGId。
2.小程序 分享 个人：
实现路径清晰，获取openGId需要服务端支持。
- 小程序测试版不能分享
- 小程序账号必须和app微信分享账号绑定
3.小程序 分享 朋友圈：
小程序无法直接分享到朋友圈，是没有api接口的！！！
间接的方法是分享二维码到朋友圈
-
通过微信api申请小程序二维码
获取小程序二维码接口文档 -
下载二维码到服务器并返回url
-
小程序接收url并从服务器下载图片
-
小程序将下载好的图片保存至用户相册
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
-
小程序简介没有介绍小程序功能
很多人刚开始开发的时候，随便填写了一下简介，开发结束后忘记补充完整就直接提交了。将简介补充完整，重新上传就可以了。
这种低级失误还是少犯才好，来回折腾很浪费时间的。 -
含有声音视频类目，请补充对应类目
音频和视频文件不好管理，容易出现风险，所以微信官方审核特别严格。一定要慎之又慎！
网友评论