##微信小程序开发遇到的坑

微信小程序开发

1.关于token.

如果在扫描二维码进来的时候获取token，会接收到上次的tokn。

具体解决代码 判断全局是否有 app.globalData.userMsg

 if (app.globalData.userMsg) {
      this.setData({
        id: options.id || options.scene,
        school: app.globalData.tarSchool,
      }, () => {
        this.getGoodsDetail()
        this.getCommentList()
      })
    } else {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userMsgReady = res => {
        this.setData({
          id: options.id || options.scene,
          school: app.globalData.tarSchool,
        }, () => {
          this.getGoodsDetail()
          this.getCommentList()
        })
      }
    }

重点：具体代码请查看	https://www.cnblogs.com/shipskunkun/p/11802379.html

2.关于七牛上传本地图片

1. const qiniuUpload = require('../../../utils/qiniuUploader.js');

先引入七牛上傳sdk， 初始化七牛uptoken，小程序選擇圖片成功時，發送qiniuLoadurl

2. this.qiniu();
qiniu(){
    let token = app.globalData.token;
    app.post({
      url:'mobile/login/qi_niu_token',
      data:{
        token
      }
    }).then(res=>{
      this.setData({
        uptoken:res.data.uptoken
      })
    }).catch(err=>{
      console.log(err);
    })
  },

 3. chooseImg(){
    let that = this;
    wx.chooseImage({
      count: 1,
      success: function(res) {
        let img_url = res.tempFilePaths[0];
        console.log(img_url);
        that.qiniuLoadurl(img_url);
      }
    })
  },

4. qiniuLoadurl(url){
    let that = this;
      qiniuUpload.upload(url,(res)=>{
        console.log(res)
      }, (error) => {
        console.log(error)
      },{
        uploadURL: 'https://sqiniu.iule.net',
        domain: 'https://sqiniu.iule.net/',
      uptoken: that.data.uptoken,
      region: "ECN",
    })
  },

3.判断是否是手机号

  isPhone(val) {
      const reg = /^(1)[0-9]{10}$/;
      return reg.test(String(val).trim())
    },

4.设置sass编写css

在配置文件中设置 C:\Users\win\AppData\Roaming\Code\User \setting

{
    "files.associations": {

        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "easysass.formats": [
        {
          "format": "expanded", //格式，expanded不压缩，compressed压缩
          "extension": ".wxss" //输出文件的后缀,小程序可以写'wxss'
        },
        // {
        //   "format": "compressed",
        //   "extension": ".min.css"
        // }
      ],
    "minapp-vscode.disableAutoConfig": true
}

在viscode中下载Easy Sass

5.微信小程序二维码参数解析

let scene = decodeURIComponent(options.q).split('?')[1].split('=')[1];

在onLoad事件里获得options 在options的q里面获取网址，在decodeURIComponent里解析获得参数

6.关于生成海报图片的方式

git地址：https://github.com/kuckboy1994/mp_canvas_drawer

7.当请求失败的时候

wx.hideLoading();
app.toast.fail(err.message || "请求错误")

8.&&

if (!item.name) {
        app.toast.fail("姓名不能为空");
    	    throw new Error("姓名不能为空");
      } else if (!item.isNew && !item.classes) {
        app.toast.fail("班级不能为空");
        throw new Error("班级不能为空");
      }
只有两者都为ture 才能进入，否则不进来

9.结算

this.setData({
      totalPrice: parseFloat(total).toFixed(2)
    })

10.关于苹果手机左右滑动的问题

在JSON文件中 设置不能滑动
"disableScroll": true

11.小程序关于后端富文本问题

把图片解析成小程序图片并且把空格解析出来
  var jsonDa = app.globalData.student.compay_culture.replace(/\<img/gi,  '<img class="rich-img" ' );
    var newData = jsonDa.replace(/&nbsp;/g, '\xa0');

12.关于tabBar页面底部适配问题

• 外部最大的id代码

padding-bottom: env(safe-area-inset-bottom);

13.删除数组内的第几个对象

this.loadList.splice(index,1)

14.小程序提示内容

 wx.showToast({
        title: '请选择售后的商品',
        icon: 'none'
      })

15.pick

    <picker class="weui-btn" mode="selector" range-key="{{'workage'}}" range="{{position}}" bindchange="bindTimeChange">
      <button id="{{position =='请选择你的职位'?'':'col'}}">{{position}}</button>
    </picker>

 position:[{id:'0',workage:'一年级'},{id:'1',workage:'一年级'},{id:'2',workage:'一年级'},{id:'3',workage:'一年级'},{id:'4',workage:'一年级'}]

16.毛玻璃

.background_img{ 
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  filter: blur(20px);
  z-index: -1;
  transform: scale(1.5); /*和网易云音乐对比了一下，发现也是放大1.5倍*/
}

作者：你喜欢吃青椒么
链接：https://juejin.im/post/6844903875271458829
来源：掘金

20.两个数组去重

let zhanshi = [{id:22},{id:222},{id:555},{id:42},{id:43}];
let no = [{id:22},{id:42}]
let arr4 = [];
let arr5;
no.filter(item => arr4.push(item.id));
arr5 = zhanshi.filter(obj => arr4.indexOf(obj.id) == -1);
console.log(arr5);

let arr1=[
{
id:1,
name:“苏罡”,
hobby:[
{id:1,name:“2”},
{id:2,name:“2”},
{id:3,name:‘2’},
]
},
{
id:2,
name:“邓超”,
hobby:[
{id:1,name:“3”},
{id:2,name:“2”},
{id:3,name:‘2’},
]
},
{id:3,name:“1”},
{id:4,name:“2”},
]
let arr2=[
{id:3,name:“A”},
{id:4,name:“B”},
{id:5,name:“C”},
{id:6,name:“D”},
]

//one
let arr3 = arr1.filter(obj=>!arr2.some(obj1=>obj1.id==obj.id))

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。