写在前面的话：
初次接触小程序，便被它开发的简易与便捷所吸引。总按耐不住对未知的探索欲望，于是乎撸起袖子来干一个吧。附：小程序开发文档
项目介绍
艺龙酒店小程序实践
- 使用
<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:''
})
}
})
小结
初次习作，肯定有很多写得不好的地方，但还是希望能给大家带来一点点帮助；不足之处希望大家多多谅解与指导。也希望和大家在这个有爱的社区中一起成长共同进步，比心。附上：源码地址
