微信小程序02 -- MINA项目1

项目参考： 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

  
    
  



  
    
    {{item.name}}
  

页面间跳转

1. 页面间的跳转，用navigator标签
2. tab栏中的网址，不能设置为navigator的跳转地址
   index.wxml

  
    
      
    
    
  


  
    
    {{item.name}}
  

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链接列表
})