微信公众号及小程序对接H5分享

微信公众号分享

首先按照官方的介绍流程
公众号官方说明文档
js-sdk说明文档
微信公众号平台
微信 JS 接口签名校验工具

一般的报错微信官方文档的常见错误里面都有描述及分析，本文就不在赘叙；

scene: 公众号分享步骤

下载npm 包 npm i weixin-js-sdk@^1.6.0 -D 目前是1.6.0版本；
导入微信js文件

 let cly = document.createElement('script');cly.type='text/javascript';cly.async = true;// cly.src='https://res.wx.qq.com/open/js/jweixin-1.6.0.js';cly.src='https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';let s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(cly,s);

 import wx from "weixin-js-sdk";created(){const that = thisconst location = decodeURIComponent(window.location.href.split('#')[0])let share = {title: ``, // 分享标!desc: ``, // 分享描述link: location, // 分享链接imgUrl: window.location.origin + imgUrl, // 分享图标type: "link", // 分享类型,music、video或link，不填默认为linkdataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空success: function() {// 用户确认分享后执行的回调函数console.log("分享成功")},cancel: function() {// 用户取消分享后执行的回调函数console.log("取消分享")}};console.log(share)API.wxShare({url}).then(response => {let {timestamp,nonceStr,signature,appId} = response;wx.config({debug: false, appId: appId.replace('\n',''), // 必填，公众号的唯一标识timestamp: timestamp, // 必填，生成签名的时间戳nonceStr: nonceStr, // 必填，生成签名的随机串signature: signature, // 必填，签名jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage",'updateTimelineShareData','updateAppMessageShareData','onMenuShareWeibo'] // 必填，需要使用的JS接口列表});});wx.ready(function() {if(wx.updateTimelineShareData){wx.updateTimelineShareData(share);} else {wx.onMenuShareTimeline(share);}if(wx.updateAppMessageShareData){wx.updateAppMessageShareData(share);} else {wx.onMenuShareAppMessage(share);}wx.onMenuShareWeibo(share)});}

注意：如果页面是以web-view的形式嵌入小程序的，是无法在h5页面直接调用小程序的分享功能，需在小程序中嵌入页面的地方配置分享

scene: 小程序的分享功能，及权限控制。

page({data:{},onShareAppMessage(option) {// 当分享功能被触发时获取web-view中的console.log(option)},onLoad(options) {// wx.hideShareMenu() // 隐藏分享wx.showShareMenu() // 展示分享},
})

scene: 小程序分享的页面是嵌入的h5页面，且分享基于h5里面的内容，如何拿到h5页面的数据

//**配置微信信息**
import wx from "weixin-js-sdk";
created(){let ua = navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i) == "micromessenger"){if(wx.miniProgram){wx.miniProgram.postMessage({data:share})}}
}

微信公众号及小程序对接H5分享相关推荐

Bwsaas框架基于Thinkphp6.x开发的微信公众号，小程序，app，H5等多端打通的框架
完善bwsaas框架并开源原生小程序商业版本前端应用新增 1插件安装升级,安装平台系统插件(type=admin_system)时可同时添加多个角色组(平台系统功能+租户系统功能),需要在group ...
【微信小程序控制硬件第14篇】分享一下我在微信公众号和小程序上实现的几个颜色采集器，轻松集成到您项目实现调光。
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
小程序 php wecahtpay,PHP 微信公众号，小程序获取支付参数。微信支付
PHP 微信公众号,小程序获取支付参数.微信支付发布时间:2018-09-26 11:19, 浏览次数:278 , 标签: PHP 首先下载微信官方demo放入项目中地址:https://gith ...
Appium 解决微信公众号、小程序切换 webview 后无法定位元素的问题
Appium 解决微信公众号.小程序切换 webview 后无法定位元素的问题参考文章: (1)Appium 解决微信公众号.小程序切换 webview 后无法定位元素的问题 (2)https:// ...
微信公众号及小程序开发入门（二）
开发过程中一些对微信公众号和小程序的认识. 一.服务号在公众号开发入门一中提到,微信公众号分为订阅号和服务号,其中服务号功能最强,只准企业申请,并且要每年交300元认证费.如果企业想拥有自己的公众号 ...
ngrok内网穿透工具搭建，方便微信公众号，小程序、钉钉等开发【已投入使用】
前言:微信公众号,小程序.钉钉等开发需要内网穿透工具. 1.经过不断的摸索和调试,完成ngrok内网穿透的工具的搭建,对于微信公众号,小程序.钉钉等开发提供便利性. 2.搭建环境Linux cento ...
企业是先做网站，还是做微信公众号或小程序？
很多企业想开发线上业务,就开始做网站.做微信公众号.做小程序.表面看起来开发线上业务的工具,该有的都有了,结果却不是很理想.因此,有的企业就觉得网上开发客户效果不好,但还是有的企业老板希望能把线上开发 ...
【教程】微信公众号与小程序主体变更看这篇就够了
一.前言不久后公司主体将要变更,为了公司现有的公众号以及小程序能够实现丝滑切换,花了半天时间仔细研究了一下微信主体变更的操作章程.现将其中的要点以及注意点记录整理如下,可供后续有需要做微信公众号或小 ...
私域流量对比：微信公众号、小程序、APP，谁更有价值？
在数字化时代,流量已经成为了互联网企业最重要的资源之一.而对于企业来说,获取到流量只是第一步,如何将流量转化为价值才是最终目的.对于私域流量的获取和转化,微信公众号.小程序和APP是目前最常见的三种方 ...

微信公众号及小程序对接H5分享

微信公众号分享

微信公众号及小程序对接H5分享相关推荐

最新文章

热门文章