Taro框架中开发H5使用微信分享

第一步先引入微信jsSDK

//微信分享js
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js "></script>

由于做的是H5，所以需要先检测用户是用普通浏览器打开的项目，还是用微信浏览器打开的项目，在你需要做分享的页面封装一个检测方法。

//检测浏览器的方法isWeiXin = () => {var ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == 'micromessenger') {console.log(" 是来自微信内置浏览器")return true;} else {console.log("不是来自微信内置浏览器")return false;}}

根据返回的不同值来做分享操作，普通浏览器是长按复制链接分享，微信浏览器里面是提示点击右上角分享。

普通浏览器分享操作

微信浏览器分享操作

分享的js代码，初始化配置参数需要后台给，这样就可以分享出去给用户看到了。

wx.config({debug: false,appId: '',timestamp: '',nonceStr: '',signature: '',jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']});// 微信JSSDK开发wx.ready(function () {// 分享给朋友wx.onMenuShareAppMessage({title: '', // 标题desc: '', // 说明文字link: '', // 链接imgUrl: '', // 分享的图标fail: function (res) {alert(JSON.stringify(res));}});// 分享到朋友圈wx.onMenuShareTimeline({title: '', // 标题link: '', // 链接imgUrl: '', // 分享的图标fail: function (res) {alert(JSON.stringify(res));}});});

Taro框架中开发H5使用微信分享相关推荐

H5实现微信分享自定义地图
这几天紧急开发一个拼团+砍价的H5微信小商城.技术用的是:前端Vue+Vant快速开发组件框架.后端java. 使用微信js-sdk流程图: 微信公众平台测试帐号申请地址:https://mp.wei ...
Taro框架中 Image 和 Video 组件预览图片/视频时添加明显的关闭按钮以关闭全屏预览
需求 Taro框架中 Image 和 Video 组件预览图片/视频时添加明显的关闭按钮以关闭全屏观看,避免用户直接操作返回后导致页面空白(原有消息记录消失 - 重新进入项目首页) [补充] 全屏 ...
uniapp 微信小程序最近写的两个小程序中都会有，微信分享的设置，每次都在单个页面中写相同的内容，修改很不友好。下面全局分享代码做了记录
最近写的两个小程序中都会有,微信分享的设置,每次都在单个页面中写相同的内容,修改很不友好.下面全局分享代码做了割记录首先在小程序中配置微信分享,和微信朋友圈, onShareAppMessage, ...
uniapp 开发H5打包微信小程序样式失效的解决之道
使用uniapp开发H5,样式已经按照UI设计稿全部实现.但是在打包微信小程序调试的时候,遇到很多样式失效的问题.问了度娘很久,并没有完全解决样式失效的问题.于是自己按照从度娘上查到的方法去进行组合尝 ...
uniapp——开发微信H5调用jweixin微信js-sdk(uniapp开发H5使用微信扫一扫功能)
小伙伴们,大家有没有开发过网页或者H5等等web页面时候遇到需要调用微信的jweixin.js的呢? 小编在开发过程中遇到了一个问题,因为我的项目是微信小程序内链的H5页面,所以当时我就使用uniap ...
H5 -- 自定义微信分享第三方页面链接的标题和小缩略图
需求:自定义微信分享第三方页面链接的标题和小缩略图(如图) 2018.6.4更新线 - - - - - - - - - - - - - - - - - - 更新:微信6.5.5版本以后调整了分享规则, ...
H5页面微信分享和手Q分享设置
RT: 一. 手Q分享: 如下代码所示:设置好 description,name,image,即可,唯一注意的是image最好是200*200,要不然过小不美观,过大加载太慢 <head> ...
微信html5开发常见bug,微信公众号H5之微信分享常见错误和问题
url转码确认 url是页面完整的 url(请在当前页面 alert(location.href.split('#')[0])确认),包括 'http(s)/'部分,以及'?'后面的 GET参数部分 ...
uni-app跨端开发H5、微信小程序、支付宝小程序遇到的坑
文章目录微信支付宝小程序通用功能 1.checkbox样式 2.分享功能支付宝小程序参数微信小程序参数其他兼容问题 H5 微信小程序支付宝小程序持续更新中... 微信支付宝小程序通用功能 ...
html5网页分享到朋友圈,微信公众平台网页开发实战--1.微信分享一个网页到朋友圈...
对微信的JSSDK进行封装一下,创建一份类似的文件结构,增加index.html与shareApi.js文件,结构如图3.3所示. 图3.3 3.2节文件结构另外,提醒读者一下,wxJSSDK.j ...

Taro框架中开发H5使用微信分享

Taro框架中开发H5使用微信分享

由于做的是H5，所以需要先检测用户是用普通浏览器打开的项目，还是用微信浏览器打开的项目，在你需要做分享的页面封装一个检测方法。

普通浏览器分享操作

微信浏览器分享操作

分享的js代码，初始化配置参数需要后台给，这样就可以分享出去给用户看到了。

Taro框架中开发H5使用微信分享相关推荐

最新文章

热门文章