使用JSSDK优化网页的技巧

一、预加载JSSDK

在网页加载时，预加载JSSDK可以让网页更快地响应用户操作。

(function() {
  var loadScript = function(url, callback){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    if (script.readyState){  //IE
      script.onreadystatechange = function(){
        if (script.readyState == "loaded" || script.readyState == "complete"){
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {  //Others
      script.onload = function(){
        callback();
      };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
  };

  loadScript('https://res.wx.qq.com/open/js/jweixin-1.6.0.js', function() {
    // TODO: JSSDK初始化
  });
})();

二、使用JSSDK进行微信公众号分享

通过JSSDK，可以在网页上设置微信公众号分享的标题、描述和链接。以下为示例代码：

wx.config({
  debug: false,
  appId: '',
  timestamp: '',
  nonceStr: '',
  signature: '',
  jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareWeibo']
});
wx.ready(function () {
  wx.updateAppMessageShareData({ 
    title: '分享标题',
    desc: '分享描述',
    link: '分享链接',
    imgUrl: '分享图标链接',
    success: function () { }
  });
  wx.updateTimelineShareData({ 
    title: '分享标题',
    link: '分享链接',
    imgUrl: '分享图标链接',
    success: function () { }
  });
  wx.onMenuShareWeibo({
    title: '分享标题',
    desc: '分享描述',
    link: '分享链接',
    imgUrl: '分享图标链接',
    success: function () { }
  });
});

三、使用JSSDK进行微信支付

通过JSSDK，可以在网页上进行微信支付。以下为示例代码：

function onBridgeReady() {
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
      "appId": "",                             //公众号名称，由商户传入
      "timeStamp": "",                         //时间戳，自1970年以来的秒数
      "nonceStr": "",                          //随机串
      "package": "",                           //商品包信息，由商户传入
      "signType": "MD5",                       //微信签名方式：
      "paySign": ""                            //微信签名
    },
    function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok" ){
        // TODO: 支付成功后跳转到其他页面
      }
    }
  );
}
if (typeof WeixinJSBridge == "undefined"){
  if( document.addEventListener ){
    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
  }else if (document.attachEvent){
    document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
  }
}else{
  onBridgeReady();
}

四、使用JSSDK获取用户地理位置

通过JSSDK，可以获取用户的地理位置信息。以下为示例代码：

wx.config({
  debug: false,
  appId: '',
  timestamp: '',
  nonceStr: '',
  signature: '',
  jsApiList: ['getLocation']
});
wx.ready(function(){
  wx.getLocation({
    type: 'gcj02',
    success: function (res) {
      var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
      var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
      // TODO: 使用经纬度进行相关操作
    },
    fail: function (res) {
      // TODO: 用户拒绝授权或其他错误处理
    }
  });
});

五、使用JSSDK进行扫码

通过JSSDK，可以在网页上进行扫码操作。以下为示例代码：

wx.config({
  debug: false,
  appId: '',
  timestamp: '',
  nonceStr: '',
  signature: '',
  jsApiList: ['scanQRCode']
});
wx.ready(function(){
  wx.scanQRCode({
    needResult: 1,
    scanType: ["qrCode","barCode"],
    success: function (res) {
      var result = res.resultStr;
      // TODO: 使用扫码结果进行相关操作
    },
    fail: function(res){
      // TODO: 扫码失败处理
    }
  });
});