小程序第三方插件Vant组件库

1.初始化一个包 npm init

2.安装第三方包 npm i @vant/weapp -S --production

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

3.修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

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

"setting":{..."packNpmManually":true,"packNpmRelationList":[{"packageJsonPath":"./package.json","miniprogramNpmDistDir":"./miniprogram/"}]}

4.构建使小程序可以使用第三方软件

操作步骤：

点击工具=>构建npm

并勾选本地设置-->使用npm模块选项

在.json文件中配置使用的组件，可以在全局中配置，也可以在单独页面中配置。

"usingComponents": {

"van-field": "@vant/weapp/field/index",

"van-button": "@vant/weapp/button/index",

"van-popup": "@vant/weapp/popup/index",

"van-picker": "@vant/weapp/picker/index"

},

基础组件

Button按钮：5种类型

<van-button type="default">默认按钮</van-button

<van-button type="primary">主要按钮</van-button>

<van-button type="info">信息按钮</van-button>

<van-button type="warning">警告按钮</van-button>

<van-button type="danger">危险按钮</van-button>

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-button plain type="primary">朴素按钮</van-button>

<van-button plain type="info">朴素按钮</van-button>

细边框

<van-button plain hairline type="primary">细边框按钮</van-button>

<van-button plain hairline type="info">细边框按钮</van-button>

禁用状态

<van-button disabled type="primary">禁用状态</van-button>

<van-button disabled type="info">禁用状态</van-button>

加载状态

<van-button loading type="primary" />

<van-button loading type="primary" loading-type="spinner" />

<van-button loading type="info" loading-text="加载中..." />

列表页添加搜索功能

<wxs module="tools" src="../../wxs/filter.wxs"></wxs>



<view class="search">

<input model:value="{{title}}" class="txt" placeholder="请输入搜索关键字" /> <view class="btn" bindtap= "search">搜索</view>

</view>

<view class="order">



<navigator url="../detail/detail?id={{item.Id}}" class="item" wx:for="{{subjects}}" wx:key="index">

<view class="title">{{item.Title}}</view>    <view class="section">      <view>{{item.Section.Name}}</view>



<view>{{tools.formatTime(item.Createtime)}}</view>    </view>

</navigator></view>

<navigator url="../addVant/addVant" class="addBtn">+</navigator>

//搜索框事件

search(){

   //将页码重新恢复成1

this.data.pageIndex = 1

//数组里面的数据清空

this.data.subjects = []

//调用加载课程题目数组信息的方法

this.loadSubjects()

},

添加页面

<view class="add">

<van-field label="标题:" title-width="80rpx" model:value="{{ title }}" placeholder="请输入标题" border />

<van-field label="分类:" title-width="80rpx" model:value="{{ section_name }}" placeholder="请选择分类" border readonly bindtap="openPopup" />

<van-field label="答案:" title-width="80rpx" model:value="{{ answer }}" placeholder="请输入答案" border  type="textarea" autosize custom-style="height:160rpx" />

<van-field label="解析:" title-width="80rpx" model:value="{{ desc }}" placeholder="请输入解析" border  type="textarea" autosize custom-style="height:160rpx" />

<view class="btn">

<van-button color="#369" icon="plus" loading="{{isLoading}}" bindclick="addSubject" size="small" type="primary">添加</van-button> </view></view>



<van-popup position="bottom" show="{{ isShow }}"  bind:close="closePopup">



<van-picker title="请选择分类" show-toolbar value-key="Name" columns={{ sections }}" bind:cancel="onCancel"  bind:confirm="onConfirm" default-index="{{pickeActiveIndex}}" /></van-popup>

//加载课程分类信息的方法

async loadSections(){    //发生请求获取所有的课程分类    let data = await wx.$get('Section/GetSections')

// 更新数据后台，重新渲染页面    this.setData({      sections: data    })  },

//添加题目的方法

async addSubject(){    //非空验证是否，直接返回

if(!this.checkInput()) return;

//开启按钮loading状态    this.setData({      isLoading:true    })

//获取data里面的指定数据    let {title,section_id,answer,desc} = this.data

//发生请求，执行添加

let r = await wx.$post('Subject/AddSubject',{      title,section_id,answer,desc    })

//判断是否添加成功

if(r){      wx.$msg('添加成功')      //调用清空方法      this.clear()    }  },

// 非空验证  checkInput(){    if(!this.data.title){      wx.$msg('请输入标题')    }

else if(this.data.section_id==0){      wx.$msg('请选择分类')    }

else if (!this.data.answer){      wx.$msg('请输入答案')    }

else{ return true    }    return false  },

// 清空数据的方法  clear(){

this.setData({ //清空表单数据 title:'', section_id:0, section_name:'', answer:'', desc:'',

//恢复按钮真正状态      isLoading:false,      pickeActiveIndex:0    })  },

//打开弹出层方法

openPopup(){    this.setData({      //打开弹出层      isShow:true    })  },

//关闭弹出层方法

closePopup(){    this.setData({      //关闭弹出层      isShow:false    })  },

//选择器的取消方法

onCancel(){    //调用关闭弹出层的方法    this.closePopup()  },

//选择器的确认方法

onConfirm(e){    let {detail:{value:{Id,Name},index}} = e

//获取选择器传过来的数据

this.setData({ section_id:Id,section_name:Name,pickeActiveIndex:index    })

//调用关闭弹出层的方法

this.closePopup()  },

详情

<wxs module="tools" src="../../wxs/filter.wxs"></wxs><view class="detail">

<view class="title">{{subject.Title}}</view>

<view class="section">

<view>{{subject.Section.Name}}</view>

<view>{{tools.formatTime(subject.Createtime)}}</view>  </view>

<view>

<view class="title">答案</view>      <view>{{subject.Answer} </view>    <view>

</view>

<view class="title">解析</view>      <view>{{subject.Desc}}</view>    </view>

</view>

onLoad: function (options) {

//获取题目的id    let {id} = options    this.loadSubject(id)  },

//加载完整题目信息的方法

async loadSubject(id){

let r = await wx.$get('Subject/GetSubject',{id})

//更新页面显示

this.setData({      subject:r    })  },