“本地生活”案例代码

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      swiperList:[],
      jggList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
this.getSwiperList(),
this.getjggList() 
  },
  getSwiperList(){
wx.request({
  url: 'https://www.escook.cn/slides',
  method:'GET',
  success:(res)=>{
    console.log(res)
    this.setData({
      swiperList:res.data
    })
  }
})
  },
  getjggList(){
wx.request({
  url: 'https://www.escook.cn/categories',
  method:'GET',
  success:(res)=>{
    console.log(res)
    this.setData({
      jggList:res.data
    })
  }
})
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

<!--pages/home/home.wxml-->
<swiper indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>
<view class="grid-list">
  <navigator class="grid-item" wx:for="{{jggList}}" wx:key="id" url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </navigator>
</view>
<view class="img-box">
  <image src="..." mode="widthFix"></image>
  <image src="..." mode="widthFix"></image>
</view>

/* pages/home/home.wxss */
swiper{
  height: 350rpx;
}

swiper image{
  width: 100%;
  height: 100%;
}
.grid-list{
  display: flex;
  flex-wrap: wrap;
  border-left: 1rpx solid #efefef;
  border-top: 1rpx solid #efefef;
}
.grid-item{
  width: 33.33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  box-sizing: border-box;
}
.grid-item image{
  width: 60rpx;
  height: 60rpx;
}
.grid-item text{
  font-size: 24rpx;
  margin-top: 10rpx;
}
.img-box{
  display: flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}
.img-box image{
  width: 45%;
}

// pages/message/message.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    count: 0,
    username:'zs',
    country:'CHINA'
  },
  addcount() {
    this.setData({
      count: this.data.count + 1
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({
        count: 0
      }),
      wx.stopPullDownRefresh()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    console.log('触发了上拉触底')
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

{
  "usingComponents": {},
  "enablePullDownRefresh":true,
  "backgroundTextStyle": "dark",
  "onReachBottomDistance": 150
}

<!--pages/message/message.wxml-->
<view>count值是:{{count}}</view>
<button bindtap="addcount">+1</button>
<view>{{m1.toUpper(username)}}</view>
<view>{{m2.tolower(country)}}</view>
<wxs module="m1">
  module.exports.toUpper = function (str) {
    return str.toUpperCase()
  }
</wxs>
<wxs src="../../utils/tools.wxs" module="m2"></wxs>

/* pages/message/message.wxss */
.box{
  height: 2000rpx;
  background-color: blue;
}

// pages/contact/contact.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    colorList: [],
    isloding:false
  },
  getcolors() {
    this.setData({
      isloding:true
    })
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url: 'http://www.escook.cn/api/color',
      method: 'GET',
      success: ({
        data: res
      }) => {
        this.setData({
          colorList: [...this.data.colorList, ...res.data]
        })
      },
      complete: () => {
        wx.hideLoading({})
        this.setData({
          isloding:false
        })
      }
    })
  },
  gotomessage() {
    wx.switchTab({
      url: '/pages/message/message',
    })
  },
  gotoinfo() {
    wx.navigateTo({
      url: '/pages/info/info',
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  gotoinfo2() {
    wx.navigateTo({
      url: '/pages/info/info?name=zs&age=12',
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },
  onLoad: function () {
if(this.data.isloding)return

    this.getcolors()
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.getcolors()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

{
  "usingComponents": {},
  "enablePullDownRefresh":true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}

<!--pages/contact/contact.wxml-->
<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color:rgba({{item}});">{{item}}</view>

/* pages/contact/contact.wxss */
.num-item{
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  line-height: 200rpx;
  margin: 15rpx;
  text-align: center;
  text-shadow: 0rpx 0rpx 5rpx #fff;
  box-shadow: 1rpx 1rpx 6rpx #aaa;
}

// pages/info/info.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    query: {}
  },
  back() {
    wx.navigateBack()
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options);
    this.setData({
      query:options
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})


```java
<!--pages/info/info.wxml-->
<text>pages/info/info.wxml</text>
<navigator open-type="navigateBack" delte="1">后退</navigator>
<button bindtap="back">回退</button>

```java
// pages/shoplist/shoplist.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    query: {},
    shopList: [],
    page: 1,
    pageSize: 10,
    total: 0,
    isloding: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      query: options
    })
    this.getShopList()
  },
  getShopList(cb) {
    this.setData({
      isloding: true
    })
    wx.showLoading({
        title: '数据加载中...',
      }),
      wx.request({
        url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
        method: 'GET',
        data: {
          _page: this.data.page,
          _limit: this.data.pageSize
        },
        success: (res) => {
          // console.log(res)
          this.setData({
            shopList: [...this.data.shopList, ...res.data],
            total: res.header['X-Total-Count'] - 0
          })
        },
        complete: () => {
          wx.hideLoading()
          this.setData({
            isloding: false
          })
          cb && cb()
        }
      })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({
      title: this.data.query.title
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
this.setData({
  page:1,
  shopList:[],
  total:0
})
this.getShopList(()=>{
wx.stopPullDownRefresh()
})
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.page * this.data.pageSize>=this.data.total){
      return wx.showToast({
        title: '数据加载完毕！',
        icon:'none'
      })
    }
    if (this.data.isloding) return
    this.setData({
      page: this.data.page + 1
    })
    this.getShopList()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

{
  "usingComponents": {},
  "onReachBottomDistance": 200,
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}

<!--pages/shoplist/shoplist.wxml-->
<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
  <view class="thumb">
    <image src="{{item.images[0]}}"></image>
  </view>
  <view class="info">
    <text>{{item.name}}</text>
    <text>电话:{{tools.splitPhone(item.phone)}}</text>
    <text>地址:{{item.address}}</text>
    <text>营业时间:{{item.businessHours}}</text>
  </view>
</view>
<wxs src="../../utils/tools.wxs" module="tools"></wxs>

/* pages/shoplist/shoplist.wxss */
.shop-item {
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
border-radius: 15rpx;
  margin: 15rpx;
  box-shadow: 1rpx 1rpx 15rpx #ddd;
}

.thumb image {
  width: 250rpx;
  height: 250rpx;
  display: block;
  margin-right: 15rpx;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}

.shop-title {
  font-weight: bold;
}

function splitPhone(str) {
  if (str.length != 11) return str
  var arr = str.split('')
  arr.splice(3, 0, '-')
  arr.splice(8, 0, '-')
  return arr.join('')
}

module.exports = {
  splitPhone: splitPhone
}

未提及的皆为未改动文件