微信小程序开发过程中遇到的问题及解决方案
小程序注意事项：navigator
0、小程序圆角失效问题 wxss
Index.wxss:
.banner_image image{
border-radius: 20rpx;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
1、判断语句需要在{{ }} 中去判断 wx:if=”ture && false || ture&&true”
wx:if="{{ (item.tips==1 && item.steps==3) || (item.tips==2 && item.steps==5) }}"
2、bindtap=“” 函数方法function ( ){ } 传参
e.currentTarget.dataset.id & e.target.dataset.id
wxml:
js:
let action = e.currentTarget.dataset.action;
Console.log(action);
控制台：
father
注释：
使用第一种的方法e.target.dataset.action 会获取当前点击的元素的action，则获取图片上的action，图片上没有action便取的是undefined；
使用第二种的方法e.currentTarget.dataset.action 会获取有事件的那个元素，即view，所以获得“father”
3、如何刷新data：{ showHide：flase, } showhide的值
data:{
showHide:false,
},
onOffFun: function (e){
var that = this;
that.setData({
showHide:true
})
},
4、微信小程序实现简单input正则表达式验证功能
checkshr: function (e) {
// 收货人 判断
var regLowerCase=new RegExp('[a-z]','g');//判断用户输入的是否为小写字母
var regCapitalLetter=new RegExp('[A-Z]','g');//判断用户输入的是否为大写字母
var regNum=new RegExp('[0-9]','g');//判断用户输入的是否为数字
var rsLowerCase=regLowerCase.exec(e.detail.value);
var rsCapitalLetter=regCapitalLetter.exec(e.detail.value);
var rsNum=regNum.exec(e.detail.value);
if(rsLowerCase){
this.setData({
result:'您输入的是小写字母'
})
}else if(rsCapitalLetter){
this.setData({
result:'您输入的是大写字母'
})
}else if(rsNum){
this.setData({
result:'您输入的是数字'
})
}else{
this.setData({
result:''
})
}
};
5、navigator跳转标签open-type="switchTab"对应 wx.switchTab 的功能
6、小程序 跳转链接 传参，及接受参数
List.wxml：
Detail.js
onLoad: function (options) {
var that = this;
// 列表页 传参，接受参数 id
this.setData({
id: options.id,
})
console.log(that.data.id)
},
7、三元运算符: 条件(true false) ? 值1(true) : 值2(false)
Wxml:
Js:
//点击切换，赋值 tabSwitch、currentData
checkCurrent: function(e) {
const that = this;
if (e.target.dataset.current==0) {
that.setData({
currentData:0
})
} else {
that.setData({
currentData:1
})
}
},
8、wx.showToast 提示消息模块
// 消息提示——wx.showToast(OBJECT)
wx.showToast({
title: '取消收藏',
icon: 'none/success/error',
duration: 2000
})
9、wx.showModal 确定、取消 弹框
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}})
10、小程序使用 input 需要 闭合，”text” />
11、text 标签 内不可以包含其他标签，会报错哦
12、小程序 调用相机/相册扫码
// 允许从相机和相册扫码
wx.scanCode({
success(res) {
console.log(res)
}
})
// 只允许从相机扫码
wx.scanCode({
onlyFromCamera: true,
success(res) {
console.log(res)
}
})
13、地图导航
gym.wxml
gym.js
//为了调出地图导航
intoMap:function(){
wx.openLocation({
latitude: 22.85758,
longitude: 108.31476,
name: "南宁市西乡塘区秀厢大道东祥云商务酒店",
address:"南宁市西乡塘区秀厢大道东祥云商务酒店",
scale: 28
})
},
14、小程序内容板块换行 aaaaa
bbbbb
：微信小程序中内容换行不能用
，用
，并且必须放在
15、小程序 接口对接 GET/POST : headers 不同引入
Get：
headers: {
'Content-Type': 'application/json'
},
Post：
header: {
'content-type': 'application/x-www-form-urlencoded'
},
16、判断 值 是否为 ‘’/undefined/null
//判断 uid 是否等于 undefined、 ‘’ 、null
// 与(&&) 或(||) 非(!)
if(that.data.uid!=undefined && that.data.uid!="" && that.data.uid!=null){
that.setData({
loginStatus:typeof(options.uid)
})
console.log(that.data.uid)
}else{
console.log(that.data.uid)
}
17、微信小程序ios系统border-radius元素 overflow:hidden失效问题
父元素使用border-radius 和 overflow：hidden；子元素使用了transform属性，父元素的overflow：hidden；会失效。
父元素设置以下两个属性：
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
18、小程序 图片报错问题，
原因：图片绑定的数据在页面“初次”渲染的时候并没有被正确赋值，有可能你的数据是异步加载的，在渲染的时候还没有取到相应的数据
解决方法： 设置一个本地的图片地址作为动态图片地址未获取时的默认地址，或者在image里添加 wx:if="{{avatarUrl}}" imageUrl为你绑定的图片的地址
或
19、app.js/index.js 变量 传递
App.js : this.globalData.serverApi
App({
onLaunch() {
wx.getSystemInfo({
success: res => {
this.globalData.height = res.statusBarHeight;
},
fail(err) {
console.log(err);
}
})
},
globalData: {
serverApi:'http://yeguo.shiduweb.com',
height: 0, // 默认设置顶部高度
}
})
Index.js : app.globalData.serverApi
onLoad: function (options) {
console.log(app.globalData.serverApi)
}
20、rich-text 富文本 图片路径替换 app.globalData.serverApi
Detail.wxml:
Detail.js:
Const app = get.App();
detailSuc: function (data){
var that = this;
var context = app.changefwb(data.data.content)
that.setData({
content:context,
})
},
App.js: 公共方法
changefwb(strin){//懒加载处理 将src 换成 v-lazy=
let newStr= strin.replace(new RegExp(/src="/g), `mode="widthFix" src="${this.globalData.serverApi}`);//v-lazy=
return newStr;
},
globalData: {
serverApi:'http://yeguo.shiduweb.com',
}
21、上传图片 wx.chooseImage()
// 上传头像 开始
changeAvatar: function () {
var that = this;
wx.chooseImage({
count: 1, // 最多可以选择的图片张数，默认9
sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
success: function (res) {
var avatar = res.tempFilePaths;
const tempFilePaths = res.tempFilePaths;
// 图片上传
wx.uploadFile({ //微信封装的上传文件到服务器API
url: app.globalData.serverApi+"/up_imgs.html", //域名+上传文件的请求接口
filePath: res.tempFilePaths[0], // tempFilePath可以作为img标签的src属性显示图片 服务器图片的路径
name: "pic", //上传到服务器的参数
success(res) {
//这里的成功请求执行的内容是我们的图片上传到服务器成功 对应的是wx.uploadFile的api成功
console.log(res.data)
var data = JSON.parse(res.data)
that.setData({
uploadImg: data.data, //将图片转换之后的服务器地址data.data(打印结果显示我的是data.data)推到data里面定义的空容器updataImg。html界面的显示也是用的这个路径，值得注意的是html里面要加上url域名
avatar: data.data,// 返回给 后台 头像修改了,下次再调接口的时候 头像会改变
})
console.log(that.data.uploadImg)
}
})
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
//调用封装的方法 修改信息
call.request(
'/user_modifys.html',
{
pic:that.data.uploadImg?that.data.uploadImg:that.data.avatar,
uid:that.data.uid,
},
that.userSuc,
that.userFail
);
22、存储数据setStorageSync获取数据getStorageSync（同步）
Login.js
onLoad: function (options) {
// 缓存 uid
wx.setStorageSync('Uid', data.data.id)
},
Index.js:
// 获取缓存的 Uid
var that = this;
var Uid = wx.getStorageSync('Uid')
that.setData({
uid:Uid,
})
23、计时器
setTimeout(function(){
wx.switchTab({
url: '../../index/index',
})
},1000)
24、改变数组，生成新的数组map()
// 将后台返回的数组 改为 需要的数组对象
let questThree = data.data.map(val=>{
return {
title:val,
answer:[{
index: '1',
content: '是'
}, {
index: '2',
content: '否'
}]
}
})
