记录微信小程序的坑
----------------更新--------------
2018年10月10日官网3个接口废弃的通知：
一、分享监听接口
分享消息给好友时，开发者将没法从callback获知用户是否分享完成，也没法在分享后当即得到群ID。请参考调整指引html
二、getUserInfo接口
用户须要点击组件后，才能够触发登陆受权弹窗、受权本身的昵称头像等数据。请参考调整指引前端
三、openSetting接口
用户须要点击行为后，才能够跳转打开设置页，管理受权信息。请参考调整指引node
1.不一样版本号是否可使用某方法/属性
官方文档上提到了几种检测方法，可是测试后发现有些没有用：
1）wx.canIUse()对一些api没有用
2）if (wx.apiXX) { wx.apiXX(); }也不彻底有用
因此，最后经过直接比较当前版本号和目标版本号来实现兼容。json
/**
* 比较两个版本号的大小，用于兼容小程序不一样版本的api时比较版本号（v1 > v2则返回1）
* @param {*} v1
* @param {*} v2
*/
export function compareVersion(v1, v2) {
v1 = v1.split('.')
v2 = v2.split('.')
var len = Math.max(v1.length, v2.length)
while (v1.length < len) {
v1.push('0')
}
while (v2.length < len) {
v2.push('0')
}
for (var i = 0; i < len; i++) {
var num1 = parseInt(v1[i])
var num2 = parseInt(v2[i])
if (num1 > num2) {
return 1
} else if (num1 < num2) {
return -1
}
}
return 0
}
const SDKVersion = wx.getSystemInfoSync().SDKVersion; // 获取版本
if(T.compareVersion(SDKVersion, '2.0.7')>=0) { ... }
2.小程序间的跳转
小程序跳转只能实现 同一公众号下关联 的小程序跳转
一个公众号可关联10个同主体的小程序，3个不一样主体的小程序。
一个小程序可关联3个公众号。
（p.s. 因此想跳转像苏宁小程序，只能把咱们小程序关联到他们小程序的公众号下）canvas
(1)使用navigator组件(仅用于微信2.0.7以上版本)小程序
<navigator target="miniProgram" app-id="{{changeNewAppid}}" path="{{changeNewUrl}}" version="release" @tap="goMiniprogram">
跳转mp
</navigator>
(2)使用navigateToMiniProgram来兼容微信2.0.7如下（但即将废弃） >=1.3.0微信小程序
goMiniprogram() {
const SDKVersion = wx.getSystemInfoSync().SDKVersion; // 获取版本
if(T.compareVersion(SDKVersion, '2.0.7')>=0) {
wx.navigateToMiniProgram({
appId: this.changeNewAppid,
path: this.changeNewUrl,
envVersion: 'release',
success(res) {
console.log('打开mp成功')
}
})
}
}
调试注意：
开发者工具上不会显示跳转，但咱们能够从回调函数里log打印信息，只有真机调试才能够跳转。api
3.小程序所属的公众号入口及其推送文章等入口进入小程序的url配置
格式：pages/list?source=wxmpcz01 （不要appid，也不要pages前加/）缓存
4.保存图片功能（用途之一是分享朋友圈）
思路：
1.小程序不能分享到朋友圈，只能经过保存图片的形式分享。
2.若是保存静态图片，能够直接调接口就行，可是需求是动态的图片（获取用户的头像），因此须要用canvas画图，而后保存成2倍/3倍图。微信
优化的问题：
1、文字有用特殊字体，可是字体文件都比较大。因此须要用fontmin抽取出所需字的字体文件，最后上线页面从原来的3.7MB变成29KB字体woff/eot/ttf文件。
- 以前产品想要文案不写死，三种成功页各自有随机的文案，这个在想怎么优化更好。由于写死的文案能够直接抽出来。随机文案要么就是一次性把文案抽出来但字体文件大小会增长；要么就是node写个进程模拟cmd去跑fontmin实时压缩字体的命令，但这种会更慢一些，并且小程序不必定支持这种写法。（通常的PC端网页是支持的）
- 小程序中canvas不支持使用自定义字体。因此保存功能须要使用图片替代文字。
- 保存图片由于用的canvas，而后canvas每一层没法设置优先级，只能一层层叠上去，因此一些图片/资源异步加载的顺序比较重要，若是加载顺序不作控制则可能将其余内容物覆盖。目前用的是await/aync + Promise.all()来实现
2、为了使保存的带有二维码的图片更加清晰，保存图片须要使用upng转换成base64格式的。
5.canvas画图
1.canvas的clip()裁剪方法，只对第一次裁剪的图有效，后面裁剪都无效。
解决方案：制做一张和头像图片同样大的中间有个n个圆形镂空（中间透明）的图片绘制在头像上，在视觉上给头像作出圆形的效果。
2.不能给文字设置字体，因此需求须要特殊字体时用的图片。
3.保存canvas为图片时，ctx.draw()须要加个定时器，晚些执行canvasToTempFilePath().不然保存下来的是空白图片。
ctx.draw(true, setTimeout(function() { // 延迟一下
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 2079,
height: 2181,
destWidth: 2079,
destHeight: 2181,
canvasId: 'myCanvas',
success: function(res) {
self.data.savedImgUrl = res.tempFilePath;
self.saveImageToPhoto();
}
});
}, 400));
// 保存图片到相册
saveImageToPhoto() {
const that = this;
if (this.data.savedImgUrl !== '') {
wx.saveImageToPhotosAlbum({
filePath: this.data.savedImgUrl,
success: function() {
that.imgSaveLoading = false;
that.$apply();
wx.showModal({
title: '保存图片成功',
content: 'xxxx',
showCancel: false
});
},
fail: function(res) {
console.log(res);
that.imgSaveLoading = false;
that.$apply();
if (res.errMsg === 'saveImageToPhotosAlbum:fail cancel') {
wx.showModal({
title: '保存图片失败',
content: '您已取消保存图片到相册！',
showCancel: false
});
} else {
wx.showModal({
title: '提示',
content: '保存图片失败，您能够点击肯定设置获取相册权限后再尝试保存！',
complete: function(res) {
if (res.confirm) {
wx.openSetting({}); // 打开小程序设置页面，能够设置权限
} else {
wx.showModal({
title: '保存图片失败',
content: '您已取消保存图片到相册！',
showCancel: false
});
}
}
});
}
}
});
}
}
参考文章:
小程序05 canvas绘图并保存到相册
canvas坑
6.分享转发功能
若是使用右上角的默认分享功能，能够调用onShareAppMessage()， 若是自定义按钮分享则是使用<button open-type="share"> 结合 onShareAppMessage里加一些判断。(注意：成功/失败callback于2018/10/10废弃)
<button id="share-family" open-type="share">分享给家人</button>
onShareAppMessage(res) {
let shareType = 'friend';
let title = '送你一个公益礼包，快去打开看看是什么！';
let path = 'XXXX'; // 右上角分享时
if (res.from === 'button') {// 来自页面内转发按钮，根据不一样的#id分享不一样的连接等操做
shareType = res.target.id.split('-')[1];
if (shareType === 'family') { // 分享结果页
path = ‘XXXXXX2’;
title = '我有个公益礼包须要和家人一块儿打开，你快点进来！' ;
}
....
}
return { // 分享的title，path里均可有变量
title: title,
path: path,
imageUrl: 'xxx',
success(res) {
console.log(res);
作一些成功后的操做...
},
fail(res) {
console.log(res);
}
};
}
7.上报formid给后台实现服务消息触达
1.在微信公众平台-小程序的模板中心先申请一个消息模板
2.服务消息触达只有支付的和提交表单才能触发服务触达通知。而支付这个方法不符合场景，因此使用提交表单：把任意一个文本改形成一个空表单的按钮，而后点击上报formid给后台。（1次提交表单可下发1条，屡次提交下发条数独立，相互不影响。）
3.后台使用formid后调用相应触达的接口。
/**
前提条件：
1.已获取access_tocken。
(参考接口：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret})
2.已获取openId。
(参考接口：https://api.weixin.qq.com/sns/jscode2session?appid=${G.appId}&secret=${ appSecret}&js_code=${code}&grant_type=authorization_code)
**/
// 关键代码：
<form bindsubmit="formSubmit" report-submit>
<button form-type="submit">
一个普通文本，把他改形成一个按钮，点击提交空表单来上报formid
</button>
</form>
formSubmit(e) {
const { formId } = e.detail; // 得到formid
...
},
注意：
1.只能手机调试，我用开发工具打印出来的formId: "the formId is a mock one"并非数字串。
2.每一个formid只能给当前用户推送的时候用 不能给其余人用。
除官方api外的参考文章：
微信小程序实例：建立下发模板消息实例
手把手教你开发微信小程序之模版消息
开发 | 教你突破小程序模板消息的推送限制
8.获取用户信息接口wx.getUserInfo的废弃问题
wx.getUserInfo接口是获取用户信息（昵称，头像等）的接口，在官方文档上写是即将废弃。如今开发版和体验版已经废弃（调用接口默认直接fail），可是现网版本仍是可使用（会出现系统弹弹窗），官网更新说于2018/10/10废弃。
目前，有两种兼容方式:
1.若是只是单纯展现用户头像或昵称，可使用 <open-data > 组件。可是这个有局限性，只能显示，却获取不到信息，好比：后台接口须要前端传递用户昵称或头像信息时。
<open-data type="userAvatarUrl"></open-data>
2.使用<button open-type="getUserInfo">，引导用户主动进行受权操做（适配v1.3.0以上版本）
<button open-type="getUserInfo" bindgetuserinfo="onGotUserInfo"\>
onGotUserInfo(e){
const { errMsg, userInfo } = e.detail;
if(errMsg.indexOf('ok') != -1) { //赞成受权
info = e.detail.userInfo;
}
const { avatarUrl, nickName } = info; // 获取到了头像，昵称等
...
},
官方api说明废弃问题：
https://developers.weixin.qq....
9.生成二维码
参考如下api的三种api能够获取二维码，可是有局限性。好比说：可接受path参数较长，生成个数受限；有的可接受页面参数较短，生成个数不受限；
https://developers.weixin.qq....
1）获取access_token的接口 GET
https://api.weixin.qq.com/cgi...
2）获取二维码图片的文件流接口 POST
https://api.weixin.qq.com/wxa...
{ "path": "pages/list" }
10.<rich-text>组件
由于说明弹窗的文字是运营在工具上配置的一些字段，而后如今有一些关键字高亮的功能，那样运营可能要配置html字符串片断或者其余字符串片断，但小程序不能够像H5直接插入html片断，高亮实现起来比较麻烦。
网上解决方法：有的使用wxParse工具库，有的是本身写正则而后去本身拼凑标签。
目前解决方法：使用小程序的<rich-text>组件，把内容字段定义成json形式（而不是html格式，免去了手动正则匹配html标签的步骤），而后来动态生成相应标签并动态添加高亮class，但有个不足的地方就是每一个text片断若是高亮class是hightlight，而不符合的会有一个空的class。
ps.不采用wxParse的缘由：
须要引入7个文件而后总大小134KB，感受比较占体积。
11.拒绝地理位置受权后从新拉起受权窗口
当用户选择一些个性化偏好设置以后，系统会把选择保存在受权缓存里，后续碰到相同受权不会再系统弹窗询问，而是默认以第一次用户的选择为准（获取地理位置也属于这种状况）。如今需求是但愿能点击“获取当前地址”以后再次弹窗询问用户受权。
api bug：
若是用户拒绝第一次系统受权弹窗，后面wx.authorize()拉取受权窗口的接口将无效。（在wx.authorize的success回调里调用后台获取地址接口会直接fail， 报{errMsg: "getLocation:fail auth deny"}的错）
解决方案：
经过一个点击操做来调起openSetting。先去查用户是否受权地理位置（wx.getSetting + authSetting['scope.userLocation']）, 若是未受权则打开一个自定义的弹窗询问用户是否去“设置”中打开权限(wx.showModal + wx.openSetting)，而后跳转去到“设置”。若是“设置”中用户打开地理权限按钮，就在成功的callback里去调获取地址的API，后续操做就和第一次进入页面一致了。（这里的“设置”是指小程序的受权设置页，非手机设置或者自定义的设置页）
版本兼容：
**2.3.0版本开始，用户只有发生点击行为后，才能够跳转打开设置页，因此不能直接调用，如onLoad里就调用。(2018/10/10生效)
1）<button open-type="openSetting" bindopensetting="openSettingFn"> 按钮兼容 (v2.0.7以上生效)
2）<button @tap="openSettingFn">自动获取地址</button>绑定的点击事件openSettingFn仍是能够调用api**
// 写法1
<button open-type="openSetting" bindopensetting="openSetting">自动获取地址</button>
openSetting(e) {
//判断是否得到了用户地理位置受权（v2.0.7以上版本）
const that = this;
if(e.detail.authSetting['scope.userLocation']) {
//赞成用户的地理位置受权 马上打开“设置”
const getUserLocationWrapper = function(){
API.getUserLocation().then((location)=>{
...
}).catch((error) => {
console.log('发起api 失败',error)
});
}
// 设置一个延时 由于用户打开受权按钮不能当即生效 因此会出现请求接口auth deny的问题
setTimeout(getUserLocationWrapper, 500);
}
}
// 写法2
<view class="edit-item-authorize" @tap="dealLocationAuthorize">
<text>自动获取地址</text>
</view>
dealLocationAuthorize() {
//判断是否得到了用户地理位置受权（v2.0.7如下版本）
wx.getSetting({
success: (res) => {
if (!res.authSetting['scope.userLocation']){
this.openConfirm()
}
}
})
}
// 未受权地址时，须要打开自定义的弹窗，询问用户是否去设置中打开权限
openConfirm () {
const that = this;
//此处能够打开一个modal询问，而后在success的回调里调用openSetting都行的
//wx.showModal({
//content: 'XXXX要获取您的地理位置，是否容许？',
//confirmText: "容许",
//cancelText: "不容许",
//success: function (res) {
//if (res.confirm) { //点击“确认”时打开设置页面
wx.openSetting({ // openSetting打开“设置”（v2.0.7如下版本）
success: (res) => {
const getUserLocationWrapper = function(){
API.getUserLocation().then((location)=>{
...
console.log('调用后台接口拿到位置信息', location)
}).catch((error) => {
console.log('发起调用后台接口失败',error)
});
}
// 设置一个延时 由于用户打开受权按钮不能当即生效 因此会出现请求接口auth deny的问题
setTimeout(getUserLocationWrapper, 500);
}
})
//} else {
// console.log('用户点击取消')
//}
//that.$apply();
//}
//});
}
12.有时候开发者模式自测经过，可是发的体验版一些数据拿不到，而后当体验版开了调试模式时，又能够跑通全部逻辑。
解决过程：后来发现是请求方式的问题，dev环境都是http请求，idc则须要https的请求，因此以前只有开了调试模式才能拿到数据。而后，还发现由于调试者工具上开发时默认勾选“不校验合法域名、https证书...”的选项因此开发时未报错，若是取消勾选则会报http那个域名不在白名单内报错（咱们小程序白名单用的是https的url）。
还发现了一些奇怪的现象：像小程序开发板/体验版开了调试模式，再去打开线上小程序，本没有调试工具的线上小程序也有了调试工具。以及这三个版本小程序的缓存感受有必定联系，可能共用。具体待实验后跟进。
- 1. 微信小程序踩坑记录
- 2. 微信小程序----------踩坑记录
- 3. 微信小程序BLE踩坑记录
- 4. 微信小程序入坑记录篇
- 5. (踩坑回忆录)微信小程序踩坑记录
- 6. 微信小程序吸顶效果的踩坑记录
- 7. 微信小程序踩坑记之input
- 8. 微信小程序踩坑记
- 9. 微信小程序遇坑笔记
- 10. 微信小程序坑集
- 更多相关文章...
- • ADO 添加记录 - ADO 教程
- • ADO 更新记录 - ADO 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 算法总结-归并排序
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 微信小程序踩坑记录
- 2. 微信小程序----------踩坑记录
- 3. 微信小程序BLE踩坑记录
- 4. 微信小程序入坑记录篇
- 5. (踩坑回忆录)微信小程序踩坑记录
- 6. 微信小程序吸顶效果的踩坑记录
- 7. 微信小程序踩坑记之input
- 8. 微信小程序踩坑记
- 9. 微信小程序遇坑笔记
- 10. 微信小程序坑集