小程序注意事项: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:
<view bindtap="GetAction" data-test="abctest">
<image src="../images/img1.jpg" mode="widthFix"> </image>
<text>文字</text>
</view>
js:
let action = e.currentTarget.dataset.test;
console.log(action);
控制台:
abctest
注释:
使用第一种的方法e.target.dataset.test会获取当前点击的元素的test,则获取图片上的test,图片上没有test便取的是undefined;
使用第二种的方法e.currentTarget.dataset.test 会获取有事件的那个元素,即view,所以获得“abctest”
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 的功能
<view class="btn-area">
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator></view>
6、小程序 跳转链接 传参,及接受参数
List.wxml:
<navigator class="news_item" url="../detail/detail?id={{item.id}}">跳转详情页</navigator>
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:
<view class="news_tit_li {{currentData == 0 ? 'active' : ''}}" data-current="0" bindtap='checkCurrent'></view>
<view class="news_tit_li {{currentData == 1 ? 'active' : ''}}" data-current="1" bindtap='checkCurrent'></view>
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 需要 闭合,<input type=”text” />
<input type="text" placeholder="请输入手机号…"/>
11、text 标签 内不可以包含其他标签,会报错哦
<text>内容不能有标签</text>
12、小程序 调用相机/相册扫码
// 允许从相机和相册扫码
wx.scanCode({
success(res) {
console.log(res)
}
})
// 只允许从相机扫码
wx.scanCode({
onlyFromCamera: true,
success(res) {
console.log(res)
}
})
13、地图导航
gym.wxml
<view class="gym_icon" bindtap="intoMap"></view>
gym.js
//为了调出地图导航
intoMap:function(){
wx.openLocation({
latitude: 22.85758,
longitude: 108.31476,
name: "南宁市西乡塘区秀厢大道东祥云商务酒店",
address:"南宁市西乡塘区秀厢大道东祥云商务酒店",
scale: 28
})
},
14、小程序内容板块换行<text> aaaaa \n bbbbb </text>
\n :微信小程序中内容换行不能用<br/>,用\n,并且必须放在<text></text>标签内生效,否则会解析成空格
第二板块 小程序 接口对接
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为你绑定的图片的地址
<image wx:if="{{userPic}}" src="{{api+userPic }}"></image>
或
<image src="{{userPic ? api+userPic : '../../images/head_img.png'}}"></image>
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:
<rich-text nodes="{{content}}"></rich-text>
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()
// 将后台返回的数组 改为 需要的数组对象
that.grouplist = res.data.data.group_tour.map(val=>{
return{
id:val.id,
pic:val.group_tour_pic.substr(0,4)=='http'?val.group_tour_pic:domain+val.group_tour_pic,
title:val.title,
price:val.price,
num:val.num,
date:val.num,
}
});