Vant组件库

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. 列表页添加搜索功能

 

  

 

   

{{item.Title}}   

{{item.Section.Name}}

{{filter.formatTime(item.Createtime)}}

+

//搜索框的搜索方法 onSearch(){

this.data.pageIndex = 1 //页码重新设置为1

this.getDataList() //调用获取数据的方法

},

//搜索框的清空方法

onClear(){

//清空title

this.setData({

title:''

})

this.data.pagesIndex = 1 //页码重新设置为1

this.getDataList() //调用获取数据的方法

}

3. 重构添加页面

 

   

    model:value="{{ title }}"

    placeholder="请输入题目" required />

 

 

   

    model:value="{{ answer }}"

    placeholder="请输入答案" required />

 

 

   

    model:value="{{ section_name }}"

    placeholder="请选择分类" bindtap="showPopup" required />

 

 

   

    model:value="{{ desc }}"

    placeholder="请输入答案" />

 

 

    添加题目

 

 

  show-toolbar

  title="请选择分类" value-key="Name"

  columns="{{ typeList }}"

  bind:cancel="onClose"

  bind:confirm="onConfirm"

  />

//获取分类信息的方法

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. 重构详情页

{{data.Title}}

答案

{{data.Answer}} 解析

{{data.Desc}}

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