1. 下载Vant Weapp
步骤一：通过 npm 安装
npm i @vant/weapp -S --production
步骤二：修改 app.json
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
步骤三：修改 project.config.json
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
"setting": {
?"packNpmManually": true,
"packNpmRelationList": [
{ "packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/" } ]?
}
注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可。
步骤四：构建 npm 包
点击工具-->构建npm
并勾选本地设置-->使用npm模块选项
在.json文件中配置使用的组件，可以在全局中配置，也可以在单独页面中配置。
"usingComponents": { "van-field": "@vant/weapp/field/index", "van-picker": "@vant/weapp/picker/index", "van-popup": "@vant/weapp/popup/index", "van-button": "@vant/weapp/button/index", "van-divider": "@vant/weapp/divider/index", "van-empty": "@vant/weapp/empty/index", "van-search": "@vant/weapp/search/index" }
2. 列表页添加搜索功能
?<!-- 导入wxs文件 -->
?<wxs src="../../wxs/filter.wxs" module="filter" />?
?<view class="container">
<van-search model:value="{{ title }}" placeholder="请输入搜索关键词" bind:search="onSearch" bind:clear="onClear" />? ?
<navigator url="../vantdetails/vantdetails?id={{item.Id}}" class="data" wx:for="{{dataList}}" wx:key="index">
<view class="title">{{item.Title}}? ?</view>
<view class="flex j-s a-c desc">
<view>{{item.Section.Name}}</view>
<view>{{filter.formatTime(item.Createtime)}}</view>
</view> </navigator> </view>
<view bindtap="click" class="btn_add">+</view>
//搜索框的搜索方法 onSearch(){
this.data.pageIndex = 1 //页码重新设置为1
this.getDataList() //调用获取数据的方法
},
//搜索框的清空方法
onClear(){
//清空title
this.setData({
title:''
})
this.data.pagesIndex = 1 //页码重新设置为1
this.getDataList() //调用获取数据的方法
}
3. 重构添加页面
<view class="content">
? <view class="item">
? ? <van-field label="题目" title-width="80rpx"
? ? model:value="{{ title }}"
? ? placeholder="请输入题目" required />
? </view>
? <view class="item">
? ? <van-field label="答案" title-width="80rpx" type="textarea" autosize custom-style="height:150rpx"
? ? model:value="{{ answer }}"
? ? placeholder="请输入答案" required />
? </view>
? <view class="item">
? ? <van-field label="分类" title-width="80rpx" readonly
? ? model:value="{{ section_name }}"
? ? placeholder="请选择分类" bindtap="showPopup" required />
? </view>
? <view class="item">
? ? <van-field label="解析" title-width="80rpx" type="textarea" autosize custom-style="height:150rpx"
? ? model:value="{{ desc }}"
? ? placeholder="请输入答案" />
? </view>
? <view class="item flex j-c">
? ? <van-button loading="{{loading}}" loading-text="添加中..." type="primary" block round icon="plus" bindtap="click">添加题目</van-button>
? </view>
</view>
<van-popup position="bottom" show="{{ show }}" bind:close="onClose">
? <van-picker
? show-toolbar
? title="请选择分类" value-key="Name"
? columns="{{ typeList }}"
? bind:cancel="onClose"
? bind:confirm="onConfirm"
? />
</van-popup>
//获取分类信息的方法
async getTypeList(){
? ? let typeList = await wx.$get('/Section/GetSections')
? ? this.setData({
? ? ? ? typeList
? ? })
},
//显示弹出层方法
showPopup() {
? ? this.setData({ show: true });
},
//关闭弹出层方法
onClose() {
? ? this.setData({ show: false });
},
//选择器确定方法
onConfirm(event) {
? ? const { value } = event.detail;
? ? //设置分类编号和分类名称
? ? this.setData({
? ? ? ? section_id:value.Id,
? ? ? ? section_name:value.Name,
? ? ? ? show:false
? ? })
},
//添加按钮点击事件
async click(){
? ? //非空验证
? ? if(!this.data.title || !this.data.section_id || !this.data.answer)
? ? ? ? return wx.$msg('请输入完整信息！')
? ? //请求后台，添加题目信息
? ? this.setData({
? ? ? ? loading:true
? ? })
? ? let res = await wx.$post('/Subject/AddSubject',{
? ? ? ? title:this.data.title,
? ? ? ? answer:this.data.answer,
? ? ? ? desc:this.data.desc,
? ? ? ? section_id:this.data.section_id
? ? })
? ? if(res){
? ? ? ? wx.$msg('添加成功！')
? ? ? ? this.setData({
? ? ? ? ? ? loading:false
? ? ? ? })
? ? ? ? this.clear()? //清空数据
? ? }
},
//清空方法
clear(){
? ? this.setData({
? ? ? ? title:'',
? ? ? ? answer:'',
? ? ? ? desc:'',
? ? ? ? section_id:0,
? ? ? ? section_name:''
? ? })
}
4. 重构详情页
<view class="content" wx:if="{{data}}">
<view class="title">{{data.Title}}</view>
<van-divider fontSize="15" contentPosition="left" textColor="#248067" borderColor="#248067">答案</van-divider>
<view class="answer">{{data.Answer}}</view> <van-divider fontSize="15" contentPosition="left" textColor="#248067" borderColor="#248067">解析</van-divider>
<view class="desc">{{data.Desc}}</view>
</view>
<van-empty wx:else description="暂无数据" />
onLoad: function (options) {
if(Object.keys(options).length>0){ this.data.id = options.id
}
//调用获取数据的方法
this.getData()
},
//获取数据的方法
async getData(){
//根据题目的id，获取题目信息
let data = await wx.$get('/Subject/GetSubject',{id:this.data.id})
this.setData({ data })
},
onPullDownRefresh: function () {
//重新获取详情信息
//调用获取数据的方法
this.getData()
//1秒后关闭下拉刷新
setTimeout(() => { wx.stopPullDownRefresh()
}, 1000); }