小程序项目

回顾问答

1. WXS（WeiXin Script）有什么限制和特点？

   WXML 是不能直接调用 Page/Componet 中定义的函数，如果想这么做怎么办？

2. 小程序插槽和 Vue 有什么区别？如何实现默认插槽？

3. 小程序网络请求的域名有什么限制吗？能说一下 https 握手过程吗？

4. 页面跳转后互相传递数据如何完成？

   A -> B navigatorTo，可以使用url传参

   B -> A navigatorBack，如何传递参数？

   • A events
   • B getOpenerEventChannel + emit

页面

安装 vant

安装 vant 组件库，https://vant-contrib.gitee.io/vant-weapp/#/quickstart

$ npm i @vant/weapp

安装好 vant 组件库，需要构建 npm 包

• 点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件

小程序npm原理介绍

1. node_modules 目录不会参与编译、上传和打包中，所以小程序想要使用 npm 包必须走一遍 "构建npm" 的过程。构建后会在根目录下生成 miniprogram_npm 目录，里面会存放构建打包后的 npm 包，也就是小程序真正使用的 npm 包
2. 构建打包分为两种：小程序 npm 包会直接拷贝构建文件生成目录下的所有文件到 miniprogram_npm 中；其他 npm 包则会从入口 js 文件开始走一遍依赖分析和打包过程（类似 webpack）
3. 寻找 npm 包的过程和 npm 的实现类似，从依赖 npm 包的文件所在目录开始逐层往外找，直到找到可用的 npm 包或是小程序根目录为止

版本支持

v2.18.1+ 校验更加严格，在控制台会有 warning 警告

动态获取宽高

https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html

获取界面上的节点信息

export default function querySelect(selector) {
  return new Promise((resolve, reject) => {
    const query = wx.createSelectorQuery()
    query.select(selector).boundingClientRect()
    query.exec(res => {
      resolve(res)
    })
  })
}

节流

export default function hythrottle(fn, interval = 200, { leading = true, trailing = false } = {}) {
  let startTime = 0
  let timer = null
  const _throttle = function (...args) {
    return new Promise((resolve, reject) => {
      try {
        // 1.获取当前时间
        const nowTime = new Date().getTime()
        // 对立即执行进行控制
        if (!leading && startTime === 0) {
          startTime = nowTime
        }
        // 2.计算需要等待的时间执行函数
        const waitTime = interval - (nowTime - startTime)
        if (waitTime <= 0) {
          // console.log("执行操作fn")
          if (timer) clearTimeout(timer)
          const res = fn.apply(this, args)
          resolve(res)
          startTime = nowTime
          timer = null
          return
        }
        // 3.判断是否需要执行尾部
        if (trailing && !timer) {
          timer = setTimeout(() => {
            // console.log("执行timer")
            const res = fn.apply(this, args)
            resolve(res)
            startTime = new Date().getTime()
            timer = null
          }, waitTime)
        }
      } catch (error) {
        reject(error)
      }
    })
  }
  _throttle.cancel = function () {
    if (timer) clearTimeout(timer)
    startTime = 0
    timer = null
  }
  return _throttle
}

使用

import querySelect from '../../utils/query-select'
import throttle from '../../utils/throttle'

const querySelectThrottle = throttle(querySelect)
Page({
  data: {
    bannerHeight: 130
  },
  onBannerImageLoad(event) {
    querySelectThrottle('.banner-image').then(res => {
      this.setData({ bannerHeight: res[0].height })
    })
  }
})

状态管理

方案一：

• app.js -> globalData:{} -> getApp().globalData.name

  致命的缺点：数据不是响应式