mpvue,vant-ui小程序开发
项目配置
mpvue 开发小程序接口数据统一管理
项目里做API与数据分离统一管理,api.js
小程序里请求数据接口使用wx:request,因为考虑项目比较大,最好把wx:request封装起来,统一使用管理
request.js 配置开发环境和线上环境接口
async/await和Promise异步,我这次项目有同时使用promise和async/await,两个有不同的优缺点,Promise的回调机制async/await好,缺点就是写很多then回调,async/await的写法与同步写起来很相似,写起代码来也整洁,易理解。
api.js,request.js
请求拦截
响应拦截
处理请求方式
页面使用api,调用接口;
ap.vue调用微信登录API,请求登录接口获取openId;
封装一些实用技巧(页面url,url参数,copy 数据,一些微信api的处理)
/*获取当前页url*/
export function getCurrentPageUrl () {
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length-1]//获取当前页面的对象
var url = currentPage.route //当前页面url
return url
}
/*获取当前页带参数的url*/
export function getCurrentPageUrlWithArgs () {
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length-1]//获取当前页面的对象
var url = currentPage.route //当前页面url
var options = currentPage.options //如果要获取url中所带的参数可以查看options
//拼接url的参数
var urlWithArgs = url + '?'
for(var key in options){
var value = options[key]
urlWithArgs += key + '=' + value + '&'
}
urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length-1)
return urlWithArgs
}
export const copy = (source) => {
var sourceCopy = source instanceof Array ? [] : {};
for (var item in source) {
sourceCopy[item] = typeof source[item] === 'object' ? copy(source[item]) : source[item];
}
return sourceCopy;
}
// 关闭加载 Loading
export function hideToast () {
wx.hideLoading()
}
// 开启小程序窗口头部加载 Loading
export function showNavigationBarLoading () {
wx.showNavigationBarLoading()
}
//关闭小程序窗口头部加载 Loading
export function hideNavigationBarLoading () {
wx.hideNavigationBarLoading()
}
// 停止下拉刷新
export function stopRefresh () {
wx.stopPullDownRefresh()
}
微信分享
分享图片,标题,跳转链接自定义处理,;
onShareAppMessage: function (options) {
var that = this;
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline'] //shareAppMessage必须得有
})
// 设置菜单中的转发按钮触发转发事件时的转发内容
var shareObj = {
title: "QYResearch报告库",// 默认是小程序的名称(可以写slogan等)
path: '', // 默认是当前页面,必须是以‘/’开头的完整路径
imageUrl: '', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
}
// 来自页面内的按钮的转发
if( options.from == 'button' ){
var eData = options.target.dataset.name;
console.log('000----', eData ); // shareBtn
// 此处可以修改 shareObj 中的内容
shareObj.title = eData.name;
shareObj.path = `/pages/reportDetail/main?id=${eData.id}`;
// shareObj.imageUrl =that.imgURL+eData.thumb;
shareObj.imageUrl =that.imgURL+'/public/uploads/products/Book1.png'
}
// 返回shareObj
return shareObj;
},
数据分页处理(数据量达到一定数量添加分页处理)
这里是数量达到20条就添加–懒加载分页(不贴代码就是耍流氓;代码在下面)
//data里面return
_dataList: null,//接口传来的数据存放数组
currentPageNum: 1,//当前页
one:[],//选中的数据
onLoad(options){
this.getList();
},
onReachBottom () {
if (this._dataList && (this.currentPageNum < this._dataList.length)) {
wx.showLoading({
mask: true,
title: '加载中!'
})
let nextPageNum = this.currentPageNum++
console.log('nextPageNum',nextPageNum);
let arr = this._dataList[nextPageNum]
console.log('arr',);
for (let i = 0; i < arr.length; i++) {
this.res_list.push(arr[i])
}
setTimeout(() => {
wx.hideLoading()
}, 500)
}
},
//methods里面:
getList(){
wx.showLoading({
title: '加载中...',
mask: true
})
historyIndex().then(res=>{
if(res.code==0){
wx.hideLoading();//关闭 loading 提示框
res.data.map((item) => {
const isChecked ={isChecked:false}
Object.assign(item,isChecked)
});
if (res.data && res.data.length > 20) { // 数量超过20条,懒加载分页(自定义设置最大数量)
let arr = []
let len = Math.ceil(res.data.length / 10)
for (let i = 0; i < len; i++) {
arr[i] = res.data.slice(i * 10, (i + 1) * 10)
}
this._dataList = arr
this.res_list = this._dataList[0]
} else {
this.res_list = res.data
}
}else{
wx.showToast({
title: res.message,
icon: 'error',
duration: 500,
mask: false,
});
}
}).catch(err=>{
console.log('err',err);
})
},
常规操作编辑数据:单选,全选,反选,删除
//data里面return
allchecked:false,//默认全不选
selectedData:[],
res_list:[],
//methods
// 单选的change事件
chooseChange(i,item) {
if (this.selectedData.indexOf(i) > -1) {
var arrs = this.selectedData.filter(function(item) {
return item != i;
});
this.selectedData = arrs;
item.isChecked = false;
} else {
this.selectedData.push(i);
item.isChecked = true;
}
if (this.selectedData.length < this.res_list.length) {
this.allchecked = false;
} else {
this.allchecked = true;
}
},
// 全选和反选
checkAll() {
let list = this.res_list;
this.allchecked = !this.allchecked
if (this.allchecked == true) {
list.forEach(i => {
i.isChecked = true;
if (this.selectedData.indexOf(i.collection_id) < 0) {
this.selectedData.push(i.collection_id);
console.log('11111111',this.selectedData);
}
});
} else {
list.forEach(i => {
i.isChecked = false;
this.selectedData = [];
});
}
},
//删除单个,请求接口传列表id
```javascript
// collection_id(列表的数据id)
deleteOne(e){
var that = this
that.one.push(e)
wx.showModal({
title: '提示',
content: '确定取消收藏?',
success (res) {
if (res.confirm) {
collectionDelete({
ids:that.one
}).then(res=>{
if(res.code ==0){
wx.showToast({
title: res.message,
icon: 'success',
image: '',
duration: 1000,
mask: false,
});
that.getList()
}else{
wx.showToast({
title: res.message,
icon: 'error',
image: '',
duration: 500,
mask: false,
});
}
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
//删除多个,请求接口传列表id数租
deleteAll(){
var that = this
that.one = that.selectedData
wx.showModal({
title: '提示',
content: '确定取消收藏?',
success (res) {
if (res.confirm) {
collectionDelete({
ids:that.one
}).then(res=>{
if(res.code ==0){
wx.showToast({
title: res.message,
icon: 'success',
image: '',
duration: 1000,
mask: false,
});
that.getList()
}else{
wx.showToast({
title: res.message,
icon: 'error',
image: '',
duration: 500,
mask: false,
});
}
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
//列表数据获取;
getList(){
wx.showLoading({
title: '加载中...',
mask: true
})
collectionIndex({category_id:this.type}).then(res=>{
if(res.code==0){
wx.hideLoading();//关闭 loading 提示框
res.data.map((item) => {
const isChecked ={isChecked:false}
Object.assign(item,isChecked)
});
this.isEditStatu = false
this.allchecked = false
this.res_list = res.data
console.log(this.res_list);
// if(res.data.length <= 0){
// this.no_data = true
// }
}else{
wx.showToast({
title: res.message,
icon: 'error',
duration: 500,
mask: false,
});
}
})
},