小程序刨坑（一）

1、背景不能直接用图片，要将图片转为base64或者引入线上的图片。

 

2、不允许操作DOM，如动态设置页面样式，不可以在js上直接添加一个类名。可是我们可以通过微信小程序数据绑定以及view标签的”data-“自定义属性去更改标签类名。

例如：通过数据绑定在3个标签上绑定相同的变量_num, 当点击不同标签时, 在js逻辑层中通过event.target.dataset.num来获取标签data-num值, 然后在wxml中通过三元运算符的匹配便可完成class名的增改,

//wxml
<view class="list-wrapper">
      <view class="list-top">
         <view data-num="1" class="list-menu list-menu1 {{_num==1?'cur':''}}" bindtap="menuClick">头条</view>
         <view data-num="2" class="list-menu list-menu2 {{_num==2?'cur':''}}" bindtap="menuClick">活动</view>
         <view data-num="3" class="list-menu list-menu3 {{_num==3?'cur':''}}" bindtap="menuClick">公告</view>
      </view>
</view>

//js
menuClick:function(e){
      this.setData({
         _num:e.target.dataset.num
      })
  },

 

3、关于微信登录的一些故事

　　微信登录涉及以下：

　　1）微信授权，调用wx.login方法，登录成功后会返回一个code值，我们需要传给后端，后端通过这个code值，去请求微信接口，获得session_key。（注：此时code的有效期为5分钟，而后台的session_key有效期相对要很久。）

　　2）判断授权是否过期，调用wx.checkSession方法，若过期要重新进行授权。此处wxCode在首次授权成功时已经存到Storage中了，若wxCode不存在，证明是首次授权，则调用app.getUserInfo()方法，进行授权，此时不调用wx.checkSession方法。

 　　　  var wxCode = wx.getStorageSync('wxCode');
        if (wxCode) {
            wx.checkSession({
                success: function (res) {

                    //session 未过期，并且在本生命周期一直有效，sessionCheck为1，目的是防止微信code码先于session过期
                    wx.setStorageSync('sessionCheck', 1);
                },
                fail: function () {
                    //登录态过期
                    wx.login({
                        success: function (res) {
                            wx.setStorageSync('wxCode', res.code);
                            that.globalData.wxCode = res.code;
                            that.globalData.loginShow = true;
                            wx.getUserInfo({
                                success: function (res) {
                                    that.globalData.userInfo = res.userInfo
                                    typeof cb == "function" && cb(that.globalData.userInfo)
                                }
                            })
                        }
                    })

                }
            })
        } else {
            app.getUserInfo();
        }

 　　代码分析：

　　【匿名函数】在调用wx.login时，传递了一个匿名函数进行调用成功后的逻辑处理，就是success后面的部分。可以看到这里只有函数定义而没有函数名称，因此除了作为回调函数外，也无法在其它地方调用该函数。

　　实际上匿名函数仅仅是一种编码简化而已，不过它带来的好处却不仅仅是减少编码而已。

　　【闭包】 当使用回调函数时，通常会涉及到一些上下文的传递。在c/c++等语言中，会使用全局变量或堆内存来传递上下文。全局变量的缺点很明显，而堆内存又很容易发生内存泄漏。而在更高级的脚本语言中，可以通过闭包技术来轻松的完成上下文传递。

　　以上面的代码为例，在回调函数中执行了that.globalData.userInfo = res.userInfo来保存用户信息，其中that变量由var that = this赋值，因此该变量指向app对象本身，所以才能成功保存用户信息。

　　我们可以看到that对象是getUserInfo方法栈上的变量，如果没有闭包技术，此处的匿名回调函数是不能直接使用that变量的，就需要将app对象传递给回调函数(全局变量或函数参数的方式)，而在闭包技术的支持下，回调函数可以像使用函数内部变量一样来访问that变量，语法上便捷了许多。

4、上线的小程序请求的接口，应为https的，否则接口请求不通。