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文件 -->
<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="../add/add" class="addBtn">+</navigator> --><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文件 -->
<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 }) },
