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

写在前面的话：

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

项目介绍

艺龙酒店小程序实践

• 使用<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:''
    })
  }
})

小结

初次习作，肯定有很多写得不好的地方，但还是希望能给大家带来一点点帮助；不足之处希望大家多多谅解与指导。也希望和大家在这个有爱的社区中一起成长共同进步，比心。附上：源码地址