实现H5页面微信分享功能

一.通过微信打开的H5页面实现微信分享功能

首先在公众号管理后台“公众号设置”的“功能设置”里填写JS接口安全域名，域名需要通过ICP备案，没有备案域名可以用SAE、BAE等平台。此外，自定义分享功能需要通过微信认证才能使用，没有认证的可以跟关系好的朋友借用权限，在他的JS接口安全域名设置这里填上你的域名和共享同一个开发者ID。
在需要调用JS接口的页面引入微信JSSDK的JS文件：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js，这个文件在需要分享的页面是必须要引用的，单独特别重申一下，其他方面请阅读官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

// 官方是在title下边引入  我是在body下面直接引用的，没发现有什么问题
//也可以下载到本地
<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

接下来要配置config,我的是通过公司提供的js接口获取的信息，并且调用方法。

var title = '这里面写分享的名字';
var localUrl = encodeURIComponent(location.href.split("#")[0]);
var ajax = new XMLHttpRequwet();
ajax.open("get","公司接口url=" + location.href)
ajax.send();
ajax. onreadstatechange = function(){if(ajax.readyState == 4 && ajax.status == 200) {var {data} = JSON.parse(ajax.responseText)vx.config({debug:false, //测试环境为true appId:data.appId,timestamp:data.timestamp,nonceStr:data.nonceStr,signature:data.signture,jsApilist:['onMenuShareAppMessage',//需要调用的方法'onMenuShareTimeline' ]});wx.ready(function() {var myurl = "http://diy-haier.highset.cn/index.jsp";//分享给朋友wx.onMenuShareAppMessage({title : title, // 分享标题desc : '海尔定制母婴家电，让你魔法加身，搞定养娃的大问题！', // 分享描述link : myurl, // 分享链接imgUrl : 'http://diy-haier.highset.cn/fx.jpg', // 分享图标,填写绝对路径type : 'link', // 分享类型,music、video或link，不填默认为linksuccess : function() {// 用户确认分享后执行的回调函数},cancel : function() {// 用户取消分享后执行的回调函数}});// 分享到朋友圈wx.onMenuShareTimeline({title : title, // 分享标题link : myurl, // 分享链接imgUrl : 'http://diy-haier.highset.cn/fx.jpg', // 分享图标success : function() {// 用户确认分享后执行的回调函数},cancel : function() {// 用户取消分享后执行的回调函数}});});wx.error(function(res) {alert(res.errMsg);});

实现H5页面微信分享功能相关推荐

H5页面微信分享流程和实现(uni-app)
适用场景: 通过uni-app实现的H5页面分享功能. 要求链接必须在微信端内打开.手机上浏览器打开无效. 流程描述: 第一步安装js-sdk. 方式一:NPM安装方式 npm install jwe ...
H5页面微信分享和手Q分享设置
RT: 一. 手Q分享: 如下代码所示:设置好 description,name,image,即可,唯一注意的是image最好是200*200,要不然过小不美观,过大加载太慢 <head> ...
【H5微信授权】简单实现H5页面微信授权功能，微信开发者工具报错系统错误，错误码-1，undefined解决办法【详细】
前言最近写到了H5公众号,需要微信授权的功能. 这里记录一下授权的流程和踩了个坑图片授权代码执行后会跳转到授权的地方,没有授权的会有确认授权,授权过得会这样,直接自动登录,然后再跳转到中转页授 ...
H5页面实现微信分享功能及踩坑历程
看了官网,写的也挺简单的,也在网上搜索了一些demo,然后开始写: 我理解的误区: 我一直以为可以跟app分享一样,有个分享按钮点击触发分享:搜索了很多博客,得到结论,前几年好像是可以通过按钮引导分享 ...
h5页面生成图片分享到微信js_微信端h5页面如何调用分享页面的接口
这次给大家带来微信端h5页面如何调用分享页面的接口,微信端h5页面调用分享页面接口的注意事项有哪些,下面就是实战案例,一起来看一下. 最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加 ...
微信端H5页面调用分享接口
最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加微信分享功能: 本文章主要是记录调用微信分享接口需要注意的事项: 1.前端用的angular1框架,首先需要在index页面引入微信接 ...
微信 H5页面自定义分享link不起作用
微信 H5页面自定义分享link不起作用最近在做这么一个功能: H5页面在微信内打开并通过设置微信自定义分享来分享出指定的标题.图片.link 但是却遇到了问题,分享指定的link没起作用,正常通过 ...
Android微信h5分享,H5网页实现微信分享功能
H5网页实现微信分享功能一,首先在公众号管理后台"公众号设置"的"功能设置"里填写JS接口安全域名,域名需要通过ICP备案,没有备案域名可以用SAE.BAE等 ...
VUE H5页面微信/QQ/微博分享连接设置
VUE H5页面微信/QQ/微博分享连接设置问题想改变分享的标题.副标题.图片以及重定向打开的地址? 解决第一步:在项目控制台里面 npm i -S weixin-js-sdk ( 然后视情况 ...
服务器静态页面分享微信,JS中静态页面如何实现微信分享功能
JS中静态页面如何实现微信分享功能发布时间:2021-07-06 11:09:02 来源:亿速云阅读:65 作者:小新这篇文章主要介绍了JS中静态页面如何实现微信分享功能,具有一定借鉴价值,感兴 ...

实现H5页面微信分享功能

实现H5页面微信分享功能

实现H5页面微信分享功能相关推荐

最新文章

热门文章