個人中心
退出
微信小程序?qū)嵱么a段（持續(xù)更新中）
前言
排名不分先后，按自己的習(xí)慣來的。
總結(jié)經(jīng)驗(yàn)，不喜勿噴哦~
一、tab切換
tab1
tab2
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">tab1</text>
<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>頁面1</swiper-item>
<swiper-item>頁面2</swiper-item>
<swiper-item>頁面3</swiper-item>
</swiper>
Page({
data:{
currentTab: 0,
aheight: ‘’
},
// 滑動切換
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: ‘確定要刪除此圖片嗎？’,
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滾動頁
.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)之后，自動獲取用戶信息 */
// 判斷是否授權(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ù)需要做做一個判斷，如果app.js中有和這個回調(diào)函數(shù)，那么就對這個函數(shù)進(jìn)行調(diào)用，并將請求到的結(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’: ‘a(chǎn)pplication/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ā)送請求
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”: “l(fā)ight”,
“navigationBarBackgroundColor”: “#3EC8C8”,
“navigationBarTitleText”: “乳孕呵護(hù)”,
“navigationBarTextStyle”: “white”
}
局部標(biāo)題欄
{
“usingComponents”: {},
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTextStyle”: “black”,
“navigationBarTitleText”: “附近醫(yī)院”
}
全局底部欄
“tabBar”: {
“color”: “#e4e4e4”,
“selectedColor”: “#333”,
“l(fā)ist”: [
{
“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
底部欄沒有的路由 底部欄有的路由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' // 默認(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(/\<p>/g, "<p style='line-height: 24px; font-size:15px;text-align: justify;margin:15px 0;'>")
})
}
})
十一、filter過濾數(shù)據(jù)
1、在根目錄下的utils文件夾里創(chuàng)建一個名為filter.wxs文件
2、寫入自己要定義的條件
var xb=function (v) {
var xingb=’’
if(v==1){
xingb=“男寶寶”
}
else{
xingb=“女寶寶”
}
return xingb
}
module.exports = {
xb:xb
}
3、在頁面中引入使用
{{filter.xb(isxb)}}十二、檢測版本更新
app.js
onLaunch: function () {
if (wx.canIUse(‘getUpdateManager’)) {
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
// 請求完新版本信息的回調(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)上線啦，請您刪除當(dāng)前小程序，重新搜索打開喲’
})
})
}
})
}
}
十三、點(diǎn)擊tab跳轉(zhuǎn)對應(yīng)的的項(xiàng)目頁面
我們經(jīng)常會遇到這種需求：
點(diǎn)擊對應(yīng)的的tab，這里比如說是A頁。
跳轉(zhuǎn)到對應(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ù)……
作者：Vam的金豆之路
主要領(lǐng)域：前端開發(fā)
我的微信：maomin9761
微信公眾號：前端歷劫之路
分類導(dǎo)航