微信小程序总结1

 

1.在调用wx.getUserInfo等api的时候需要判断是否已经授权，否则会出现获取不到用户信息的情况

文档说明：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.getSetting.html

2.Promise的理解:

Promise也是相当于ajax的异步回调，只是为了避免出现多层嵌套调用ajax才用promise，这样的好处是不用每次请求都写这么长

      wx.login({
        success: res => {
          // 发送 res.code 到后台换取 openId, sessionKey, unionId
          if (res.code) {
            wx.getSetting({
              success: ret => {
                if (ret.authSetting['scope.userInfo']) {
                  wx.getUserInfo({
                    success: info => {
                      var rawData = info.rawData;
                      var signature = info.signature;
                      var iv = info.iv;
                      var encryptedData = info.encryptedData;
                      // console.log('1'+rawData)
                      // console.log('2' +signature)
                      // console.log('3' +iv)
                      // console.log('4' +encryptedData)
                      // console.log('5' +res.code)
                      // return
                      //发起网络请求
                      wx.request({
                        url: 'http://www.tp6.com/api/login',
                        method: 'post',
                        data: {
                          code: res.code,
                          rawData: rawData,
                          signature: signature,
                          iv: iv,
                          encryptedData: encryptedData
                        },
                        success(re) {
                          console.log(re.data.data)

                          // 可以将 res 发送给后台解码出 unionId
                          app.globalData.userInfo = re.data.data
                          app.globalData.isLog = true
                          app.globalData.session3rd = re.data.data.session3rd
                          that.setData({
                            userInfo: re.data.data,
                            hasUserInfo: true
                          })
                          wx.hideLoading()
                          // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
                          // 所以此处加入 callback 以防止这种情况
                          // if (app.userInfoReadyCallback) {
                          //   app.userInfoReadyCallback(info)
                          // }
                        }
                      })
                    }
                  })
                }
              }
            })  

3.自定义组件的理解

第一种：父级页面可以向自定义组件插入内容

<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

第二种：Component 构造器

     注意点1：调用组件都要在json文件中填写对应的组件路径

                2:组件的属性理解：

// component/auth/auth.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },
  attached: function () {
    // 在组件实例进入页面节点树时执行
    console.log(this.properties.myProperty2)
  },
  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    onTap: function () {
      console.log('wwww')
      // var myEventDetail = {} // detail对象，提供给事件监听函数
      // var myEventOption = {} // 触发事件的选项
      // this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  },
  onMyEvent: function (e) {
    console.log('21212')
     // 自定义组件触发事件时提供的detail对象
  }
})

 这里定义了两个属性:myProperty和myProperty2，并且是两种定义方式，含义是相同的，属性的用法如下 

  //父级页
  <auth bindmyevent="onMyEvent" myProperty2="属性值">
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </auth>

在组件中定义的属性是给父级页向组件传值的，组件拿到值就可以打印出来

  attached: function () {
    // 在组件实例进入页面节点树时执行，就是页面进入组件触发
    console.log(this.properties.myProperty2)
  },

                       3.this.triggerEvent('myevent', {}, {}) 的理解

//父级页 
 <auth bindmyevent="onMyEvent" myProperty2="">
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </auth>

       其中bindmyevent中的myevent就是组件的js里面的this.triggerEvent（'myevent'），而onMyEvent则是父级页js里面定义的函数，this.triggerEvent就是可以用来调用父页面的方法