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); }
