三、发起请求
1. scroll-view
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
scroll-x：允许横向滚动。
scroll-y：允许纵向滚动。
<!-- 导入wxs文件 --><wxssrc="../../wxs/filter.wxs"module="filter"/><viewclass="container"><scroll-viewscroll-yclass="left"><viewclass="item {{activeIndex===index?'active':''}}"wx:for="{{typeList}}"wx:key="index"bindtap="clickType"data-index="{{index}}"data-id="{{item.Id}}">{{item.Name}}</view></scroll-view><scroll-viewscroll-yclass="right"><viewclass="data"wx:for="{{dataList}}"wx:key="index"><viewclass="title">{{item.Title}}</view><viewclass="flex j-s a-c"style="padding:4px0;color:#333333"><view>{{item.Section.Name}}</view><view>{{filter.formatTime(item.Createtime)}}</view></view></view></scroll-view></view>
2. 发起请求
//显示Loadingwx.showLoading({title:'加载中',})//wx对象发送ajax请求的方法wx.request({method:'GET',url:'https://bingjs.com:8002/Subject/GetSubjects',data:{section_id:id},//成功后的回调success:({data})=>{//将获取到数据数据赋值给对应的数组，并更新到页面this.setData({dataList:data})},//完成后的回调complete:()=>{//关闭Loadingwx.hideLoading()}})
3. 封装方法
添加config配置
//导出请求地址根路径exportconstBASE_URL='https://bingjs.com:8002'
添加utils/request.js文件
//导入请求地址根路径import{BASE_URL}from'../config/const'//ajax请求的方法exportlet$request=function(method,url,data){returnnewPromise((resolve,reject)=>{//显示Loadingwx.showLoading({title:'加载中',})//wx对象发送ajax请求的方法wx.request({method,url:BASE_URL+url,data,//成功后的回调success:({data})=>{resolve(data)},//失败后的回调fail:(err)=>{reject(err)},//完成后的回调complete:()=>{//关闭Loadingwx.hideLoading()}})})}//get-ajax请求的方法exportlet$get=function(url,data){return$request('GET',url,data)}//post-ajax请求的方法exportlet$post=function(url,data){return$request('POST',url,data)}wx.$request=$requestwx.$get=$getwx.$post=$post
添加utils/index.js文件
import'./util'import'./request'import'./msg'
在app.js文件中
import'./utils/index'
4. wxs
新建filter.wxs文件，用于格式化时间
//定义一个格式化时间戳的方法functionformatTime(val){varnow=getDate()//获取当前时间//根据时间戳返回一个时间对象vardate=getDate(parseInt(val))varsec=parseInt((now-date)/1000/60)//返回两日期相差分钟if(sec<=5){return'刚刚'}elseif(sec<=60){returnsec+'分钟前'}elseif(sec<=60*24){returnparseInt(sec/60)+'小时前'}//超过一天，显示具体的日期varyear=date.getFullYear()varmonth=date.getMonth()+1varday=date.getDate()varhour=date.getHours()varminute=date.getMinutes()varsecond=date.getSeconds()//拼接时间并返回return[year,month,day].map(formatNumber).join('/')+' '+[hour,minute,second].map(formatNumber).join(':')}
//补0方法functionformatNumber(n){n=n.toString()returnn[1]?n:'0'+n}//导出该方法module.exports={formatTime:formatTime};
四、上拉下拉页面
1. 页面
<!-- 导入wxs文件 --><wxssrc="../../wxs/filter.wxs"module="filter"/><viewclass="container"><navigatorurl="../details/details?id={{item.Id}}"class="data"wx:for="{{dataList}}"wx:key="index"><viewclass="title">{{item.Title}}</view><viewclass="flex j-s a-c desc"><view>{{item.Section.Name}}</view><view>{{filter.formatTime(item.Createtime)}}</view></view></navigator></view><viewbindtap="click"class="btn_add">+</view>
2. 获取数据的方法
//获取数据信息的方法asyncgetDataList(){//参数pageSize是每页显示数量，pageIndex是页码letdataList=awaitwx.$get('/Subject/GetSubjects',{pageSize:15,pageIndex:this.data.pageIndex})//判断如果是首页，清空之前数组中的数据if(this.data.pageIndex===1)this.data.dataList=[]//判断本次查询，是否获取到了数据if(!dataList||dataList.length===0)returnwx.$msg('没有更多')//更新数组数据this.setData({//用之前数组里面保存的数据去拼接最新的数据dataList:this.data.dataList.concat(dataList)})}
3. 下拉刷新
.json文件中设置允许下拉刷新
"enablePullDownRefresh": true
onPullDownRefresh:function(){//当前页回到首页this.data.pageIndex=1//重新调用加载数据的方法this.getDataList()//1秒钟，关闭下拉刷新setTimeout(()=>{wx.stopPullDownRefresh()},1000);}
4. 上拉触底
onReachBottom:function(){//当前页码加1this.data.pageIndex++//重新调用加载数据的方法this.getDataList()}
5. 添加页面
<viewclass="content"><viewclass="item flex"><label>题目：</label><!-- 通过model:value的方式，将表单里面的数据跟js里面的数据进行了双向绑定，
? ? 双向绑定指的是：一处被修改，另一处也一起修改--><inputclass="txt"placeholder="请输入题目"model:value="{{title}}"/></view><viewclass="item flex"><label>答案：</label><textareaclass="txt"placeholder="请输入答案"style="height:100rpx"model:value="{{answer}}"></textarea></view><viewclass="item flex"><label>分类：</label><inputdisabledbindtap="gotoTypeList"class="txt"placeholder="请选择分类"model:value="{{section_name}}"/></view><viewclass="item flex"><label>解析：</label><textareaclass="txt"placeholder="请输入解析"style="height:100rpx"model:value="{{desc}}"></textarea></view><viewclass="item flex"><buttonbindtap="click">添加</button></view></view>
6. 添加方法
//添加按钮点击事件asyncclick(){//非空验证if(!this.data.title||!this.data.section_id||!this.data.answer)returnwx.$msg('请输入完整信息！')//请求后台，添加题目信息letres=awaitwx.$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.clear()//清空数据}}
7. 分类页面
<viewclass="flex"><view><buttonbindtap="click"data-id="{{item.Id}}"data-name="{{item.Name}}"class="item"wx:for="{{typeList}}"wx:key="index">{{item.Name}}</button></view></view>
8. 获取分类数据
//获取分类信息的方法asyncgetTypeList(){lettypeList=awaitwx.$get('/Section/GetSections')this.setData({typeList})}
9. 返回分类数据
click(e){//获取按钮传过的参数let{id,name}=wx.$key(e)//获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。letpages=getCurrentPages()//获取上一个页面letprev_page=pages[pages.length-2]//设置上一个页面中的分类id和分类名称prev_page.setData({section_id:id,section_name:name})//返回前一个页面wx.navigateBack()}
10. 获取url参数
onLoad:function(options){if(Object.keys(options).length>0){let{id,name}=optionsthis.setData({section_id:id,section_name:name})}}
11. 显示详情
<viewclass="content"><viewclass="title">{{data.Title}}</view><viewclass="hr">答案：</view><viewclass="answer">{{data.Answer}}</view><viewclass="hr">解析：</view><viewclass="desc">{{data.Desc}}</view></view>
onLoad:function(options){if(Object.keys(options).length>0){this.data.id=options.id}//调用获取数据的方法this.getData()},//获取数据的方法asyncgetData(){//根据题目的id，获取题目信息letdata=awaitwx.$get('/Subject/GetSubject',{id:this.data.id})this.setData({data})}
五、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. 列表页添加搜索功能
<!-- 导入wxs文件 --><wxssrc="../../wxs/filter.wxs"module="filter"/><viewclass="container"><van-searchmodel:value="{{ title }}"placeholder="请输入搜索关键词"bind:search="onSearch"bind:clear="onClear"/><navigatorurl="../vantdetails/vantdetails?id={{item.Id}}"class="data"wx:for="{{dataList}}"wx:key="index"><viewclass="title">{{item.Title}}</view><viewclass="flex j-s a-c desc"><view>{{item.Section.Name}}</view><view>{{filter.formatTime(item.Createtime)}}</view></view></navigator></view><viewbindtap="click"class="btn_add">+</view>
//搜索框的搜索方法onSearch(){this.data.pageIndex=1//页码重新设置为1this.getDataList()//调用获取数据的方法},//搜索框的清空方法onClear(){//清空titlethis.setData({title:''})this.data.pageIndex=1//页码重新设置为1this.getDataList()//调用获取数据的方法}
3. 重构添加页面
<viewclass="content"><viewclass="item"><van-fieldlabel="题目"title-width="80rpx"model:value="{{ title }}"placeholder="请输入题目"required/></view><viewclass="item"><van-fieldlabel="答案"title-width="80rpx"type="textarea"autosizecustom-style="height:150rpx"model:value="{{ answer }}"placeholder="请输入答案"required/></view><viewclass="item"><van-fieldlabel="分类"title-width="80rpx"readonlymodel:value="{{ section_name }}"placeholder="请选择分类"bindtap="showPopup"required/></view><viewclass="item"><van-fieldlabel="解析"title-width="80rpx"type="textarea"autosizecustom-style="height:150rpx"model:value="{{ desc }}"placeholder="请输入答案"/></view><viewclass="item flex j-c"><van-buttonloading="{{loading}}"loading-text="添加中..."type="primary"blockroundicon="plus"bindtap="click">添加题目</van-button></view></view><van-popupposition="bottom"show="{{ show }}"bind:close="onClose"><van-pickershow-toolbartitle="请选择分类"value-key="Name"columns="{{ typeList }}"bind:cancel="onClose"bind:confirm="onConfirm"/></van-popup>
//获取分类信息的方法asyncgetTypeList(){lettypeList=awaitwx.$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})},//添加按钮点击事件asyncclick(){//非空验证if(!this.data.title||!this.data.section_id||!this.data.answer)returnwx.$msg('请输入完整信息！')//请求后台，添加题目信息this.setData({loading:true})letres=awaitwx.$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. 重构详情页
<viewclass="content"wx:if="{{data}}"><viewclass="title">{{data.Title}}</view><van-dividerfontSize="15"contentPosition="left"textColor="#248067"borderColor="#248067">答案</van-divider><viewclass="answer">{{data.Answer}}</view><van-dividerfontSize="15"contentPosition="left"textColor="#248067"borderColor="#248067">解析</van-divider><viewclass="desc">{{data.Desc}}</view></view><van-emptywx:elsedescription="暂无数据"/>
onLoad:function(options){if(Object.keys(options).length>0){this.data.id=options.id}//调用获取数据的方法this.getData()},//获取数据的方法asyncgetData(){//根据题目的id，获取题目信息letdata=awaitwx.$get('/Subject/GetSubject',{id:this.data.id})this.setData({data})},onPullDownRefresh:function(){//重新获取详情信息//调用获取数据的方法this.getData()//1秒后关闭下拉刷新setTimeout(()=>{wx.stopPullDownRefresh()},1000);}
六、自定义组件1
1. tabMenu组件
<viewclass="flex item">
<viewclass="title">{{label}}</view><viewdata-active="{{index}}"bindtap="change"class="tab {{active===index?'active':''}}"wx:key="index"wx:for="{{list}}">{{item}}</view>
</view>
/* 注意：组件中默认不会引入全局样式，如果要用全局样式，需要手动引入 */@import'../../app.wxss';.item{margin:10rpx0;}.title{padding:10rpx20rpx;color:#248067;}.tab{padding:10rpx20rpx;border:1pxsolid#eeeeee;margin:02px;}.tab.active{background:#248067;color:#ffffff;}
/**
? * 组件的属性列表：用于接收调用组件的页面传过来的数据
? */properties:{//添加组件的属性//该属性接收需要呈现的数据list:{//类型是数组，表示只能给该属性传数组值type:Array},//该属性接收高亮索引active:{//该属性是数字类型type:Number,//该属性的默认值0value:0},//该属性接收标题信息label:{type:String,value:'选项'}},/**
? * 组件的方法列表：组件的方法，必须要放在这里定义
? */methods:{change(e){let{active}=wx.$key(e)this.setData({active})
//组件内部触发一个事件//组件外部通过执行该事件，通过事件方法，获取传出来的数据// this.triggerEvent("change",{active,label:this.data.label})this.triggerEvent("change",active)},}
2. counter组件
<viewclass="flex a-c item"><viewclass="title">{{label}}</view><viewclass="jian"bindtap="jian">-</view><viewclass="count">{{count}}</view><viewclass="jia"bindtap="jia">+</view></view>
@import'../../app.wxss';.item{margin:10rpx0;}.title{padding:5rpx10rpx;}.jian,.jia{width:50rpx;height:50rpx;text-align:center;line-height:50rpx;border:1pxsolid#eeeeee;background:#248067;color:#ffffff;}.count{width:50rpx;height:50rpx;text-align:center;padding:010rpx;}
/**
? * 组件的属性列表
? */properties:{//标题label:{type:String},//初始值count:{type:Number,value:1},//最小值min:{type:Number,value:1},//最大值max:{type:Number,value:99999}},
/**
? * 组件的方法列表
? */methods:{//减方法jian(){letcount=this.data.count-1if(count<this.data.min){count=this.data.minwx.$msg('不能更少了',1000,'none')}this.setData({count})//触发事件this.triggerEvent('change',count)},//加方法jia(){letcount=this.data.count+1if(count>this.data.max){count=this.data.maxwx.$msg('不能更多了',1000,'none')}this.setData({count})//触发事件this.triggerEvent('change',count)}}
3. 页面中使用
"usingComponents":{"tabMenu":"../../components/tabMenu/tabMenu","counter":"../../components/counter/counter"},
<viewclass="content">{{wd}}-{{tf}}-{{pl}}<tabMenudata-key="wd"label="温度"list="{{wdList}}"active="{{wd}}"bind:change="syncData"></tabMenu><tabMenudata-key="tf"label="糖分"list="{{tfList}}"active="{{tf}}"bind:change="syncData"></tabMenu><tabMenudata-key="pl"label="配料"list="{{plList}}"active="{{pl}}"bind:change="syncData"></tabMenu><viewclass="line"></view>{{yfcount}}-{{kzcount}}-{{xzcount}}<counterdata-key="yfcount"label="衣服:"count="{{yfcount}}"min="{{1}}"max="{{10}}"bind:change="syncData"></counter><counterdata-key="kzcount"label="裤子:"count="{{kzcount}}"min="{{3}}"max="{{12}}"bind:change="syncData"></counter><counterdata-key="xzcount"label="鞋子:"count="{{xzcount}}"min="{{0}}"max="{{8}}"bind:change="syncData"></counter></view>
//切换高亮syncData(e){let{key}=wx.$key(e)this.setData({[key]:e.detail})},/**
? * 页面的初始数据
? */data:{wdList:['常温','去冰','少冰','热饮'],wd:0,tfList:['全糖','半糖','少糖','无糖'],tf:0,plList:['珍珠','椰果','布丁','红豆'],pl:0,yfcount:2,kzcount:3,xzcount:5},