在小程序中使用 Vant

先进入小程序 vant 

 npm 安装

# 通过 npm 安装

npm i @vant/weapp -S --production

 ======================================================================

整理文件夹

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

安装有问题怎么办？

在一个空仓库中拉取指定仓库分支

git clone -b  分支名  仓库地址

wechat-http 模块的使用

安装

npm install wechat-http

utile/http.js

// 导入 http 模块
import http from 'wechat-http'
// 路径
http.baseURL = 'https://live-api.itheima.net'

// 响应拦截器
http.intercept.response = ({statusCode,data,config}) => {

  // 检测接口是否正常返回结果
  if (data.code === 10000) {
    return data.data
  } else{

    // 只保留data数据，其它的都过滤掉
    wx.$toast('失败')
    return Promise.reject(data.message)
  }
}


// 挂载到全局
wx.http = http
// 导出
export default http

 在 app.js 中引入

// app.js

import './utils/http.js'

App({

})

在代码中的应用 ：wechat-http - npm (npmjs.com)

例如：

const res = await wx.http.get('/code',{ mobile:this.data.mobile })

rich-text 使用

在小程序中无法直接解析富文本中包含的 HTML 标签，必须通过内置的小程序组件 rich-text 才能解析富文件，其用法是将富文件的内容赋值给 nodes 属性即可

rich-text 使用示例：

<rich-text nodes="{{'<h1>这里的 h1 标签可以被小程序解析</h1>'}}"></rich-text>

vant 组件中的 van-count-down 标签

 <van-count-down 

        wx:else 

        use-slot 

        time="{{ 5000 }}" 

        bind:change="countDownChange">

          <text>{{ timeData.seconds }}秒后重新获取</text>

</van-count-down>

time:                 指定了倒计时多少毫秒

bind:change    每隔一秒的回调，它会传出来当前的倒计时信息

• van-field双向绑定https://vant-contrib.gitee.io/vant-weapp/#/field%23shuang-xiang-bang-ding

 <van-field 

    model:value="{{mobile}}"

    placeholder="请输入手机号码" 

    type="number" 

    use-button-slot 

    placeholder-style="color: #979797">

  model:value  wx提供的双向绑定

表单验证插件

表单验证插件，可以实现 vue 中的 v-form 功能

npm install wechat-validate

 导入表单验证插件

import   validate   from   'wechat-validate'

将插件注入到页面实例中，并进行校验

Page({
  behaviors: [validate],
  rules: {
    mobile: [
      {required: true, message: '请填写手机号码!'},
      {pattern: /^1[3-8]\d{9}$/, message: '请填写正确的手机号码!'}
    ]

  }

}）

登录-调用接口获取手机验证码

async getSMSCode() {

  // 获取验证结果
  const { valid, message } = this.validate('mobile')

  // 如果验证不合法则不再执行后面的逻辑
  if (!valid) return wx.$toast(message)

  this.setData({ getCodeBtnVisible: false })

  const res = await wx.$http.get('/code', { mobile: this.data.mobile })
  console.log(res)
}