JSSDK公众号微信分享功能

微信公众平台支持前端网页，点击右上角的‘...’，可以选择分享到朋友圈、分享给好友、QQ等微信功能。分享我在项目中添加分享到朋友圈，分享好友的功能的实现。即图一所示的效果。实现的效果为图二所示

图一

图二

先要在项目中引入微信功能的支持文件，即WX的jssdk文件。我在项目中使用的是从外部引入

微信JSSDK，连接在此

1、为了项目整体结构和文件便于维护创建wx.js，将所有wx方法封装

export default function(opts){let {config,data,success,cancel} = opts;      wx.config({debug: false,                    //开启调试模式appId: config.appId,            //公众号的唯一标识timestamp: config.timestamp,  //生成签名的时间戳nonceStr: config.nonceStr,        //生成签名的随机串signature: config.signature,  //签名jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage','hideMenuItems', 'checkJsApi']  //需要使用的JS接口列表});wx.ready(function () {// 分享到朋友圈wx.onMenuShareTimeline({title : data.title,      // 分享标题link : data.link,        // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl : data.imgUrl,   // 分享图标success : function(res) {success && success(res)},cancel : function(res) {cancel && cancel(res)},});// 分享给朋友wx.onMenuShareAppMessage({ title : data.title,       // 分享标题link : data.link,        // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl : data.imgUrl,   // 分享图标desc : data.desc,        // 描述success : function(res) {success && success(res)},cancel : function(res) {cancel && cancel(res)},});wx.hideMenuItems({menuList : [ 'menuItem:editTag', 'menuItem:delete','menuItem:copyUrl', 'menuItem:originPage','menuItem:openWithQQBrowser', 'menuItem:openWithSafari','menuItem:share:email', 'menuItem:share:brand','menuItem:share:qq', 'menuItem:share:weiboApp','menuItem:share:facebook', 'menuItem:share:QZone' ]});});
}//是否显示分享
export function showWxShare(is){if (typeof WeixinJSBridge == "undefined") {if (document.addEventListener) {if(is === true){document.addEventListener('WeixinJSBridgeReady', function(){WeixinJSBridge.call('showOptionMenu');}, false);}else{document.addEventListener('WeixinJSBridgeReady', function(){WeixinJSBridge.call('hideOptionMenu');}, false);}} else if (document.attachEvent) {if(is === true){document.attachEvent('WeixinJSBridgeReady', function(){WeixinJSBridge.call('showOptionMenu');});document.attachEvent('onWeixinJSBridgeReady', function(){WeixinJSBridge.call('showOptionMenu');});}else{document.attachEvent('WeixinJSBridgeReady', function(){WeixinJSBridge.call('hideOptionMenu');});document.attachEvent('onWeixinJSBridgeReady', function(){WeixinJSBridge.call('hideOptionMenu');});}}} else {if(is === true){WeixinJSBridge.call('showOptionMenu');}else{WeixinJSBridge.call('hideOptionMenu');}}
}

2、新建处理签名数据的文件sign.js，使用sha1.js中的hex_sha1方法加密

import {hex_sha1} from '../plugins/sha1.js'        //签名
export default function(data){var urlN = window.location.href.split('#')[0];var timestampn = new Date().getTime().toString();var timestamp = timestampn.substring(0, 10);          //生成签名的时间戳var nonceStr = Math.random().toString(36).substr(2); //生成签名的随机串var con = `jsapi_ticket=${data.ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${urlN}`var signature = hex_sha1(con);     //签名//签名处理后参数   return {appId : data.appId,timestamp : timestamp,nonceStr : nonceStr,signature : signature}
}

3、创建share.js，通过接口获取微信签名，对外暴露方法wxShare方法；

import wxShare from '@/wx/wx.js'  //微信支付
import wxSign from '@/wx/sign.js'        //处理签名数据
/*** 微信签名* @param {Object} params={}* @param {String} weixinName */
export function getWxSign({weixinName='xdbx-zs'} = {}) {return http.get(`${URI.wx}/api/v1/weixin/get_token`, {params:{weixinName}})
}export default function(data,signData){//先获取签名getWxSign(signData).then(res =>{if(res.code == 200){let config = wxSign({ticket:res.content.ticket,appId:res.content.appid})wxShare({config : config,data : data,success : function(res){},cancel : function(res){}})}})
}

4、index.vue页面调用

//index.vue 中调用
import wxShare from '@g/assets/js/wx/share.js'
//微信分享
wxShare(shareData)//分享文案
shareData:{"title" : "分享标题","link" : "分享链接","imgUrl" : "分享小图","desc" : "分享说明"
}

JSSDK公众号微信分享功能相关推荐

微信公众号-- 微信分享功能（分享到朋友和朋友圈显示图片和简介）
1.效果图对比 2.之前踩过的坑页面设置一个隐藏的图片,宽高都是300像素,微信就会抓取这张图片做为分享图片链接:https://blog.csdn.net/aoshilang2249/artic ...
公众号分享页面php,微信公众号网页分享功能开发的示例代码
现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接: 上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的 ...
微信公众号JSAPI分享功能踩坑记录
一,绑定域名分享功能必须是通过企业认证的公众号才有这个权限.可以登陆公众号后在 "开发->接口权限" 里查看是否已获取该权限.然后再进入"公众号设置"的 ...
微信公众号网页分享功能开发
现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接: 上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的 ...
JavaScript 实现微信公众号内分享功能
改变用户点击微信右上角分享时的分享内容 //获取当前页面的url 去掉#之后的内容var url=location.href.replace(location.hash,""); ...
微信小程序web-view内嵌公众号网页分享功能实现
web-view嵌入网页分享,有二种分享情况 1.小程序分享出当前打开的页面 2.部分页面要求,分享指定页面,而不是当前的页面以下是代码部分一.web-view内嵌公众号网页 ...
微信开发：公众号屏蔽分享功能
前言目前就用到啥更新啥..今天更新的是如何使用 JS 屏蔽分享和复制连接功能,这个算是比较常用的功能了,谨防敏感信息泄露,杠精别给我说截图,我不听! 概况先大致的了解一下,所用到函数都是代 ...
微信公众号自定义分享功能
直接上自己最后成功的代码 WxShareController .java 其中JSConfig方法前端报错,后自行让前端传url,改成JSConfig1方法便完美了 package com.youru ...
html5 java 实现微信公众号自动分享功能(自定义文案和图标)
一前端代码 var wurl=location.href.split("#")[0]; console.log(wurl); var code = GetQueryStr ...

JSSDK公众号微信分享功能

1、为了项目整体结构和文件便于维护创建wx.js，将所有wx方法封装

2、新建处理签名数据的文件sign.js，使用sha1.js中的hex_sha1方法加密

3、创建share.js，通过接口获取微信签名，对外暴露方法wxShare方法；

4、index.vue页面调用

JSSDK公众号微信分享功能相关推荐

最新文章

热门文章

JSSDK公众号微信分享功能

1、为了项目整体结构 和 文件便于维护 创建wx.js，将所有wx方法封装

2、新建处理签名数据的文件sign.js，使用sha1.js中的hex_sha1方法加密

3、创建share.js，通过接口获取微信签名，对外暴露方法wxShare方法；

4、index.vue页面调用

JSSDK公众号微信分享功能相关推荐

最新文章

热门文章

1、为了项目整体结构和文件便于维护创建wx.js，将所有wx方法封装