寫在前面的話：
初次接觸小程式，便被它開發的簡易與便捷所吸引。總按耐不住對未知的探索慾望，於是乎擼起袖子來幹一個吧。附：小程式開發文件
專案介紹
藝龍酒店小程式實踐
- 使用
<swiper>標籤實現網頁輪播圖的效果，同時可以內嵌一些跳轉美觀而不失實用。 - 首頁介面繫結，四個tabbar，點選更換樣式並進入不同的查詢介面。
在<block>中進行wx:for迴圈得到四個介面的文字和圖片，同時為每個tabbar繫結一個id值進行區分，在三元運算子中繫結的id與js中data中建立的currentTab進行比較，值相等則為盒子新增一個active類，在wxss中提前設定active的區別樣式，就可以實現點選切換到不同的樣式，同時給下面的時間地點選擇介面繫結一個與tabbar對應的id，實現上下介面繫結，最後用同樣的方法設定下面介面的區別樣式。
<view class="swiper-tab">
<block wx:for="{{tabbars}}" wx:key="index">
<view class="swiper-tab-item {{currentTab == item.currentTab?'active':''}}" data-currentTab="{{item.currentTab}}" bindtap="clickTab">
<image src="{{currentTab==item.currentTab?item.hoverimage:item.image}}" />
<text>{{item.text}}</text>
</view>
</block>
</view>
複製程式碼- 利用騰訊地圖API對位置資訊進行操作，通過
wx.setStorage和wx.getStorage實現資料本地快取。
點選目的地進入目的地選擇介面（參考程式碼），然後給每一個城市名新增一個bindtap事件，當城市名被點選時將城市名通過setStorage存入本地快取，然後通過wx.navigateBack跳回（跳轉問題坑多多還需要好好理解可參考脫坑）選擇介面並在選擇介面的data中新增一個city資料通過wx.getStorage得到城市資訊並通過this.setData將資訊繫結到首頁（選擇時間介面同理實現不再贅述），在首頁點選“我的位置”就會呼叫wx.getLocation方法獲取當地的位置資訊並覆蓋city的值（使用地圖API前要先引入騰訊地圖引入地圖與使用參考文件）。
//城市選擇介面點選城市
cityTap(e) {
const val = e.currentTarget.dataset.val || '',
types = e.currentTarget.dataset.types || '',
Index = e.currentTarget.dataset.index || '',
that = this;
let city = this.data.citySel;
switch (types) {
case 'locate':
//定位內容
city = this.data.locateCity;
break;
case 'national':
//全國
city = '全國';
break;
case 'new':
//熱門城市
city = val;
break;
case 'list':
//城市列表
city = val.cityName;
break;
}
if (city) {
wx.setStorage({
key: 'city',
data: city
})
} else {
console.log('還沒有獲取城市名');
this.getLocate();
}
setTimeout(() => {
wx.navigateBack({
delta: 1, // 回退前 delta(預設為1) 頁面
})
}, 1000);
},
//首頁獲取快取中城市名
onShow(e) {
var that = this;
wx.getStorage({
key: 'city',
success: function(res){
let city = res.data;
that.setData({
city
})
},
fail: function(res) {
that.getLocation();
}
}) ;
},
//獲取定位
getLocation: function(e) {
var that = this;
wx.getLocation({
type: 'wgs84', // 預設為 wgs84 返回 gps 座標，gcj02 返回可用於 wx.openLocation 的座標
success: function (res) {
//2、根據座標獲取當前位置名稱，顯示在頂部:騰訊地圖逆地址解析
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function (res) {
// console.log(res)
var address = res.result.formatted_addresses.recommend;
that.setData({
city:address
})
}
})
}
})
},
複製程式碼- 點選查詢酒店進入酒店詳情頁並進行搜尋
首先在input框上面繫結bindinput事件獲取輸入值，然後利用地圖APIgetSuggestion()方法獲得提示的值，再將值進行篩選判斷資料的category屬性是否為賓館酒店，如果是則用一個新陣列存放酒店列表值（沒有酒店資訊的API，暫時只想到這個拙略的方法，所以酒店圖片都是相同的），最後將獲得的酒店資訊驅動到酒店列表介面。
//獲取輸入值
searchInput(e) {
const searchInput = e.detail.value;
this.setData({
searchInput
})
},
//將輸入得到的結果顯示到介面
search(e) {
const searchInput = this.data.searchInput;
const city = this.data.city;
var that = this;
demo.getSuggestion({
region: city,
keyword: searchInput + '酒店',
region_fix: 1,
plicy: 0,
success: (res) => {
wx.setStorage({
key: 'hotelList',
data: res.data,
})
let hotelArr = []
for (let i = 0; i < res.data.length; i++) {
if (res.data[i].category.indexOf('酒店賓館') != -1) {
res.data[i].category = res.data[i].category.slice(5);
res.data[i].address = res.data[i].address.slice(10);
hotelArr.push(res.data[i])
}
}
that.setData({
hotelList: hotelArr
})
}
})
},
複製程式碼- 篩選列表的製作，多個資料繫結，EasyMock偽造資料
這個篩選列表利用彈性佈局，將頁面分配好，然後在右邊利用scroll-view實現滾動（這裡有一個小坑，scroll必須設定高度才能實現滾動條效果），由於資料量比較多，可以通過偽造資料的方法獲取程式碼會看起來簡潔很多。
偽造資料地址用了很多次感覺挺方便的，也推薦給大家。
//遠端資料請求
onLoad: function (options) {
wx.request({
url: 'https://www.easy-mock.com/mock/5b1ca1e041e3435437657ce0/filter/filter#!method=get',
success: function (res) {
that.setData({
filters: res.data.data
})
},
fail: function () {
console.log('資料請求失敗')
},
})
}
複製程式碼wx:for大法好，少寫了很多頁面程式碼，wx.showModal彈出框，資訊提示，完好的使用者體驗。- 繫結手機號以及換綁
點選進入繫結手機號碼介面，輸入手機號碼獲得6位隨機驗證碼繫結手機號，再次進入介面時根據wx:if和wx:else進入不同的介面，如果已經繫結手機則提示已繫結且提供換綁功能。
Page({
data: {
inputPhone:'',
identifyCodeInput: 0,
identifyCause:0,
msg:'獲取驗證碼',
time: 60,
hasBindPhone: false,
disabled: true
},
//獲取輸入的手機
teleInput(e) {
let inputPhone = e.detail.value;
this.setData({
inputPhone
})
},
//獲取驗證碼
getIdentifyCode(e) {
var that = this;
const z = /^[1][3,4,5,7,8][0-9]{9}$/;
let inputPhone = this.data.inputPhone;
let msg = this.data.mes;
let time = this.data.time;
if(z.test(inputPhone)) {
var num="";
for(var i=0;i<6;i++)
{
num+=Math.floor(Math.random()*10);
}
num = Number(num);
wx.showModal({
title: '提示',
content: '驗證碼為：' + num,
})
that.setData({
identifyCause: num
})
wx.setStorage({
key: 'IdentifyCode',
data: num,
})
wx.showToast({
title: '驗證碼已傳送',
icon: 'success',
duration: 1000
})
setInterval(function() {
if(time >0) {
time --;
that.setData({
msg: time + '後重新傳送'
})
if(time === 0){
that.setData({
msg: '重新傳送',
time: 60
})
}
}
},1000)
}else {
wx.showModal({
title: '提示',
content: '請輸入正確的手機號碼',
})
}
},
//獲取驗證碼輸入值
identifyCodeInput(e) {
const value = Number(e.detail.value);
this.setData({
identifyCodeInput:value,
disabled: false
})
},
//校驗驗證碼
check(e) {
var that = this;
const identifyCodeInput = this.data.identifyCodeInput;
const identifyCause = that.data.IdentifyCause;
const phoneNum = this.data.inputPhone;
wx.getStorage({
key: 'IdentifyCode',
success:function(res) {
that.setData({
identifyCause: res.data
})
}
})
if(identifyCodeInput === that.data.identifyCause) {
wx.showToast({
title: '手機號繫結成功',
icon: 'success',
duration: 1000
})
this.setData({
hasBindPhone: true,
})
wx.setStorage({
key: 'phoneNum',
data: phoneNum,
})
wx.switchTab({
url: '../user/user',
})
}else {
wx.showModal({
title: '提示',
content: '驗證碼輸入錯誤,請重新輸入',
success: function(res) {
}
})
}
},
//檢查使用者是否繫結手機號
onLoad(options) {
wx.getStorage({
key: 'phoneNum',
success:(res)=>{
if(res.data)
console.log(res)
this.setData({
inputPhone:res.data,
hasBindPhone: true
})
},
})
},
//手機號換綁
changePhone() {
this.setData({
hasBindPhone: false,
inputPhone:''
})
}
})
複製程式碼小結
初次習作，肯定有很多寫得不好的地方，但還是希望能給大家帶來一點點幫助；不足之處希望大家多多諒解與指導。也希望和大家在這個有愛的社群中一起成長共同進步，比心。附上：原始碼地址