weapp-locally-master项目知识点

“backgroundColor”: “#f8f9fb” 下拉过程中的背景颜色
“/” --------- 源代码所在的根目录
“…/” --------- 源代码上一级目录 上上一级就是…/…/
mode=“aspectFill” 只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
flex-wrap: wrap;必要的时候换行
justify-content: center;元素在主轴方向上居中
align-items: center;侧轴方向上居中
box-sizing: border-box;设置的边框和内边距的值（border和padding）是包含在width内的

微信小程序内边框不重叠：

.grids
  border-top: 1rpx solid #eee;
  border-left: 1rpx solid #eee;

.grids .item 
  border-right: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;

发送请求不再是ajax,没有跨域的概念,请求的地址必须在管理后台添加白名单，域名必须备案，服务器端必须用HTTPS
但是测试使用的话可以点击 详情-本地设置-不检验合法域名、HTTPS证书 勾选上即可

箭头函数中的this是在它声明时捕获它所处作用域中的this。

更好的维护接口可以用全局的定义
app.js中

App({
  config: {
    apiBase: 'https://locally.uieee.com'
  }
})

pages-index-index.js中

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

    fetch('/slides')
      .then(res => {
        this.setData({ slides: res.data })
      })

utils中的fetch.js

const app = getApp()

module.exports = (url, data, method = 'GET', header = {}) => {
  wx.showLoading({ title: 'Loading...' })
  return new Promise((resolve, reject) => {
    wx.request({
      url: app.config.apiBase + url,
      data,
      header,
      method,
      dataType: 'json',
      success: resolve,
      fail: reject,
      complete: wx.hideLoading
    })
  })
}

页面间的跳转：
把view换成navigator,再加上属性url="/pages/list/list?cat={{item.id}}"，传的值通过options拿到
注意：url地址不能为空。 wx:if="{{item.link}}" url="{{item.link}}"，若为空则不显示，下面再写一个没有navigator包裹的image
不能跳转到tabBar的页面。

在image外面加上navigator后，image高度继承就会有问题，所以slides navigator来让外面的高度也为100%

.slides navigator,
.slides image {
  min-width: 100%;
  height: 100%;
}

wx.setNavigationBarTitle({ title: res.data.name })设置标题

第一页商铺信息的加载：用分页排列数据

const params = { _page: ++pageIndex, _limit: pageSize }
fetch(/categories/${this.data.category.id}/shops, params)

上拉加载更多
在list.json里加上一个下拉刷新 "enablePullDownRefresh": true,
页面上拉触底事件触发时距页面底部距离，单位为px。 "onReachBottomDistance": 5

页面上拉触底事件的处理函数：

  onReachBottom () {
    this.loadMore()
  }

    loadMore () {
    let { pageIndex, pageSize, searchText } = this.data
    const params = { _page: ++pageIndex, _limit: pageSize }
    if (searchText) params.q = searchText

    return fetch(`/categories/${this.data.category.id}/shops`, params)
      .then(res => {
        const totalCount = parseInt(res.header['X-Total-Count'])
        const hasMore = this.data.pageIndex * this.data.pageSize < totalCount
        const shops = this.data.shops.concat(res.data)
        this.setData({ shops, totalCount, pageIndex, hasMore })
      })
  }

wx.stopPullDownRefresh()停止当前页面下拉刷新。
用户下拉动作：

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

处理某些图片：

<image wx:for="{{item.images}}" wx:key="*this" src="{{utils.size(item)}}"/>
<wxs module="utils">
  module.exports = {
    size: function (input) {
      return input.replace('w.h', '100.100')
    }
  }
</wxs>

current：当前显示图片的http链接
urls: 需要预览的图片http链接列表

<image src="{{item}}" mode="aspectFill" bindtap="previewHandle" data-src="{{item}}"/>
  previewHandle (e) {
    wx.previewImage({
      current: e.target.dataset.src,
      urls: this.data.shop.images
    })
  }