小程序开发遇到的坑

小程序开发遇到的坑

function 与 => 的区别

在JS中，箭头函数并不是简单的function(){}匿名函数的简写语法糖，实际上，箭头函数和匿名函数有个明显的区别：**箭头函数内部的this是词法作用域，在编写函数时就已经确定了。**而匿名函数的this指向运行时实际调用该方法的对象，无法在编写函数时确定。

箭头函数和普通函数的区别

• 不可以当做构造函数，也就是说，不可以使用 new 命令，否则会抛出错误。
• this、arguments、caller等对象在函数体内都不存在。
• 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

==>箭头函数除了传入的参数之外，其它的对象都没有！在箭头函数引用了this、arguments或者参数之外的变量，那它们一定不是箭头函数本身包含的，而是从父级作用域继承的。

代码实例:

function Test() {
    this.num = 100;
    this.func = function(){
        console.log(this.num); // 100
        setTimeout(function(){
            console.log(this.num); // undefined
        }, 500);
    };
}
var obj = new Test();
obj.func();
//这里的方法里调用了setTimeout函数，该函数500毫秒后调用我们定义的函数时，实际上是window对象调用的，所以这时匿名函数的this是指向window而不是指向obj了。

在箭头函数出现之前一般都是这么写的：

function Test() {
    this.num = 100;
    this.func = function(){
        console.log(this.num); // 100
        var that = this;	//保存一份当前的this对象
        setTimeout(function(){
            console.log(that.num); // 100
        }, 500);
    };
}
var obj = new Test();
obj.func();
//这是利用了闭包的概念。箭头函数可以看做这种方式的语法糖。
//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //
function Test() {
    this.num = 100;
    this.func = function(){
        console.log(this.num); // 100
        setTimeout(() => {
            console.log(this.num); // 100	//箭头函数没有this,所以从上层父级继承
        }, 500);
    };
}
var obj = new Test();
obj.func();

▲同时需要注意的是:this是指向当前的对象，随着上下文作用域的切换this的执行this的指向会发生改变，我们可以先保存一份this的值然后再使用：var that = this

---

生成带参数的二维码

 onShow:function(){
    var that = this;
    function get_code() {
      wx.request({
        url: 'https://api.weixin.qq.com/cgi- bin/token?grant_type=client_credential&appid=' + that.data.APP_ID + '&secret=' + that.data.APP_SECRET,
        method: 'GET',
        success: function (res) {
          // console.log(res.data.access_token);
          wx.request({
            data: {
            'path': "pages/index"
            }, 
          url: 'https://api.weixin.qq.com/wxa/getwxacode?access_token=' + res.data.access_token,
            method: 'POST',
            success: function (res) {
              console.log(res.data);//2jin zhi 
              	}
       		  })
        }
          })
    }
    get_code();
}
//官方接口得到的是图片的二进制流

通过草料微信小程序生成二维码:

const app = getApp()
Page({
  data: {
    APP_ID: 'wx05818046869e4078',
    APP_SECRET: '5d4429375e84d6ab9476b643f8733af9',
    path: 'pages/index',
    photo:null,
  },
  onShow:function(){
    var that = this;
    console.log(that.data.APP_ID + ' ' + that.data.APP_SECRET + ' ' + that.data.path)
    wx.request({
      url: 'https://cli.im/home/weapp/create',
      method:'POST',
      data:{
        'weapp_id': that.data.APP_ID,
'weapp_secret': that.data.APP_SECRET,
'weapp_url': that.data.path
      },
      header:{
        'content- type': 'application/x- www- form- urlencoded'
      },
      success:(res)=>{
          console.log(res.data.data)
          that.setData({
            photo: res.data.data
          })
      }
    })
  }
})

组件的自定义数据属性:

<view bindtap="f0" data- xxx- yyy='blabla'>
</view>
//在点击触发事件f0的参数event中,dataset为自定义参数的字典,其中,键值为驼峰命名法.xxxYyy

▲.bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

---

wx.requests是异步调用的

wx.requests这个api是不会阻塞的,什么时候收到response就什么时候调用回调函数(success…),如果在wx.requests方法调用后还有运行代码(1),则(1)比回调函数早执行

组件:

以某种方式对 业务逻辑和* *功能**的封装

特点:高内聚,可复用

• 视图组件

• 表单组件

• 媒体组件

• 画布组件

• 基础内容组件

• 导航组件

• 地图组件

• 开放能力组件

自定义组件:

​ 内容略

---

ES6新特性:

js中let和var定义变量的区别

• 声明后未赋值，表现相同:

  • 如果未在 let 、var 语句中初始化您的变量，则将自动为其分配 JavaScript 值 undefined

• 使用未声明的变量，表现不同:

  • var有变量提升，let无变量提升

• 重复声明同一个变量时，表现不同：

  • var重复声明时覆盖，let重复声明时报错

• 变量作用范围，表现不同：

  • 使用 let 语句声明一个变量，该变量的范围限于声明它的块中。

  • ==>代码演示:

  • (function() {
      var varTest = 'test var OK.';
      let letTest = 'test let OK.';
      {
        var varTest = 'varTest changed.';
        let letTest = 'letTest changed.';
      }
      console.log(varTest); 
        //输出"varTest changed."，内部"{}"中声明的varTest变量覆盖外部的letTest声明
      console.log(letTest); 
        //输出"test let OK."，内部"{}"中声明的letTest和外部的letTest不是同一个变量
    }());