小程序第三方插件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种类型

默认按钮

主要按钮

信息按钮

 警告按钮

 危险按钮

朴素按钮

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

朴素按钮

朴素按钮

细边框

细边框按钮

细边框按钮

禁用状态

禁用状态

禁用状态

加载状态

列表页添加搜索功能

  

  搜索

  

 

    

 {{item.Title}}          {{item.Section.Name}}     

     

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

+

//搜索框事件 

 search(){ 

   //将页码重新恢复成1   

this.data.pageIndex = 1   

 //数组里面的数据清空    

this.data.subjects = []    

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

this.loadSubjects()  

},

添加页面

  

  

 

  

   

    

添加

  

  

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

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()  },

详情

 

 {{subject.Title}} 

    

{{subject.Section.Name}}    

{{tools.formatTime(subject.Createtime)}}   

     

答案      {{subject.Answer}         

     

解析      {{subject.Desc}}    

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