微信小程序?qū)嵱么a段(持續(xù)更新中)

前言

兩年前的文章，被收藏了368次。挺實(shí)用的，可以看看。排名不分先后，按自己的習(xí)慣來的。總結(jié)經(jīng)驗(yàn)，不喜勿噴哦~

一、tab切換

<view?class="?{{currentTab==0???'select'?:?''}}"?data-current="0"?bindtap="swichNav">?tab1view>
<view?class="?{{currentTab==1???'select'?:?''}}"?data-current="1"?bindtap="swichNav">?tab2view>

Page({
data:{
?//?tab切換??
????currentTab:?0,
},
swichNav:?function?(e)?{
????var?that?=?this;
????if?(this.data.currentTab?===?e.target.dataset.current)?{
??????return?false;
????}?else?{
??????that.setData({
????????currentTab:?e.target.dataset.current
??????})
????}
??},

})

二、swiper切換

?????????<view>
????????????????<text?class="?{{currentTab==0???'select'?:?''}}"?data-current="0"?bindtap="swichNav">tab1text>
????????????????<text?class="?{{currentTab==1???'select'?:?''}}"?data-current="1"?bindtap="swichNav">tab2?text>
????????????????<text?class="?{{currentTab==2???'select'?:?''}}"?data-current="2"?bindtap="swichNav">tab3?text>
?????????view>
??<swiper?current="{{currentTab}}"??bindchange="bindChange"?class='swp'????style="height:?{{aheight?aheight+'px':'auto'}}">
???<swiper-item>頁面1swiper-item>
???<swiper-item>頁面2swiper-item>
???<swiper-item>頁面3swiper-item>
??swiper>

Page({
data:{
?currentTab:?0,
?aheight:?''
},
//?滑動(dòng)切換
??bindChange:?function?(e)?{
????var?that?=?this;
????that.setData({
??????currentTab:?e.detail.current
????});
??},
??//點(diǎn)擊tab切換
??swichNav:?function?(e)?{
????var?that?=?this;
????if?(this.data.currentTab?===?e.target.dataset.current)?{
??????return?false;
????}?else?{
??????that.setData({
????????currentTab:?e.target.dataset.current
??????})
????}
??},
??//?swiper?自適應(yīng)高度
??onLoad:?function?(options)?{
????var?that?=?this
????wx.getSystemInfo({
??????success:?function?(res)?{
????????that.setData({
??????????aheight:?res.screenHeight
????????});
??????}
????})
??},
})

三、圖片上傳

????????<view?class="ovf?img_box">
???????????<block?wx:for="{{img_arr}}"?wx:key="{{item.id}}"?bindtap="del">
???????????????<view?class='logoinfo'?data-index="{{index}}">
???????????????????<view?class="del">
???????????????????????<image?src="http://192.168.2.61/wx_ry/del.png"?mode="widthFix"?bindtap="deleteImage">image>
???????????????????view>
???????????????????<image?src='{{item}}'?mode="widthFix">image>
???????????????view>
???????????block>
????????????<view?class="upload">
?????????????????<image?src="http://192.168.2.61/wx_ry/add.png"?mode="widthFix"?bindtap="upimg">image>
?????????????view>
????????view>

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

page({
data:{
?img_arr:?[]
},
?//?圖片上傳
??upimg:?function?()?{
????var?that?=?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)?{
????var?that?=?this;
????var?index?=?e.currentTarget.dataset.index;?//獲取當(dāng)前長按圖片下標(biāo)
????console.log(that.data.img_arr)
????wx.showModal({
??????title:?'提示',
??????content:?'確定要?jiǎng)h除此圖片嗎？',
??????success:?function?(res)?{
????????if?(res.confirm)?{
??????????console.log('點(diǎn)擊確定了');
??????????that.data.img_arr.splice(index,?1);
????????}?else?if?(res.cancel)?{
??????????console.log('點(diǎn)擊取消了');
??????????return?false;
????????}
????????that.setData({
??????????img_arr:?that.data.img_arr
????????});
??????}
????})
??},
??//?上傳
??upload:?function?()?{
????var?that?=?this
????for?(var?i?=?0;?i?this.data.img_arr.length;?i++)?{
??????wx.uploadFile({
????????url:?'https:***/submit',
????????filePath:?that.data.img_arr[i],
????????name:?'content',
????????formData:?adds,
????????success:?function?(res)?{
??????????console.log(res)
??????????if?(res)?{
????????????wx.showToast({
??????????????title:?'已提交發(fā)布！',
??????????????duration:?3000
????????????});
??????????}
????????}
??????})
????}
????this.setData({
??????formdata:?''
????})
??},
??//?提交
??formSubmit:?function?(e)?{
????console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：',?e.detail.value)
??}
})

四、scroll-view滾動(dòng)頁

?<scroll-view?class="scroll-view_H?"?scroll-x="true"?bindscroll="scroll">
?????<view?class="fxjx_b1"?style="display:?inline-block">
???????<view?class="listb">1view>
?????view>
?????<view?class="fxjx_b1"?style="display:?inline-block">
??????<view?class="listb">2view>
?????view>
?scroll-view>

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

五、授權(quán)登錄

app.js

//app.js
App({
???globalData:?{
?????userInfo:?null,
?????unionid:null,
?????token:''
???},
??onLaunch:?function?()?{
??/*?已授權(quán)之后，自動(dòng)獲取用戶信息?*/
??//?判斷是否授權(quán)
??wx.getSetting({
????success:?(res)?=>?{?//箭頭函數(shù)為了處理this的指向問題?
??????if?(res.authSetting["scope.userInfo"])?{
????????console.log("已授權(quán)");
????????//?獲取用戶信息
????????wx.getUserInfo({
??????????success:?(res)?=>?{?//箭頭函數(shù)為了處理this的指向問題
????????????//?this.globalData.isok=true
????????????this.globalData.token='ok'
????????????var?that?=this
????????????console.log(res.userInfo);?//用戶信息結(jié)果
????????????wx.getStorage({
??????????????key:?'unionid',
??????????????success(res)?{
???????????????that.globalData.unionid=res.data
??????????????}
????????????})
????????????this.globalData.userInfo?=?res.userInfo;
????????????if?(this.userInfoReadyCallback)?{?//當(dāng)index.js獲取到了globalData就不需要回調(diào)函數(shù)了，所以回調(diào)函數(shù)需要做做一個(gè)判斷，如果app.js中有和這個(gè)回調(diào)函數(shù)，那么就對(duì)這個(gè)函數(shù)進(jìn)行調(diào)用，并將請(qǐng)求到的結(jié)果傳到index.js中
??????????????this.userInfoReadyCallback(res.userInfo);
????????????}
??????????}
????????})
??????}
??????else{
????????console.log("未授權(quán)");
????????wx.removeStorage({
??????????key:?'unionid'
????????})
??????}
????}
??})
??}
})

wxml

???????<button?open-type="getUserInfo"?lang="zh_CN"?bindgetuserinfo="onGotUserInfo"?class="btn"?data-url='../yzzs/yzzs'>
???????????防疫針助手
???????button>

index.js

//?pages/index/index.js
const?app?=?getApp()
Page({
??data:?{
????token:''
??},
??onGotUserInfo:?function?(e)?{
????var?that?=?this
????if?(this.data.token?!=?'ok'?&&?app.globalData.token?!=?'ok')?{
??????wx.getSetting({
????????success:?(res)?=>?{?//箭頭函數(shù)為了處理this的指向問題?
??????????if?(res.authSetting["scope.userInfo"])?{
????????????wx.login({
??????????????success:?function?(data)?{
????????????????console.log('獲取登錄 Code：'?+?data.code)
????????????????var?postData?=?{
??????????????????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
??????})
????}
??}
})

六、發(fā)送請(qǐng)求

??????????wx.request({
????????????url:?'https://m.renyiwenzhen.com/xcx_ajax.php?action=babylist',?//僅為示例，并非真實(shí)的接口地址
????????????method:?'post',
????????????data:?{
??????????????unionid:?uni
????????????},
????????????header:?{
??????????????'content-type':?'application/x-www-form-urlencoded'?//?默認(rèn)值
????????????},
????????????success(res)?{
??????????????//?console.log(uni)
??????????????console.log(res.data)
??????????????that.setData({
????????????????list:?res.data.bblist
??????????????})
????????????}
??????????})

七、標(biāo)題欄及底部欄

全局標(biāo)題欄

??"window":?{
????"backgroundTextStyle":?"light",
????"navigationBarBackgroundColor":?"#3EC8C8",
????"navigationBarTitleText":?"乳孕呵護(hù)",
????"navigationBarTextStyle":?"white"
??}

局部標(biāo)題欄

{
??"usingComponents":?{},
??"navigationBarBackgroundColor":?"#fff",
??"navigationBarTextStyle":?"black",
??"navigationBarTitleText":?"附近醫(yī)院"
}

全局底部欄

?"tabBar":?{
????"color":?"#e4e4e4",
????"selectedColor":?"#333",
????"list":?[
??????{
????????"pagePath":?"pages/index/index",
????????"text":?"發(fā)現(xiàn)",
????????"iconPath":?"./images/find.png",
????????"selectedIconPath":?"./images/finded.png"
??????},
??????{
????????"pagePath":?"pages/his/his",
????????"text":?"醫(yī)院",
????????"iconPath":?"./images/his.png",
????????"selectedIconPath":?"./images/hised.png"
??????},
??????{
????????"pagePath":?"pages/stu/stu",
????????"text":?"經(jīng)驗(yàn)",
????????"iconPath":?"./images/stu.png",
????????"selectedIconPath":?"./images/stued.png"
??????},
??????{
????????"pagePath":?"pages/my/my",
????????"text":?"我的",
????????"iconPath":?"./images/my.png",
????????"selectedIconPath":?"./images/myed.png"
??????}
????]
??}

八、navigator

1、wxml

<navigator?url="/pages/hishome/hishome"?open-type="navigate"??hover-class="none">??
底部欄沒有的路由
navigator>
<navigator?open-type="switchTab"?url="/pages/his/his"??hover-class="none">
底部欄有的路由
navigator>

2、js

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

九、加載條

<loading?hidden="{{onff}}">加載中loading>
<view>頁面view>

加載完成true

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

十、富文本處理

????<view?class="txt">
????????<rich-text?nodes="{{msg}}"?>rich-text>
????view>

利用正則修改收到的數(shù)據(jù)

????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'?//?默認(rèn)值
??????},
??????success(res)?{
????????that.setData({
??????????msg:?res.data.cjmag.cjxq.replace(/\
/g,?"")
????????})
??????}
????})

十一、filter過濾數(shù)據(jù)

1、在根目錄下的utils文件夾里創(chuàng)建一個(gè)名為filter.wxs文件 2、寫入自己要定義的條件

var?xb=function?(v)?{
????var?xingb=''
????if(v==1){
???????xingb="男寶寶"
????}
????else{
????????xingb="女寶寶"
????}
????return?xingb
}
module.exports?=?{
????xb:xb
}

3、在頁面中引入使用

<wxs?src="../../utils/filter.wxs"?module="filter"?/>
<view><text>{{filter.xb(isxb)}}text>view>

十二、檢測(cè)版本更新

app.js

??onLaunch:?function?()?{
?if?(wx.canIUse('getUpdateManager'))?{
??????const?updateManager?=?wx.getUpdateManager()
??????updateManager.onCheckForUpdate(function?(res)?{
????????//?請(qǐng)求完新版本信息的回調(diào)
????????if?(res.hasUpdate)?{
??????????updateManager.onUpdateReady(function?()?{
????????????wx.showModal({
??????????????title:?'更新提示',
??????????????content:?'新版本已經(jīng)準(zhǔn)備好，是否重啟應(yīng)用？',
??????????????success:?function?(res)?{
????????????????//?res:?{errMsg:?“showModal:?ok”,?cancel:?false,?confirm:?true}
????????????????if?(res.confirm)?{
??????????????????//?新的版本已經(jīng)下載好，調(diào)用?applyUpdate?應(yīng)用新版本并重啟
??????????????????updateManager.applyUpdate()
????????????????}
??????????????}
????????????})
??????????})
??????????updateManager.onUpdateFailed(function?()?{
????????????//?新的版本下載失敗
????????????wx.showModal({
??????????????title:?'已經(jīng)有新版本了喲~',
??????????????content:?'新版本已經(jīng)上線啦，請(qǐng)您刪除當(dāng)前小程序，重新搜索打開喲'
????????????})
??????????})
????????}
??????})
????}
}
????

十三、點(diǎn)擊tab跳轉(zhuǎn)對(duì)應(yīng)的的項(xiàng)目頁面

我們經(jīng)常會(huì)遇到這種需求：

點(diǎn)擊對(duì)應(yīng)的的tab，這里比如說是A頁。跳轉(zhuǎn)到對(duì)應(yīng)項(xiàng)目的頁面，這里比如說是B頁。A頁：

????????<view?class="project_nab?ovf">
????????????????<view?class="on">?詳情?view>
????????????????<view?class="project_item"?bindtap="goitem"?data-url='jd'>建檔view>
????????????????<view?class="project_item"??bindtap="goitem"??data-url='cj'>產(chǎn)檢view>
????????????????<view?class="project_item"?bindtap="goitem"??data-url='fm'>分娩view>
????????????view>

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

B頁：

?????<view?class="top1?ovf">
????????????????<view?class=""?><navigator?url="/pages/hishome/hishome"?open-type="navigate">詳情navigator>view>
????????????????<view?class="?{{currentTab==0???'select'?:?''}}"?data-current="0"?bindtap="swichNav">?產(chǎn)檢?view>
????????????????<view?class="?{{currentTab==1???'select'?:?''}}"?data-current="1"?bindtap="swichNav">?建檔?view>
????????????????<view?class="?{{currentTab==2???'select'?:?''}}"?data-current="2"?bindtap="swichNav">?分娩?view>
?????view>

??onLoad:?function?(options)?{
????var?that?=?this;
????console.log(options.url)
????if?(options.url?===?'cj')?{
??????that.setData({
????????currentTab:?'0',
????????btn:?'產(chǎn)檢',
????????set:?'cj'
??????});
????}?else?if?(options.url?===?'jd')?{
??????that.setData({
????????currentTab:?'1',
????????btn:?'建檔',
????????set:?'jd'
??????});
????}?else?{
??????that.setData({
????????currentTab:?'2',
????????btn:?'分娩',
????????set:?'fm'
??????});
????}
??}

未完待續(xù)……

關(guān)于作者

作者：Vam的金豆之路。曾獲得2019年CSDN年度博客之星稱號(hào)，CSDN博客、掘金技術(shù)社區(qū)訪問量累計(jì)已超過二百萬。

公眾號(hào)：前端歷劫之路，專注于前端技術(shù)分享與學(xué)習(xí)，謝謝你關(guān)注我。學(xué)習(xí)前端技術(shù)就如同經(jīng)歷一場場劫難，只有堅(jiān)持、努力才會(huì)成為自己心中的大神！共勉～