項目參考： https://github.com/zce/weapp-locally.git

別人寫的項目，自己練習跟著寫一遍，練練手。

配置標簽欄

標簽欄和樣式在app.json的tabBar中配置

標簽欄的樣式

配置公共樣式

公共樣式在app.wxss中配置，小程序中所有的頁面都在page標簽中

背景色樣式

首頁

首頁布局有兩點需要注意

1. 輪播圖片
   圖片大小可能和輪播大小不匹配，在小程序中，通過設置image標簽的mode屬性來改變。

   
   
   
   
2. 九宮格
   九宮格常用flex布局來實現。

發送請求

1. 跨域問題
   微信小程序中沒有跨域，因為跨域是瀏覽器做的事，小程序的“瀏覽器”就是微信，微信沒有跨域限制。
2. 請求的地址必須在管理后臺添加白名單。
3. 域名必須備案，服務端必須采用HTTPS。

首頁功能的實現

1. 封裝fetch.js

module.exports = (url, data) => {
  return new Promise( (resolve, reject) => {
    wx.request({
      url: `https://locally.uieee.com/${url}`,
      success: resolve,
      fail: reject
    })
  })
}

2. 邏輯層發送請求，視圖層綁定數據
   index.js

const fetch = require('../../utils/fetch')

Page({
  /**
   * 頁面的初始數據
   */
  data: {
    slides: [],
    categories: []
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    fetch('slides').then(res => {
      this.setData({ slides: res.data })
    })
    fetch('categories').then(res => {
      this.setData({ categories: res.data})
    })
  },
})

index.wxml

<swiper class='slides'>
  <swiper-item wx:for='{{slides}}' wx:key='id'>
    <image src='{{item.image}}' mode='aspectFill' />
  </swiper-item>
</swiper>

<view class='grids'>
  <view class='item' wx:for="{{categories}}" wx:key="id">
    <image src='{{item.icon}}'></image>
    <text>{{item.name}}</text>
  </view>
</view>

頁面間跳轉

1. 頁面間的跳轉，用navigator標簽
2. tab欄中的網址，不能設置為navigator的跳轉地址
   index.wxml

<swiper class='slides'>
  <swiper-item wx:for='{{slides}}' wx:key='id'>
    <navigator wx:if="{{item.link}}" url='{{item.link}}'>
      <image src='{{item.image}}' mode='aspectFill' />
    </navigator>
    <image wx:else src="{{item.image}}" />
  </swiper-item>
</swiper>
<view class='grids'>
  <navigator url='/pages/list/list?cat={{item.id}}' class='item' wx:for="{{categories}}" wx:key="id">
    <image src='{{item.icon}}'></image>
    <text>{{item.name}}</text>
  </navigator>
</view>

3. 跳轉到對應的頁面時，可以打印options拿取信息

   
   

列表頁

1. wx.setNavigationBarTitle設置標題要在首次渲染后執行
2. 分類信息加載成功后，才能加載商鋪信息
   list.js

const fetch = require('../../utils/fetch')

Page({
  data: {
    category: {},
    shops: []
  },
  onLoad: function (options) {
    fetch(`categories/${options.cat}`).then(res => {
      // 這里不一定是在頁面初次渲染完成（onReady）后執行
      this.setData({category: res.data})
      wx.setNavigationBarTitle({
        title: res.data.name
      })
      // 加載完分類信息之后，才能加載商鋪信息
      return fetch(`categories/${this.data.category.id}/shops`, { _page: 1, _limit: 10})
    })
    .then(res => {
      this.setData({shops: res.data})
    })
  },
  onReady: function () {
    if (this.data.category.name) {
      wx.setNavigationBarTitle({
        title: res.data.name
      })
    }
  },
})

上拉加載

1. onReachBottom頁面上拉觸底函數
2. list.json中可以配置onReachBottomDistance參數

  loadMore () {
    // 判斷是否要加載更多
    if (!this.data.hasMoreFlag) return
    // 加載更多
    let {pageIndex, pageSize} = this.data
    fetch(`categories/${this.data.category.id}/shops`, { _page: ++pageIndex, _limit: pageSize} ).then(res => {
      let contentTotal = parseInt(res.header['X-Total-Count'])
      let hasMoreFlag = pageIndex * pageSize < contentTotal
      this.setData({hasMoreFlag})
      let shops = this.data.shops.concat(res.data)
      this.setData({shops, pageIndex})
    })
  },
  onReachBottom: function () {
    this.loadMore()
  },

下拉刷新

1. list.json中配置enablePullDownRefresh
2. 數據刷新完畢，wx.stopPullDownRefresh可停止刷新動作
   list.js

  onPullDownRefresh: function () {
    this.setData({shops: [], pageIndex: 0, hasMoreFlag: true})
    this.loadMore().then(res => {
      wx.stopPullDownRefresh()
    })
  }

3. loadMore函數返回了promise

  loadMore () {
    // 判斷是否要加載更多
    if (!this.data.hasMoreFlag) return
    // 加載更多
    let {pageIndex, pageSize} = this.data
    return fetch(`categories/${this.data.category.id}/shops`, { _page: ++pageIndex, _limit: pageSize} ).then(res => {
      let contentTotal = parseInt(res.header['X-Total-Count'])
      let hasMoreFlag = pageIndex * pageSize < contentTotal
      this.setData({hasMoreFlag})
      let shops = this.data.shops.concat(res.data)
      this.setData({shops, pageIndex})
    })
  },

詳情頁

1. 要在detail.wxml中調用函數，函數要定義在wxs中，wxs不支持es6
2. 小程序全屏預覽圖片

wx.previewImage({
  current: '', // 當前顯示圖片的http鏈接
  urls: [] // 需要預覽的圖片http鏈接列表
})