《每周工作小节》_20191027

1、图片路径显示无效时img标签的error属性绑定方法使用默认图片

// vue
<img :src="item.headpicurl" alt="" @error="imgError(index)">

imgError (index) {
  console.log(index + '图片异常')
  this.agentList[index].headpicurl = './../../../static/images/head.png'
},

2、对象遍历方法

Object.entries(obj);    //将对象的每一项生成数组遍历出来

// 对象的每一项遍历成数组
var obj = {'0':'a','1':'b','2':'c'};
Object.entries(obj);    //["0","a"], ["1","b"], ["2","c"]

Object.keys(obj); 

// 返回对象的Key值数组

var obj = {'0':'a','1':'b','2':'c'};
Object.keys(obj);    //["0", "1", "2"]

// 结合forEach方法将key 和 value遍历出来
Object.keys(obj).forEach(function(key){
     console.log(key,obj[key]);
});

for ... in ..方法

var obj = {'zx':'a', 'zc':'b'}
for (var i in obj){console.log(i)}

3、Vue项目：import路径引入指向配置，webpack.base.conf.js文件中修改配置修改文件指向

extensions:指优先查找的文件类型。

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue': 'mpvue',
      '@': resolve('src'),
      'static': resolve('static')
    },
    symlinks: false,
    aliasFields: ['mpvue', 'weapp', 'browser'],
    mainFields: ['browser', 'module', 'main']
  },

4、url可以使用encodeURI编码，decodeURI解码(处理中文字符在URL乱码问题)

5、Vue中使用flex布局的项目：utils文件夹中可以添加flex.less文件，可以定义不同的flex布局方法，在试用时直接引用文件使用css样式。

6、微信小程序生命周期onshow中，如果一部请求里面有另一个异步请求时（两个请求），请求完一个异步请求之后会先执行页面的onshow方法再执行小程序生命周期哦的第二个异步方法（会导致页面先渲染，数据后面获取的现像）如下图第二个请求会在小程序页面的onShow()生命周期之后再执行。

getOpenid () {
      console.log('小程序生命周期onshow')
      let _this = this;
      wx.showLoading({
        title: '加载中...',
        mask: true
      });
      wx.login({
        success (lRes) {
          // console.log(lRes);
          setTimeout(function () {
            wx.hideLoading()
          }, 2000)
          if (lRes.code) {
            // 发起网络请求
            let _query = {
              appid: config.appid,
              code: lRes.code
            };
            postRequest2(API.getOpenid, _query)
              .then(res => {
                console.log(res);
                _this.userInfo.openid = res.openid;
                _this.userInfo.code = lRes.code;
                mpvue.setStorageSync('userInfo', _this.userInfo);
                _this.getUserInfo();
              }).catch(res => {
                // 仅app.vue使用该提示框，其他页面均使用Toast
                wx.showToast({
                  title: '网络异常，请稍后重试',
                  icon: 'none',
                  duration: 2000
                })
                console.log('【请求失败】获取openid：', res);
              })
          } else {
            // setTimeout(function () {
            //   wx.hideLoading()
            // }, 2000)
            console.log('【请求失败】登录失败:' + lRes.errMsg)
          }
        }
      })
    },