微信小程序(二)

正文

这次写一些小程序使用的比较多的JS公共库内容

app.js

获取授权，后台使用的Senparc.Weixin.dll与微信交互，wx.login({})就不讲了，官方Demo已经提供了

// 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
              //校验
              util.NetRequest({
                url: '/CheckSignature',
                method: 'POST',
                data: {
                  sessionId: wx.getStorageSync('sessionId'),
                  rawData: res.rawData,
                  signature: res.signature
                },
                success: function (json) {
                  var cwos = json.data
                  var checkSuccess = cwos.success;
                  console.log("签名校验" + checkSuccess);
                  if (checkSuccess)
                    util.NetRequest({
                      url: '/DecodeEncryptedData',
                      method: 'POST',
                      data: {
                        'type': "userInfo",
                        sessionId: wx.getStorageSync('sessionId'),
                        encryptedData: res.encryptedData,
                        iv: res.iv
                      },
                      success: function (json) {
                        var deData = json.data;
                        console.log("水印校验" + deData.success);
                        wx.hideLoading();
                      },
                      fail: function (res) {
                        //console.log(res);
                        wx.hideLoading();
                      }, complete: function (res) {
                        // console.log(res);
                      }
                    }, false);
                }
              }, false);
              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    });

Utils.js

封装wx.request

const apiUrl = 'https://xxxx.com';
function NetRequest({ url, data, success, fail, complete, method = "POST" }) {
  return new Promise(function (resolve, reject){
    var session_id = wx.getStorageSync('sessionId');//本地取存储的sessionID
    if (session_id != "" && session_id != null) {
      var header = { 'content-type': 'application/x-www-form-urlencoded', 'Cookie': 'sessionId=' + session_id }
    } else {
      var header = { 'content-type': 'application/x-www-form-urlencoded' }
    }  
    wx.request({
      url: apiUrl + '/Wx' + url,
      method: method,
      data: data,
      header: header,
      success: res => {
        if (session_id == "" || session_id == null) {
          wx.setStorageSync('sessionId', res.data.session_id) //如果本地没有就说明第一次请求 把返回的session id 存入本地
        } 
        if (res['statusCode'] === 200)
        //微信授权过期，需要重新授权，由服务器返回这个错误
          if (res.data.msg === '请重新授权' && url.indexOf('Login') == -1) { 
            // 重新登录
            wx.login({
              success: wxres => {
                // 发送 res.code 到后台换取 openId, sessionKey, unionId
                if (wxres.code) { 
                  // 登录
                  wx.login({
                    success: res => {
                      // 发送 res.code 到后台换取 openId, sessionKey, unionId
                      if (res.code) {
                        //发起网络请求  
                        wx.request({
                          url: apiUrl + '/Wx/Login',
                          method: 'POST',
                          data: {
                            code: res.code
                          },
                          success: function (res) {
                            var result = res.data;
                            if (result.success) {
                              wx.setStorageSync('openid', res.data.openid);
                              wx.setStorageSync('sessionId', result.sessionId); 
                              data.sessionId = result.sessionId;
                              //登陆成功后重新发起之前的请求
                              NetRequest({
                                url,
                                data,
                                method: 'POST',
                                success,
                                fail,
                                complete
                              })
                            } else {
                              console.log('储存session失败！', result);
                            }
                          },
                          fail: function (err) {
                            console.log(err)
                          }
                        })
                      } else {
                        console.log('获取用户登录态失败！' + res.errMsg)
                      }
                    }
                  })
                } else {
                  console.log('获取用户登录态失败！' + res.errMsg)
                }
              }
            })
          } else {
            resolve(success(res));
          }

        else reject(fail(res));
      },
      fail: function (fail){
        reject(fail)
      },
      complete: complete
    })
  })

}

Index.js

如何调用NetRequest

//发起网络请求
    util.NetRequest({
      url: '/Get',
      method: 'POST',
      data: {
        sessionId: wx.getStorageSync('sessionId')
      },
      success: function (res) {
        var result = res.data;
        if (result.success) {  
          that.setData({ 
            array: result
          })
        } else {
          //xxx
        } 
      },
      fail: function (err) {
        console.log(err) 
      }, complete: function (res) {
        //console.log(res);
      }
    });

js计算金额这块需要乘100，否则金额最终结果会不对

支付金额计算，输入的金额保留两位小数，以分为单位， 如果需要在界面显示需要自行计算出来的值除以100，如(Moeny/ 100).toFixed(2)

//计算含有服务费的金额
function CalculateMoneyByRate(value, rate) {
  var dot = value.indexOf('.')
  if (dot > -1) {
    if (value.length > (dot + 3)) {
      value = value.substring(0, dot + 3) * 100;
      var intRate = (value * rate);
      var total_fee = value + intRate;
      return parseInt(total_fee);
    } else if (value.substring(dot + 1, value.length).indexOf('.') > -1) {
      var bdot = value.substring(dot + 1, value.length).indexOf('.');
      value = value.substring(0, dot + 1 + bdot) * 100;
      var intRate = (value * rate);
      var total_fee = value + intRate;
      return parseInt(total_fee);
    } else {
      value = value * 100;
      if (dot == (value.length - 1) && value.substring(dot + 1, value.length).indexOf('.') > -1) {
        value = value.substring(0, dot)
      }
      var intRate = value * rate;
      var total_fee = value + intRate;
      return parseInt(total_fee);
    }
  } else {
    value = value * 100;
    if (dot == (value.length - 1)) {
      value = value.substring(0, dot)
    }
    var intRate = value * rate;
    var total_fee = value + intRate;
    return parseInt(total_fee);
  }
}

// 计算未包含服务费金额
function CalculateMoney(value) {
  var dot = value.indexOf('.')
  if (dot > -1) {
    if (value.length > (dot + 3)) {
      value = value.substring(0, dot + 3);
      return value;
    } else if (value.substring(dot + 1, value.length).indexOf('.') > -1) {
      var bdot = value.substring(dot + 1, value.length).indexOf('.');
      value = value.substring(0, dot + 1 + bdot);
      return value;
    } else {
      if (dot == (value.length - 1) && value.substring(dot + 1, value.length).indexOf('.') > -1) {
        value = value.substring(0, dot)
      }
      return value;
    }
  } else {
    return value;
  }
}

计时器

/**
   * 秒级倒计时
   */
var timer;
//清除计时器
function clearTimr() {
  clearTimeout(timer);
}
function countdown(that, second) {
  clearTimr(); //防止多个计时器运行
  if (second == 0) { 
    that.setData({ 
        second: 30
      }); 
      countdown(that, 30);
  }
  timer = setTimeout(function () {
    if (second > 0) { 
      that.setData({
        second: second - 1
      });
      second = second - 1; 
      countdown(that, second);
    }
  }, 1000)
}

使用官方导航栏

app.js
  "tabBar": {
    "backgroundColor": "#fff",
    "selectedColor": "#fe2f5b",
    "list": [
      { 
        "pagePath": "pages/index/index",
        "text": "主页"
      }
     // ,{ 
     //  "pagePath": "pages/log/log",
     //  "text": "记录"
     // }
    ]
  }

跳转页面

log.wxml
//如果Index页面时在官方的导航栏tabBar中,需要跳转首页
错误写法:
 <navigator url='Pages/index/index'>首页</navigator>
正确写法:
<navigator open-type='switchTab' url='Pages/index/index'>首页</navigator>
解释：tabBar中的页面无法直接使用navigator标签进行跳转，需要设置open-type类型

页面设置标题

app.js
App({
  globalData: { 
    NavigationBarTitle: '标题'
  }
})
log.js
var app = getApp();
//写在onLoad中
onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: "xxx-" + app.globalData.NavigationBarTitle//页面标题为路由参数
    });
}

阻止下拉加载事件

   /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // wx.showNavigationBarLoading() //在标题栏中显示加载
    wx.hideNavigationBarLoading() //完成停止加载
    wx.stopPullDownRefresh();//停止下拉刷新
  }

结语

总体来说，小程序的开发强度对于js有一定的基础还算简单，更多的还是要学会找问题