封装的通过微信JS-SDK实现自定义分享到朋友圈或者朋友的ES6类!
引言:
我们经常在做微信H5的过程中需要自定义分享网页,这个如何实现呢?请看如下的封装的ES6类及使用说明!
/**
* @jssdk js对象,包括appId,timestamp,nonceStr,signature,后台请求过来。
* 以上4个参数,需要后台在公众号相关平台进行配置,然后得出!前端页面必须放在服务号配置的域名下面才可以保证成功!
* options js对象为你自定义要分享的一些参数。
* 用法:
* 1、引入weixinShare.js
* 2、var weixinShare = new weixinShare(jssdk, options);
* 3、默认加载页面时,调用weixinShare.beforeShareJs,这里必须的!
* 4、如果点击分享朋友,则调用weixinShare.shareFriends
* 5、如果点击分享朋友圈,则调用weixinShare.shareCircleFriends
* 备注:通过右上角的分享按钮,则不需要进行点击事件触发。
*/
class weixinShare {
constructor(jssdk, options) {
this.jssdk = jssdk;
this.options = options;
}
beforeShareJs() {
var that = this;
wx.config({
debug: false,//是否开启调试功能,这里关闭!
appId: that.jssdk.appId,//appid
timestamp: parseInt(that.jssdk.timestamp), //时间戳
nonceStr: that.jssdk.nonceStr, //生成签名的随机字符串
signature: that.jssdk.signature,//签名
jsApiList: [
"onMenuShareTimeline",
"onMenuShareAppMessage"
]
});
}
defaultOptions() {
var defaults = {
title: "分享的标题",
desc: "分享的描述",
link: location.href, //分享页面地址,不能为空,这里可以传递参数!!!!!!!
imgUrl: 'https://tup.iheima.com/sport.png', //分享是封面图片,不能为空
success: function () { }, //分享成功触发
cancel: function () { } //分享取消触发,需要时可以调用
}
// 合并对象,后面的替代前面的!
return Object.assign({}, defaults, this.options);
}
shareCircleFriends() {
var thatopts = this.defaultOptions();
wx.onMenuShareTimeline({
title: thatopts.title, // 分享标题
desc: thatopts.desc, // 分享描述
link: thatopts.link, // 分享链接
imgUrl: thatopts.imgUrl, // 分享图标
success: function () {
// alert("成功");
},
cancel: function () {
// alert("失败");
}
});
}
shareFriends() {
var thatopts = this.defaultOptions();
wx.onMenuShareAppMessage({
title: thatopts.title, // 分享标题
desc: thatopts.desc, // 分享描述
link: thatopts.link, // 分享链接
imgUrl: thatopts.imgUrl, // 分享图标
success: function () {
// alert("成功");
},
cancel: function () {
// alert("失败")
}
});
}
}
封装的通过微信JS-SDK实现自定义分享到朋友圈或者朋友的ES6类!的更多相关文章
- 微信js sdk上传多张图片
微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="111111111111 ...
- 实战微信JS SDK开发:贺卡制作与播放(1)
前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...
- 微信JS SDK接入的几点注意事项
微信JS SDK接入,主要可以先参考官网说明文档,总结起来有几个步骤: 1.绑定域名:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.备注:登录后可在“开发者中心”查看对 ...
- vue实现微信分享朋友圈和朋友功能
vue实现微信分享朋友圈和朋友功能 A-A+ haibao 2018-10-25 11 21 6.2 k 百度已收录 前端开发 温馨提示:本文共3536个字,读完预计9分钟. 这两天在开发 ...
- 微信JS SDK配置授权,实现分享接口
微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑, ...
- 微信JS SDK Demo 官方案例[转]
摘要: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用 ...
- 微信js SDK接口
微信JS-SDK说明文档 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 一.微信登录功能 在进行微信OAut ...
- 微信JS SDK PHP Demo
一.JSSDK类定义 <?php class JSSDK { private $appId; private $appSecret; public function __construct($a ...
- 微信JS SDK Demo
微信JS-SDK 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置原文:http://www.cnblogs.com/txw1958/p/ ...
随机推荐
- 简单了解http协议-1
一.概述 1.了解web及网络基础 1.1.使用http协议访问web,web页面是如何呈现的? 1.2.什么是HTTP,概念及特性 1).HTTP协议是Hyper Text Transfer Pro ...
- Django 系列博客(十一)
Django 系列博客(十一) 前言 本篇博客介绍使用 ORM 来进行多表的操作,当然重点在查询方面. 创建表 实例: 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日 ...
- Fiddler无法正常抓取谷歌等浏览器的请求_解决方案
1-先了解Fiddler工作原理: 正常情况下,fiddler是可以抓chrome的请求的. fiddler会自动给浏览器设置一个代理127.0.0.1端口8888,并且记忆浏览器的代理设置,所有的请 ...
- Java开发笔记(十九)规律变化的for循环
前面介绍while循环时,有个名叫year的整型变量频繁出现,并且它是控制循环进出的关键要素.不管哪一种while写法,都存在三处与year有关的操作,分别是“year = 0”.“year<l ...
- Java开发笔记(五十四)内部类和嵌套类
通常情况下,一个Java代码文件只定义一个类,即使两个类是父类与子类的关系,也要把它们拆成两个代码文件分别定义.可是有些事物相互之间密切联系,又不同于父子类的继承关系,比如一棵树会开很多花朵,这些花儿 ...
- Web前端:博客美化:一、模板美化
1.选用模板simplememory 2.写css放在 这些会覆盖掉原来的css样式 我是在网上找的css代码二次加工的 : ) /*1.针对simplememory的修改*/ #google_ad_ ...
- 广州.NET微软技术俱乐部与其他技术群的区别
.NET和微软技术相关的微信群有不少, 那么广州.NET微软技术俱乐部与其他技术群的区别是什么呢? 有十分大的区别! 本群公告写得很清楚! 本群坚决禁止讨论“JAVA和.NET哪个好”.“NET有没有 ...
- Android项目实战(一): SpannableString与SpannableStringBuilder(转)
前言: 曾经在一些APP中的一些类似“帮助”“关于”的界面看过一行文字显示不同的颜色的效果,如下效果: 本软件是一款高.大.上的社区类软件. 一般来说,这应该是由一个TextView来显示的,但是自己 ...
- 从零学习Fluter(四):Flutter中ListView组件系列详展
今天继续研究了一些Flutter,主要时关于ListVIew那一块的东西,有 SingleChildScrollViewListViewGridViewCustomScrollView 感觉Flutt ...
- 安卓开发:UI组件-RadioButton和复选框CheckBox
2.5RadioButton 为用户提供由两个及以上互斥的选项组成的选项集. 2.5.1精简代码 在按钮变多之后,多次重复书写点击事件有些繁琐,我们在这里创建一个事件OnClick,每次点击时调用该事 ...