网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 微信jssdk用法汇总
内容
    本文针对微信jssdk用法进行了详细汇总，分享给大家，供大家参考，具体内容如下
    1.绑定域名
    2.引入js文件 
    在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js 
    请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK
    3.通过config接口注入权限验证配置 
    这一步是通过用当前的url向后台发请求拿到一系列参数。即后台会拿我的url去向微信进行认证。这里需要注意的事用于验证的当前的url写法， 
    let url = location.href.split(‘#')[0]; 
    务必写成以上形势。否则会在进行config时报invalid signature，
    确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。
    确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
    注意这里的动态，不要随便自己拼接，同时encodeURIComponent。
    $.ajax({
      type:'GET', 
      url: url,
      dataType: 'jsonp'
    })
    .then((data)=> {
     wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
     appId: '', // 必填，公众号的唯一标识
     timestamp: , // 必填，生成签名的时间戳
     nonceStr: '', // 必填，生成签名的随机串
     signature: '',// 必填，签名，见附录1
     jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    })
    4.通过ready接口处理成功验证 
    config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    wx.ready (()=> {
       // alert('ready');
       //$('#onMenuShareAppMessage').on('click', ()=> {
        // 分享给朋友
        wx.onMenuShareAppMessage({
         title: '',
         desc: '',
         link: shareUrl,
         imgUrl: '',
         trigger: function (res) {
         // alert('用户点击发送给朋友');
         },
         success: function (res) {
         alert('已分享');
         },
         cancel: function (res) {
         alert('已取消');
         },
         fail: function (res) {
         alert(JSON.stringify(res));
         }
        });
       //});
       //分享到朋友圈
       wx.onMenuShareTimeline({
        title: '', // 分享标题
        link: shareUrl, // 分享链接
        imgUrl: '', // 分享图标
        success: function () { 
         alert('已分享');
         // alert($('.no-num').html());
        },
        cancel: function () { 
         alert('已取消');
         // 用户取消分享后执行的回调函数
         // alert('取消');
        }
       });
      });
    5.通过error接口处理失败验证 
    config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看
    wx.error((res)=> {
      alert(res.errMsg);
    })
    6.基础接口
    •分享到朋友圈接口
    wx.onMenuShareTimeline({
     title: '', // 分享标题
     link: '', // 分享链接
     imgUrl: '', // 分享图标
     success: function () { 
      // 用户确认分享后执行的回调函数
     },
     cancel: function () { 
      // 用户取消分享后执行的回调函数
     }
    });
    •分享给好友的接口
    wx.onMenuShareAppMessage({
     title: '', // 分享标题
     desc: '', // 分享描述
     link: '', // 分享链接
     imgUrl: '', // 分享图标
     type: '', // 分享类型,music、video或link，不填默认为link
     dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
     success: function () { 
      // 用户确认分享后执行的回调函数
     },
     cancel: function () { 
      // 用户取消分享后执行的回调函数
     }
    });
    如果这里需要在分享的内容中加入用ajax异步请求拿到的内容，必须在ajax请求返回后的成功函数中再调用一次该分享接口，但是必须将分享接口放在wx.ready函数中，不能单独调用。因为客户端分享操作是一个同步操作，这时候使用 ajax的数据还没有返回。 
    7. 这些步骤看起来似乎比较简单，但是调试的过程中难免会遇到很多问题，因为jssdk接口还是有很多的限制的。一不小心就踩到了坑。 
    8. 最后，我将这个接口进行了一下封装。
    'use strict';
    let wxDefaultOptions = {
     debug: true,
     appId: '',
     timestamp: 0,
     nonceStr: '',
     signature: '',
     jsApiList: [
     'checkJsApi',
     'onMenuShareTimeline',
     'onMenuShareAppMessage',
     'onMenuShareQQ',
     'onMenuShareWeibo',
     'hideMenuItems',
     'showMenuItems',
     'hideAllNonBaseMenuItem',
     'showAllNonBaseMenuItem',
     'translateVoice',
     'startRecord',
     'stopRecord',
     'onRecordEnd',
     'playVoice',
     'pauseVoice',
     'stopVoice',
     'uploadVoice',
     'downloadVoice',
     'chooseImage',
     'previewImage',
     'uploadImage',
     'downloadImage',
     'getNetworkType',
     'openLocation',
     'getLocation',
     'hideOptionMenu',
     'showOptionMenu',
     'closeWindow',
     'scanQRCode',
     'chooseWXPay',
     'openProductSpecificView',
     'addCard',
     'chooseCard',
     'openCard'
     ]
    };
    //let shareUrl = 'http://xxx' + location.pathname;
    let getWxParam = (url, wxOptions) => {
     let url = location.href.split('#')[0];
     url = encodeURIComponent(url);
     let promise = new Promise((resolve, reject)=> {
      $.ajax({
       type:'GET',
       url: 'http://xxx/xxx?param='+url,
       dataType: 'jsonp'
      })
      .then((data)=> {
       let wxParam = data;
       console.log(wxParam);
       wxOptions.appId = 'wxeb5c3f4a03b880f0';
       wxOptions.timestamp = wxParam.timestamp;
       wxOptions.nonceStr = wxParam.nonceStr;
       wxOptions.signature = wxParam.signature;
       wx.config(wxOptions);
       wx.error((res)=> {
        alert(res.errMsg);
       })
       resolve();
      }, (error)=> {
       console.log(error);
      })
     });
     return promise;
    }
    //分享到朋友圈
    let shareSocial = (param)=> {
     wx.onMenuShareTimeline({
       title: param.title, // 分享标题
       link: param.link, // 分享链接
       imgUrl: param.imgUrl, // 分享图标
       success: function () { 
        // 用户确认分享后执行的回调函数
        param.suCallback();
       },
       cancel: function () { 
        // 用户取消分享后执行的回调函数
        param.failCalback();
       }
      });
    }
    //分享给好友
    let shareToFriends = (param) => {
     wx.onMenuShareAppMessage({
       title: param.title,
       desc: param.desc,
       link: param.link,
       imgUrl: param.imgUrl,
       trigger: function (res) {
       },
       success: function (res) {
       param.suCallback();
       },
       cancel: function (res) {
       },
       fail: function (res) {
       param.failCalback();
       console.alert(JSON.stringify(res));
       }
     });
    }
    //title,desc,link,imgUrl,suCallback, failCalback
    let jssdk = (param) => {
     wx.ready(()=> {
      //分享到朋友圈
      shareSocial(param);
      shareToFriends(param);
     })
    }
    function callWx(param, wxoptions) {
     getWxParam(param.url, wxOptions).then(()=> {
      jssdk(param);
     })
    }
    //param = {url: '', title:'',desc:'',link:'',imgUrl:'',suCallback:func, failCalback: func}
    module.exports = {
     wxDefaultOptions,//更改配置
     callWx, //默认配置，进行config配置 和ready后定制微信分享内容,
    }
    以上就是本文的全部内容，希望对大家的学习有所帮助
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/18 8:33:46