vant组件库

官网:https://vant-ui.github.io/vant/#/zh-CN

基本使用

微信小程序可以使用js函数库。

node_modules依赖包不能直接使用需要工具->构建npm编程微信小程序的依赖才可以使用。

安装lodash

# 安装lodash插件
npm install lodash

# 将npm包构建成小程序npm包
在 工具-构建npm 中构建小程序包

# 在js文件中引入
import lodash from 'lodash'

安装vant

文档：https://vant-ui.github.io/vant-weapp/#/quickstart

# 安装vant插件 小程序专用
npm i @vant/weapp -S --production

# 旧版本需要配置(旧版本)
vim project.config.json

# 将npm包构建成小程序npm包
在 工具-构建npm 中构建小程序包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件

# 在json文件中引入组件注册
{
  "usingComponents": {},
  "navigationStyle":"custom",
  "usingComponents": {
        "van-button": "@vant/weapp/button/index",
        "van-divider": "@vant/weapp/divider/index",
        "van-empty": "@vant/weapp/empty/index"
   },
}

# 如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。
安装 miniprogram-api-typings
通过 npm 安装
npm i -D miniprogram-api-typings

通过 yarn 安装
yarn add -D miniprogram-api-typings

# 在 tsconfig.json 中增加如下配置，以防止 tsc 编译报错


# 在wxml页面中使用组件
所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

vim project.config.json(老版本)

# 将 "./miniprogram" 改为 "./"

vim tsconfig.json

请将path/to/node_modules/@vant/weapp修改为项目的 node_modules 中 @vant/weapp 所在的目录。

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "types": ["miniprogram-api-typings"],
    "paths": {
      "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
    },
    "lib": ["ES6"]
  }
}

组件

勾选框组件

vant组件绑定勾选框单击事件 bind:change="updateChecked",同时绑定自定义属性data-goodsId
定义updateChecked函数,
    获取勾选框的id,获取勾选框的勾选状态updateChecked(event){event.detail} 
	发送 修改商品勾选状态 请求
    再次获取购物车数据

stepper组件

使用vant组件库stepper组件
封装 添加和修改购物车数量 接口api 参数[商品id,数量变化值,祝福语,token]
在stepper组件绑定单击事件 bind:change="updateCount",设置 自定义属性,用于获取 goodsId,使用bind:change事件的回调 event.detail 获取输入的新值newValue,设置 自定义属性,用于获取输入的旧值oldValue,使用新值-旧值得到差值(数量变化值)
发送请求,成功后,再次获取购物车的数据

sheet组件

从边缘弹窗组件

表单组件

van-field组件：表单输入框

单元格组件

van-cell组件：单元格,绑定单击事件, is-Link 属性,use-label-slot使用插槽

弹出层组件

van-popup组件：弹出层,

日历选择卡

van-datetime-picker组件：日历选项卡

单选组件

收集标签 使用van-radio标签的name属性设置 "家"或"公司" 属性值,然后使用van-radio-group设置model:value属性双向绑定 {{tagname}} tagname 取值为 "家""公司"

微信小程序lodash

优化:防抖和节流
防抖：回城(使用防抖效果),最后一次不操作了,等一段时间,才能触发
节流：技能cd,触发了一次后,需要等一段事件后才能,才能再次触发

微信小程序使用lodash的方法,小程序中没有window和dom,不能一下全部引入进来,否则会报错

Uncaught TypeError: Cannot read property 'prototype' of undefined
https://www.02405.com/archives/7466

安装独立的 lodash method package，如 lodash.get
npm install lodash.get lodash.debounce
import get from 'lodash.get'
修改lodash源码
找到 var root = freeGlobal || freeSelf || Function('return this')();
替换为
        var root = {
          Array: Array,
          Date: Date,
          Error: Error,
          Function: Function,
          Math: Math,
          Object: Object,
          RegExp: RegExp,
          String: String,
          TypeError: TypeError,
          setTimeout: setTimeout,
          clearTimeout: clearTimeout,
          setInterval: setInterval,
          clearInterval: clearInterval
        };

input修改购物车数量时,使用lodash,防抖
updateCount:debounce(function(){

})