微信小程序实用代码段(收藏版)

2023-08-04 10:15:04 79

前言

排名不分先后，按自己的习惯来的。

总结经验，不喜勿喷哦~

一、tab切换

tab1
tab2

Page({
data:{
//tab切换
currentTab:0,
},
swichNav:function(e){
varthat=this;
if(this.data.currentTab===e.target.dataset.current){
returnfalse;
}else{
that.setData({
currentTab:e.target.dataset.current
})
}
},

})

二、swiper切换


tab1
tab2
tab3


页面1
页面2
页面3


Page({
data:{
currentTab:0,
aheight:''
},
//滑动切换
bindChange:function(e){
varthat=this;
that.setData({
currentTab:e.detail.current
});
},
//点击tab切换
swichNav:function(e){
varthat=this;
if(this.data.currentTab===e.target.dataset.current){
returnfalse;
}else{
that.setData({
currentTab:e.target.dataset.current
})
}
},
//swiper自适应高度
onLoad:function(options){
varthat=this
wx.getSystemInfo({
success:function(res){
that.setData({
aheight:res.screenHeight
});
}
})
},
})

三、图片上传















.upload{width:20%;float:left;margin-top:33rpx;}
.uploadimage{width:100%;}
.logoinfo{width:20%;float:left;margin-right:2%;}
.del{width:20%;float:right;}
.delimage{width:100%;}
.logoinfoimage{width:100%;}

page({
data:{
img_arr:[]
},
//图片上传
upimg:function(){
varthat=this;
if(this.data.img_arr.length<3){
wx.chooseImage({
sizeType:['original','compressed'],
success:function(res){
that.setData({
img_arr:that.data.img_arr.concat(res.tempFilePaths),
})

}
})
}else{
wx.showToast({
title:'最多上传三张图片',
icon:'loading',
duration:3000
});
}
},
//删除图片
deleteImage:function(e){
varthat=this;
varindex=e.currentTarget.dataset.index;//获取当前长按图片下标
console.log(that.data.img_arr)
wx.showModal({
title:'提示',
content:'确定要删除此图片吗？',
success:function(res){
if(res.confirm){
console.log('点击确定了');
that.data.img_arr.splice(index,1);
}elseif(res.cancel){
console.log('点击取消了');
returnfalse;
}
that.setData({
img_arr:that.data.img_arr
});
}
})
},
//上传
upload:function(){
varthat=this
for(vari=0;i
四、scroll-view滚动页


1


2



.scroll-view_H{white-space:nowrap;height:600rpx;}
.listb{padding:25rpx;white-space:normal;}

五、授权登录
app.js
//app.js
App({
globalData:{
userInfo:null,
unionid:null,
token:''
},
onLaunch:function(){
/*已授权之后，自动获取用户信息*/
//判断是否授权
wx.getSetting({
success:(res)=>{//箭头函数为了处理this的指向问题
if(res.authSetting["scope.userInfo"]){
console.log("已授权");
//获取用户信息
wx.getUserInfo({
success:(res)=>{//箭头函数为了处理this的指向问题
//this.globalData.isok=true
this.globalData.token='ok'
varthat=this
console.log(res.userInfo);//用户信息结果
wx.getStorage({
key:'unionid',
success(res){
that.globalData.unionid=res.data
}
})
this.globalData.userInfo=res.userInfo;
if(this.userInfoReadyCallback){//当index.js获取到了globalData就不需要回调函数了，所以回调函数需要做做一个判断，如果app.js中有和这个回调函数，那么就对这个函数进行调用，并将请求到的结果传到index.js中
this.userInfoReadyCallback(res.userInfo);
}
}
})
}
else{
console.log("未授权");
wx.removeStorage({
key:'unionid'
})
}
}
})
}
})
wxml

防疫针助手

index.js
//pages/index/index.js
constapp=getApp()
Page({
data:{
token:''
},
onGotUserInfo:function(e){
varthat=this
if(this.data.token!='ok'&&app.globalData.token!='ok'){
wx.getSetting({
success:(res)=>{//箭头函数为了处理this的指向问题
if(res.authSetting["scope.userInfo"]){
wx.login({
success:function(data){
console.log('获取登录Code：'+data.code)
varpostData={
code:data.code
};
wx.request({
url:'https://m.renyiwenzhen.com/rymember.php?mod=xcxlogin&code='+postData.code+'&nickname='+e.detail.userInfo.nickName,
data:{},
header:{
'content-type':'application/json'
},
success:function(res){
console.log(res.data);
that.data.token='ok';
wx.setStorage({
key:"unionid",
data:res.data.unionid
})
wx.navigateTo({
url:e.target.dataset.url
})
},
fail:function(){
console.log('1');
}
})
},
fail:function(){
console.log('登录获取Code失败！');
}
})
}
}
})
}else{
wx.navigateTo({
url:e.target.dataset.url
})
}
}
})


六、发送请求
wx.request({
url:'https://m.renyiwenzhen.com/xcx_ajax.php?action=babylist',//仅为示例，并非真实的接口地址
method:'post',
data:{
unionid:uni
},
header:{
'content-type':'application/x-www-form-urlencoded'//默认值
},
success(res){
//console.log(uni)
console.log(res.data)
that.setData({
list:res.data.bblist
})
}
})
七、标题栏及底部栏
全局标题栏
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor":"#3EC8C8",
"navigationBarTitleText":"乳孕呵护",
"navigationBarTextStyle":"white"
}

局部标题栏
{
"usingComponents":{},
"navigationBarBackgroundColor":"#fff",
"navigationBarTextStyle":"black",
"navigationBarTitleText":"附近医院"
}


全局底部栏
"tabBar":{
"color":"#e4e4e4",
"selectedColor":"#333",
"list":[
{
"pagePath":"pages/index/index",
"text":"发现",
"iconPath":"./images/find.png",
"selectedIconPath":"./images/finded.png"
},
{
"pagePath":"pages/his/his",
"text":"医院",
"iconPath":"./images/his.png",
"selectedIconPath":"./images/hised.png"
},
{
"pagePath":"pages/stu/stu",
"text":"经验",
"iconPath":"./images/stu.png",
"selectedIconPath":"./images/stued.png"
},
{
"pagePath":"pages/my/my",
"text":"我的",
"iconPath":"./images/my.png",
"selectedIconPath":"./images/myed.png"
}
]
}

八、navigator
1、wxml

底部栏没有的路由


底部栏有的路由



2、js
go:function(e){
wx.navigateTo({
url:'../eatxq/eatxq?id='+e.currentTarget.dataset.id+"&name="+e.currentTarget.dataset.name
})
}


九、加载条
加载中
页面


加载完成true
wx.request({
url:'https://m.renyiwenzhen.com/xcx_ajax.php?action=caneatsearch',
method:'post',
header:{
'content-type':'application/x-www-form-urlencoded'//默认值
},
data:{
search:options.search
},
success(res){
that.setData({
list:res.data.fllist,
onff:true
})
}
})

十、富文本处理



利用正则修改收到的数据
wx.request({
url:'https://m.renyiwenzhen.com/xcx_ajax.php?action=cjdetail',
method:'post',
data:{
id:options.id
},
header:{
'content-type':'application/x-www-form-urlencoded'//默认值
},
success(res){
that.setData({
msg:res.data.cjmag.cjxq.replace(/\/g,"")
})
}
})

十一、filter过滤数据
1、在根目录下的utils文件夹里创建一个名为filter.wxs文件2、写入自己要定义的条件
varxb=function(v){
varxingb=''
if(v==1){
xingb="男宝宝"
}
else{
xingb="女宝宝"
}
returnxingb
}
module.exports={
xb:xb
}


3、在页面中引入使用

{{filter.xb(isxb)}}


十二、检测版本更新
app.js
onLaunch:function(){
if(wx.canIUse('getUpdateManager')){
constupdateManager=wx.getUpdateManager()
updateManager.onCheckForUpdate(function(res){
//请求完新版本信息的回调
if(res.hasUpdate){
updateManager.onUpdateReady(function(){
wx.showModal({
title:'更新提示',
content:'新版本已经准备好，是否重启应用？',
success:function(res){
//res:{errMsg:“showModal:ok”,cancel:false,confirm:true}
if(res.confirm){
//新的版本已经下载好，调用applyUpdate应用新版本并重启
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function(){
//新的版本下载失败
wx.showModal({
title:'已经有新版本了哟~',
content:'新版本已经上线啦，请您删除当前小程序，重新搜索打开哟'
})
})
}
})
}
}

十三、点击tab跳转对应的的项目页面
我们经常会遇到这种需求：
点击对应的的tab，这里比如说是A页。

跳转到对应项目的页面，这里比如说是B页。

A页：

详情
建档
产检
分娩


goitem:function(e){
wx.navigateTo({
url:'/pages/item/item?url='+e.target.dataset.url
})
},

B页：

详情
产检
建档
分娩


onLoad:function(options){
varthat=this;
console.log(options.url)
if(options.url==='cj'){
that.setData({
currentTab:'0',
btn:'产检',
set:'cj'
});
}elseif(options.url==='jd'){
that.setData({
currentTab:'1',
btn:'建档',
set:'jd'
});
}else{
that.setData({
currentTab:'2',
btn:'分娩',
set:'fm'
});
}
}
总结
以上所述是小编给大家介绍的微信小程序实用代码段，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序实用代码段(收藏版)

前言

一、tab切换

二、swiper切换

三、图片上传

四、scroll-view滚动页

五、授权登录

六、发送请求

七、标题栏及底部栏

八、navigator

九、加载条

十、富文本处理

十一、filter过滤数据

十二、检测版本更新

十三、点击tab跳转对应的的项目页面

热门推荐

随机推荐