微信小程序开发问题汇总
最近由于公司需要连续做了2个小程序，坑总体来看并不多，但是也没少踩... 禅道上仍旧安然的放着2个bug但已被置延期，我是多么的想关掉它们呢，我尝试了，但是... 你们知道哒 能被特容易就解决的问题就不是问题啦。希望看到此文章的人如果有好的方法也可以分享给我哈，在最下边我会在细节中指出问题哒。今天是周五，本来是想提早回家，但还想趁自己思想清晰总结些。那、现在开些La...
1、图片点击放大到全屏展示
wxml文件： 对应js文件： previewImage: function(e) {
var current = e.target.dataset.src;
var finalImgpath = [];
finalImgpath.push(current)
// for (var i = 0; i < this.data.imgpath.length;i++) {
// finalImgpath.push(this.data.imgpath[i].src) //当多个图片时需将所有图片都插到一个数组中，最后存到urls链接里
// }
wx.previewImage({
current: current, //当前显示图片的http链接
urls: finalImgpath //需要预览的图片http链接列表
})
},2、图片点击放大即wx.previewimage时会触发onhide，预览返回时会触发onshow
1). 首先在data中定义一个变量比如 preImgStatus: false
2). 在上述代码调用previewImage前加一个开关变量 this.setData({preImgStatus: true})
3). 在显示放大图片时触发的onhide函数中加上
if(this.data.preImgStatus == true) {
this.setData({ preImgStatus: false});
return;
}
//此处加上onhide真正需要处理的事件即可，onshow同理3、“目前”——为了实现点击小程序自带后退按钮后，可自动刷新页面状态 + 关闭页面再次进入 是采用onshow的方式；为了监控关闭采用onhide （这种监控方法也不知百分百好用不，待有时间会查验并总结好一点的方法）
4、轮播图最后一张如何与第一张衔接
尝试找方法，知道是使用circular（是否采用衔接滑动这一属性），但是我一直在js中data里设置，致使反复不能实现效果，最后发现只要在swiper标签中加上一句 circular="true" 就神奇般的好了，最后我就表示呵呵了...
5、当一次setData的数据超过一定值就会报如下错误 （困扰我最久的一个大坑）
首先声明，我setData的是图片地址，而不是列表数据，那么先说我是怎么解决的
法一：
（invoiceImages是后端返回的图片集合）
invoiceImages.forEach(function (obj, index) {
var invoiceObject = {};
if (typeof obj.fileExt == 'undefined' || obj.fileExt == '') {
return false;
} else {
var imgSrc = 'data:image/' + obj.fileExt + ';base64,' + obj.fileContent;
invoiceObject.src = imgSrc;
finalDisSrc.push(invoiceObject);
}
});
for (var i = 0; i < finalDisSrc.length;i++) {
var key = 'imgpath' + i;
that.setData({
[key] : finalDisSrc[i] //[变量] 这样是动态设置值的形式
})
var disPic = 'disPic' + i;
that.setData({
[disPic]: 'block'
})
}data: {
imgpath0: [], //图片路径
imgpath1: [],
imgpath2: [],
imgpath3: [],
imgpath4: [],
imgpath5: [],
disPic0: 'none', //图片显示
disPic1: 'none',
disPic2: 'none',
disPic3: 'none',
disPic4: 'none',
disPic5: 'none'
}页面中就并列放了5个image标签，没有用循环
总结：此方法我是比如有5张图片，那么我是setData了5次。此方法我已无力吐槽，只能说是很笨的方法，结果是保证了每张图片都能显示出来了。但是正当我窃喜之时，测试竟告知一张图片也有过大的情况...... 故就出现了法二
法二：
因为着实不想放弃自己的想法，故仍沿着这条错误的路继续走下去，我就想着5张图片，setData5次，那我一张图片再拆4份再setData4次呢，就相当setData20次？ 不管，就要这么做... 于是乎，开始执行 (拿拆2次为例)
var pic1 = 'data:image/' + obj.fileExt + ';base64,' + obj.fileContent.substring(0, Math.ceil(length / 2));
var pic2 = obj.fileContent.substring(Math.ceil(length / 2));
然后分别塞到对象中
在页面上我就使用 {{imgpath0.pic1+imgpath.pic2}} 拼接数据，以为可以大功告成，结果一张图片就只显示了不到1/10 我真的想哭...
啊哈哈 为何不出来... 由于时间紧迫 着急上线 故只能另寻它法 因为着实尝试了好几次了...
法三：
救星提供了canvas方法，地址如下 点击查看链接（canvas方法） 但没有亲证，即将上线怕影响其他bug
- 如果是列表数据，解决方法可以参考如下链接 点击查看链接（列表插值方法）
/*处理setdata插值问题，一次插10条（非常好用的方法）*/
setDataBug: function(curData,readStatus) {
var num = 10;
var key = 'readListData' + '[' + i + ']';
var arrTen = curData.slice(num * (i), num * (i + 1));
if (arrTen.length == 0) {
break
}
this.setData({
[key]: arrTen,
})
}6、微信小程序自定义弹框滚动与页面滚动冲突问题
法一：
//设置Page的overflow-y属性值为hidden
点开的函数中，如果自定义弹框当前显示，则isScroll设为true，否则设为false法二：
如果自定义弹框不涉及滚动，则直接在自定义弹框最外层盒子加上 catchtouchmove='true' 即可。
7、input标签既有bindblur/bindinput事件，input使用bindinput存储输入的值时，手指将光标前移再删除，光标自动跑到最后 ——输入和获取焦点只处理了后边的X号显示隐藏， 而失去焦点去存储值
8、提交表单时如果后端需要formId，则前端需要使用form，具体方法如下：
// 注：open-type是微信开放的一种能力，getUserInfo是用来获取用户信息
/*form形式点击确定获取formId*/
formSubmit: function (e) {
this.setData({
formId: e.detail.formId
})
}
/*点击确定按钮获取用户信息*/
userInfoHandler: function (option) {
if (option.detail.userInfo == undefined) { //微信授权点击拒绝
if (qyid != '' && qyid != undefined && qyid != null) {
//通过扫一扫进入
} else {
//通过搜索直接进入
}
} else {
//微信授权点击允许
}
}9、由于微信规定18-04-30后上线的新开发的小程序，微信将无法自动弹出授权询问框，故需用户模拟弹框点击后去触发
具体解决思路同8，仔细看看哦，很重要哒... xixixi
10、获取用户token，并对外暴露，每次使用直接调用即可
var config = require("../config")
function getAuthKey() {
var that = this;
return new Promise(function (resolve, reject) {
// 调用登录接口
// TODO if
if (wx.getStorageSync("token") != '') {
var token = wx.getStorageSync("token");
var uid = wx.getStorageSync("uid");
//token失效，更新token
wx.request({
url: config.accountUrl + "/account/wx/getToken?uid=" + uid + "&token=" + token + "&type=" +10,
data: {},
header: { 'content-type': 'application/x-www-form-urlencoded' },
method: 'post',
success: function (res) {
if (res.data.code == '0000') {
resolve(wx.getStorageSync("token")); //只要是0000就无需更新token,否则重新获取
} else {
resolve(getToken())
}
},
fail: function(res) {
resolve(getToken())
}
})
} else {
resolve(getToken())
}
})
}
/*获取token*/
function getToken() {
var that = this;
return new Promise(function (resolve, reject) {
wx.login({
success: function (res) {
wx.request({
url: config.wxserviceUrl + '/api/jscode2session',
data: {
code: res.code,
appid: "wx9630dd9447e885d2",
},
method: 'post',
success: function (res) {
var openid = res.data.openid
var session_3rd = res.data.session_3rd;
var unionid = res.data.unionid;
//获取用户信息
if (res.data.openid) {
wx.request({
url: config.accountUrl + '/account/littleApp/weChatLogin',
data: {
openid: openid,
unionid: unionid,
session_3rd: session_3rd,
appid: "wx9630dd9447e885d2" //此处需根据后端需要的值传递
},
method: 'post',
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success: function (res) {
if (res.data.code == "0000") {
var token = res.data.data.token;
wx.setStorageSync("token", token);
wx.setStorageSync("uid", res.data.data.uid);
resolve(token);
}
}
})
} else {
reject('error');
}
}
})
}
})
})
} exports.getAuthKey = getAuthKey; //暴露方法获取token页面中只需
var login = require('../../utils/login');
login.getAuthKey().then(function (res) {
//res就是token
} 以上就是我这个初级菜菜目前能想到的问题啦，还有很多细节bug，稍后会一点点补充的。也许会有写的错误的地方，但由于刚学而已，不喜勿喷，本人只是为了今后更好的工作而做的总结啦。小仙女现在好像快点飞到家里，洗个澡，然后躺在床上睡觉觉。嘿嘿... 喜欢我、没道理 哈哈 各位小主晚安！Zzz...