微信小程序如何获取token值以及关于小程序实现网络层封装

微信小程序如何获取token值（前后端数据的交互）

假期作业是完成天使童装的小程序功能。由于个人原因，购物车没有写，在今天实现购物车时候发现了挺多问题。

1. 显示我的token值无效

解决方案：

直接上代码

 onReady: function() {
    wx.login({
      success: (res) => {
        console.log('111', res);
        let code = res.code;
        wx.request({
          url: 'https://api.it120.cc/mwz/user/wxapp/login',
          method: "POST",
          // 在这里我们要传递一个code参数
          data: {
            code: code//传递一个code值来获取token
          },
          header: {
            'content-type': "application/x-www-form-urlencoded",

          },
          success(result) {
            console.log('登录', result)
          }
        });

这样我们就可以拿到了token，在我们请求数据的时候，我们记得吧这个token值传递过去，否则的话，会报错！！一定要记得。

网络层封装思路

我们在实现功能的时候难免要调用很多后端的接口，这样的话，就需要我们一直用到wx.request。难免会影响性能，加载过慢，影响用户的体验。这个时候我们二次封装，进行再次封装，提交加载的性能！
说一下思路吧。上代码
创建一个evn.js

module.exports={
  //开发环境url
  dev:{
    baseUrl:'http://localhost:3000'
  },
  //测试环境url
  test:{
    baseUrl:'http://www.test.com'
  },
  //线上环境url
  prod:{
    baseUrl:'https://api.it120.cc'
  }
}

接着我们创建request.js主要是用来 做请求数据的处理

//引入env中的url
const { baseUrl } = require('./env.js').prod

//专用域名
const subDomain='mwz';



module.exports={
  /**
   * 二次封装wx.request
   * {String }url:请求的接口地址
   * {String} method:请求方式 GET,POST....
   * {Object} data:要传递的参数
   * { boolean }isSubDomain:表示是否添加二级子域名 true代表添加,false代表不添加
   */
  request: (url, method='GET', data={}, isSubDomain)=>{

    let _url = `${baseUrl}/${isSubDomain ? subDomain:'' }${url}`;

     return new Promise((resolve,reject)=>{


       wx.showLoading({
         title: '正在加载',
       })

       wx.request({
         url: _url,
         data: data,
         method: method,
         header: {
           'content-type': 'application/x-www-form-urlencoded',

         },
         success(res) {

            let {code}=res.data;

           if(code===0) {
              resolve(res.data);
              wx.hideLoading()
              
           }else {
				 wx.showToast({
                title: '数据请求误',
              }) }
         },
         fail(){
           reject('接口请求有误，有检查');
         }
   });
     });
       },

}

还有一个就是api.js

//引入封装的reuest请求
const { request }=require('./request.js')



//基于业务封装的数据请求

module.exports={

  /**
   * 封装商品列表方法
   */
  getGoodsList: ()=>{
    return request('/shop/goods/list','POST',{},true);
  },

  /**
   * 添加商品收藏
   */
  addGoodsFav:(goodsId,token)=>{

    return request('/shop/goods/fav/add', 'POST', { goodsId, token },true);

  },
  /**
   * 获取商品分类
   */
  getGoodsCate:()=>{

    return request('/shop/goods/category/all','GET',{},true);

  },
  //继续封装其他接口....


}

总结：在实现功能时候发现了挺多问题，主要还是接口，几乎每一个功能的实现都要调用不同的借口，传递不同的值，还是要多看文档！！