当前位置：首页>编程日记>正文

小程序这件事撸起袖子加油干

编程日记 2023/10/18 11:34:13

本站寻求有缘人接手，详细了解请联系站长QQ1493399855

写在前面的话：

初次接触小程序，便被它开发的简易与便捷所吸引。总按耐不住对未知的探索欲望，于是乎撸起袖子来干一个吧。附：小程序开发文档

项目介绍

艺龙酒店小程序实践

使用<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:''})}
})
复制代码