微信jssdk用法汇总


Posted in Javascript onJuly 16, 2016

本文针对微信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后定制微信分享内容,
}

本文已被整理到了《JavaScript微信开发技巧汇总》,欢迎大家学习阅读。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不错的JS中变量相关的细节分析
Aug 13 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
完美解决js传递参数中加号和&号自动改变的方法
Oct 11 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
浅析为什么a="abc" 不等于 a=new String("abc")
Oct 25 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 #Javascript
很棒的js选项卡切换效果
Jul 15 #Javascript
轻松5句话解决JavaScript的作用域
Jul 15 #Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 #Javascript
IE下JS保存图片的简单实例
Jul 15 #Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 #Javascript
JavaScript6 let 新语法优势介绍
Jul 15 #Javascript
You might like
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
PHP7新功能总结
2019/04/14 PHP
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
Python如何实现转换URL详解
2019/07/02 Python
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
项目投资意向书
2014/04/01 职场文书
交通事故私了协议书
2014/04/16 职场文书
社会调查研究计划书
2014/05/01 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle