封装微信分享和扫一扫

直接上代码

 // 微信API封装
(function (global, factory) {// 插入微信JSDKfunction init(callback) {var src = 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js'; //微信JSDKvar scr = global.document.getElementsByTagName('script')[0];var doc = global.document || window.document;var v   = doc.createElement('script');v.type  = 'text/javascript';v.async = true;v.src   = src;v.onload = function() {callback();}scr.parentNode.insertBefore(v, scr);}typeof wx === "undefined" ? init(factory) : factory();
})(window, function () {var weixin_token = {};var curUrl = window.location.href;// 获取js-sdk// 公共的配置微信参数function wxConfig (jsApiList, wxReadyFn, wxErrorFn) {Fetch.post("/syx/wx/jsapi", {url: location.href.split('#')[0]}).then(res => {weixin_token = reswx.config({debug: false, //appId: weixin_token.appId, // 必填，公众号的唯一标识timestamp: weixin_token.timestamp, // 必填，生成签名的时间戳nonceStr: weixin_token.nonceStr, // 必填，生成签名的随机串signature: weixin_token.signature,// 必填，签名，见附录1jsApiList: jsApiList});wx.ready(function () {console.log("wx ready");console.log(wxReadyFn);if(wxReadyFn) {wxReadyFn();}});wx.error(function (res) {if(wxErrorFn) {wxErrorFn();}console.log(res, 'err')//alert("微信初始化失败，请稍候再试或联系管理员！");});})}/*** 扫一扫* params 个性化配置。支持params={needResult:0,scanType:[''],successCb:function(res){}}*/function scanQRCode (params) {wxConfig(['scanQRCode'], function() {console.log("scanQRCode callback");var conf = {needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ["qrCode","barCode"] // 可以指定扫二维码还是一维码，默认二者都有}conf = Object.assign({}, conf, params);console.log(conf);wx.scanQRCode({needResult: conf.needResult, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: conf.scanType, // 可以指定扫二维码还是一维码，默认二者都有success: function (res) {// var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果if(conf.successCb) {conf.successCb(res);}}});});}/*** 获取地理位置* params 个性化配置。支持params={type:'',successCb:function(res){},cancelCb:function(res){},failCb:function(res){}}*/function getLocation (params) {wxConfig(['getLocation'], function() {var conf = {type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'}conf = Object.assign({}, conf, params);wx.getLocation({type: conf.type, // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: function (res) {//var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90//var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。//var speed = res.speed; // 速度，以米/每秒计//var accuracy = res.accuracy; // 位置精度// callbackif(conf.successCb) {conf.successCb(res);}},cancel: function (res) {if(conf.cancelCb) {conf.cancelCb(res);}},fail: function (res) {if(conf.failCb) {conf.failCb(res);}}});});}// 分享function showShare (opts, callback) {wxConfig(['showOptionMenu', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo'], function() {// 加载完成后回调wx.showOptionMenu();menuShareTimeline(opts, callback);menuShareAppMessage(opts, callback);menuShareQQ(opts, callback);menuShareWeibo(opts, callback);});}// 禁止分享function hideShare (otps) {wxConfig(['hideMenuItems','hideAllNonBaseMenuItem'], function() {// 加载完成后回调wx.hideAllNonBaseMenuItem();});}function menuShareTimeline (opts, callback) {wx.onMenuShareTimeline({title: opts.title || "", // 分享标题imgUrl: opts.img || "",  // 分享图片link: opts.link || "",   // 分享链接desc: opts.desc || "",   // 分享描述success: function () {callback && callback(opts)},error: function (res) {},fail: function (res) {}});}function menuShareAppMessage (opts, callback) {wx.onMenuShareAppMessage({title: opts.title || "", // 分享标题imgUrl: opts.img || "",  // 分享图片link: opts.link || "",   // 分享链接desc: opts.desc || "",   // 分享描述success: function (res) {callback && callback(opts)},cancel: function (res) {},fail: function (res) {}});}function menuShareQQ (opts, callback) {wx.onMenuShareQQ({title: opts.title || "", // 分享标题imgUrl: opts.img || "",  // 分享图片link: opts.link || "",   // 分享链接desc: opts.desc || "",   // 分享描述success: function (res) {callback && callback(opts)},cancel: function (res) {},fail: function (res) {}});}function menuShareWeibo(opts, callback) {wx.onMenuShareWeibo({title: opts.title || "", // 分享标题imgUrl: opts.img || "",  // 分享图片link: opts.link || "",   // 分享链接desc: opts.desc || "",   // 分享描述trigger: function (res) {callback && callback(opts)},success: function (res) {},cancel: function (res) {},fail: function (res) {}});}function menuShareQZone (opts) {wx.onMenuShareQZone({title: opts.title || "", // 分享标题imgUrl: opts.img || "",  // 分享图片link: opts.link || "",   // 分享链接desc: opts.desc || "",   // 分享描述success: function () {},cancel: function () {}});}// 将封装的微信API接口都别名定义到全局变量G上，然后进行暴露到window引用里面G.wxShowShare = showShare;G.wxhideShare = hideShare;G.wxScanQRCode = scanQRCode;G.wxGetLocation = getLocation;// 暴漏接口window._ = Object.assign({}, window._, G);
});

在需要用的地方引入即可扫一扫举例：

 // 参数可以任选，也可以没有_.wxScanQRCode({needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ["qrCode","barCode"] // 可以指定扫二维码还是一维码，默认二者都有successCb: function(res) {console.log("xxx.vue successCb");console.log(res);that.callback(res);}});

封装微信分享和扫一扫相关推荐

封装微信分享到朋友/朋友圈js
在页面引入: <script src="/static/lib/jquery-2.2.2.min.js"></script><script src=& ...
vue 分享微信传参_vue 中使用微信分享接口（简单实用）
前言开发微信小程序时,基本上都要接入微信的SDK,而微信也提供了非常多的接口供我们去完成我们想要的功能.微信分享功能常常是我们在开发中常见的需求之一,本文将围绕微信分享接口使用展开,给自己以后碰到需 ...
uni-app H5兼容ios问题+微信扫一扫、微信支付等常用api代码封装
最近公司需要用uni开发一个项目,项目中遇到的问题记录一下,方便下次不采坑场景: 使用wx自带sdk完成,扫一扫.微信登录.微信支付引用方式: // index.html引入 &l ...
微信JSSDK使用步骤(用于在微信浏览器中自定义分享,分享到朋友圈，拍照，扫一扫等功能)
一.使用JSSDK需要一个公众号(需要认证!): (1).把自己项目的服务器地址输入. (2).把MP_verify_m7Qp93BAuIGDWRVO.txt 文件下载下来,放到该服务器域名指向的根 ...
uniapp 封装微信支付宝web端扫一扫
uniapp 封装微信支付宝与app端的扫一扫 const scan_btn = function(that) { // #ifdef H5let ua = window.navigat ...
分享前后端实现唤起微信扫一扫小demo
一.前置准备工作 1.注册微信公众平台账户,个人可以注册订阅号就可以. 2.查看接口权限是否已开通调起微信扫一扫权限: 3.获取appId和secret参数信息注意:初次注册的公众号,secret没 ...
微信js扫一扫，扫条形码去掉code_128。在vue中封装全局对象的方法，封装微信js-sdk权限验证的方法
微信公众号在调用扫一扫功能时,一维码(条形码)在直接返回结果时会在结果前带上EAN_8, EAN_13, CODE_25, CODE_39, CODE_128, UPC_A, UPC_E wx.sca ...
微信公众号扫一扫封装接口
一.微信准备功能 1.准备备案域名以及80端口服务器本人准备是花生壳6元测试版注册花生壳流程本人博客介绍花生壳IP配置流程 2.申请一个公众号本人申请为个人订阅号(搜索公众号即可注册) 3.公众 ...
wap2app实现打包点微同城APP集成扫一扫，微信分享支付等原生功能
DZ有个点微同城的插件,发现这个插件挺好用的,但是它没有APP,于是就自己动手研究了一段时间点微同城打包成APP 于是便集成了点微同城原生微信登录,原生微信支付,原生支付宝支付以及扫一扫,长按保存海报 ...

封装微信分享和扫一扫

封装微信分享和扫一扫相关推荐

最新文章

热门文章