微信开发遇到问题及解决总结(一)
2019-06-09 本文已影响0人
Luv_coco
1、wx.request请求后台数据在回调函数中处理数据
请求后台数据之后一般需要存入data或者其他操作,success是个回调函数,里面this不是想要的,一般我都是现在外边把this存起来
// 以下代码包括在事件处理函数中
var _this = this
wx.request({
url: '/applet/1.0/user/token',
method: 'GET',
success(res) {
console.log(res)
_this.setData({//返回token存放在data.token
token: res.data
})
}
})
2、三目运算控制差异化样式的显示问题
场景一:列表渲染
讨论列表底部需要下边框来分割两个讨论部分,统一的模板去渲染,最后一条也会有底边框,需要判断并消除边框。
解决:所有都有底边框,commentBlock样式体现边框;三目判断最后一条讨论用noBorder样式控制不要边框
<block wx:for='{{allComments}}' wx:key='index'>
<view class="commentsBlock {{(index == (allComments.length-1)) ? 'noBorder' : '' }}" >
... 讨论模板code内容
<view>
</block>
场景二:三种签到状态,过时未签、签到、未来要签,嵌套两个三目运算,判断三种样式的显示。
<view class="small-common {{jifen.is_sign == 0? 'small-init' : jifen.is_sign == 1? 'small-sign' : 'small-unsign' }}">
+{{jifen.coin}}
</view>
// tips:三目同样适用于文字显示
<view>{{list.is_sign == 1? '+' : '翻倍+' }}15</view>
//输出: +15 或者 翻倍+15
3、页面直接携参跳转页面data-set的用法
点击页面UI元素跳转的另一个页面,页面之间参数传递有很多种,我最中意这种,
<view class='card-btn' catchtap='navigateToApply' data-gid='{{item.group_id}}'>我要参团</view>
点击我要参团,可以在事件处理函数获得dataset,对于数组渲染的很多列表,获得当前点击目标数据做一些事情很有用。
例:后台需要前端发送活动的gid,判断哪个活动被报名了,关联活动ID
// 对应js文件
navigateToApply(e){
// console.log(e.currentTarget.dataset)
wx.navigateTo({
url: '/pages/apply/apply?gid=' + e.currentTarget.dataset.gid
})
},
页面之间携参跳转有很多种方法,此方法简单粗暴。页面之间传递的是对象数据,需要先JSON.stringify(e.currentTarget.dataset.list),在接收参数页面JSON.parse()
// 接收参数也在onShow()、onLoad()周期都可以
onShow(data){
console.log(data)
}
4、小程序图片列表渲染显示空隙问题
弹性布局flex搞定
//wxml
<block wx:for="{{ detailImg }}" wx:key="index">
<image class="img" mode='widthFix' src='{{item}}'></image>
</block>
//css
.img{
width: 750rpx;
display: flex;
flex-direction: column;
}
5、小程序使用七牛云图片上传
需要调用微信两个接口 wx.chooseImage({ })选择要上传的图片, wx.uploadFile({ })上传图片到七牛云服务器,七牛云上传存储区域选择。代码包含多张上传解决办法即递归调用自身。
onShow() {//页面onShow周期,请求后端七牛云token
var that = this
$ajax({
url: '/applet/1.0/user/token',
method: 'POST',
success(res) {
console.log(res)
that.setData({//返回token存放在data.token
token: res.data
})
}
})
},
chooseImg(){//wxml绑定的上传图片事件
var that = this;
wx.chooseImage({
count: 3 - that.data.detailPics.length, // 最多可以选择的图片总数
sizeType: ['compressed'], // 压缩图
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
that.uploadimg({ //调用上传图片的接口函数
path: tempFilePaths , //这里是选取的图片的地址数组
});
}
})
},
uploadimg (data) {//上传图片接口
wx.showLoading({
title: '上传中...',
mask: true,
})
var that = this,
i = data.i ? data.i : 0,
success = data.success ? data.success : 0,
fail = data.fail ? data.fail : 0;
wx.uploadFile({
url: 'https://upload.qiniup.com',//七牛云上传存储区域选择
filePath: data.path[i],
name: 'file',
header: {
"Content-Type": "multipart/form-data"
},
formData: {
token: that.data.token
},
success: (res) => {
wx.hideLoading();
success++;
console.log(res)
var str = JSON.parse(res.data) //返回的结果,可能不同项目结果不一样
if(res.statusCode==200){
var pic_url = that.data.showUrl + str.key; //拼接图片完整地址
var detailPics = that.data.detailPics;
detailPics.push(pic_url) //存储所有上传成功图片七牛云返回链接
that.setData({
detailPics: detailPics
})
}else{
wx.showToast({
title: str.error ,
icon: 'none',
duration: 2000
})
}
},
fail: (res) => {
fail++;
console.log('fail:' + i + "fail:" + fail);
},
complete: () => {
i++;
if (i == data.path.length) { //当图片传完时,停止调用
// console.log('执行完毕');
// console.log('成功:' + success + " 失败:" + fail);
if (that.data.detailPics.length >= 3) { //本地图片大于三张不显示上传按钮
that.setData({
showUploadImg: false
})
}
} else { //若图片还没有传完,则继续调用函数
data.i = i;
data.success = success;
data.fail = fail;
that.uploadimg(data);//递归,回调自己
}
}
});
},