三、发起请求
1. scroll-view
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
scroll-x：允许横向滚动。
scroll-y：允许纵向滚动。
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. 页面
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. 添加页面
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. 分类页面
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. 显示详情
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. 列表页添加搜索功能
//搜索框的搜索方法onSearch(){this.data.pageIndex=1//页码重新设置为1this.getDataList()//调用获取数据的方法},//搜索框的清空方法onClear(){//清空titlethis.setData({title:''})this.data.pageIndex=1//页码重新设置为1this.getDataList()//调用获取数据的方法}
3. 重构添加页面
//获取分类信息的方法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. 重构详情页
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组件
/* 注意：组件中默认不会引入全局样式，如果要用全局样式，需要手动引入 */@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组件
@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
3. 页面中使用
"usingComponents":{"tabMenu":"../../components/tabMenu/tabMenu","counter":"../../components/counter/counter"},
//切换高亮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},