mpvue小程序开发

项目配置

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