微信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 版
Mar 24 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 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
php实现的简易扫雷游戏实例
2015/07/09 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python线程指南详细介绍
2017/01/05 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
python使用建议与技巧分享(一)
2020/08/17 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
国贸专业自荐信范文
2014/03/02 职场文书
会计专业导师推荐信
2014/03/08 职场文书
环境建设实施方案
2014/03/14 职场文书
勾股定理课后反思
2014/04/26 职场文书
爱国口号
2014/06/19 职场文书
班级体育活动总结
2014/07/05 职场文书
网络技术专业求职信
2014/07/13 职场文书
安全标兵事迹材料
2014/08/17 职场文书
横店影视城导游词
2015/02/06 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
python中if和elif的区别介绍
2021/11/07 Python
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库