引言:

我们经常在做微信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类!的更多相关文章

  1. 微信js sdk上传多张图片

    微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="111111111111 ...

  2. 实战微信JS SDK开发:贺卡制作与播放(1)

    前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...

  3. 微信JS SDK接入的几点注意事项

    微信JS SDK接入,主要可以先参考官网说明文档,总结起来有几个步骤: 1.绑定域名:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.备注:登录后可在“开发者中心”查看对 ...

  4. vue实现微信分享朋友圈和朋友功能

    vue实现微信分享朋友圈和朋友功能 A-A+ haibao  2018-10-25  11  21  6.2 k  百度已收录  前端开发 温馨提示:本文共3536个字,读完预计9分钟. 这两天在开发 ...

  5. 微信JS SDK配置授权,实现分享接口

    微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑, ...

  6. 微信JS SDK Demo 官方案例[转]

    摘要: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用 ...

  7. 微信js SDK接口

    微信JS-SDK说明文档 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 一.微信登录功能 在进行微信OAut ...

  8. 微信JS SDK PHP Demo

    一.JSSDK类定义 <?php class JSSDK { private $appId; private $appSecret; public function __construct($a ...

  9. 微信JS SDK Demo

    微信JS-SDK 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置原文:http://www.cnblogs.com/txw1958/p/ ...

随机推荐

  1. Python迭代和解析(2):迭代初探

    解析.迭代和生成系列文章:https://www.cnblogs.com/f-ck-need-u/p/9832640.html 在Python中支持两种循环格式:while和for.这两种循环的类型不 ...

  2. mac终端代理

    终端代理,需要首先有自己的梯子,以下方式需要配合shadowsocks 终端FQ有很多好处,对于一个程序员来说,墙外有很多优秀的代码,走终端可以方便下载和使用- (编程思想强调复用,软件开发避免重复造 ...

  3. 经典JS的HTML转义与反转义字符

    //HTML转义 function HTMLEncode(html) { var temp = document.createElement ("div"); (temp.text ...

  4. WPF 客户端浏览器 添加Loading加载进度

    在windows开发界面时,使用浏览器来请求和显示网页内容,是比较常见的. 但是在请求网页内容时,因网速或者前端功能复杂加载较慢,亦或者加载时遇到各种问题,如空白/黑屏/加载不完整/证书问题等. 因此 ...

  5. [PHP] 魔术方法__get __set __sleep __wakeup的实际使用

    1.__get __set是在给不可访问属性赋值和读取时,调用 2.__sleep 是在序列化对象的时候调用 3.__wakeup是在反序列化对象的时候调用 4.可以在序列化对象的时候 , 只序列化指 ...

  6. php 日期时间类型带毫秒

    <?php date_default_timezone_set('PRC'); $mtimestamp = sprintf("%.3f", microtime(true)); ...

  7. python学习笔记(十 四)、web.py

    使用web.py 通过python进行网页的编写,下面我们来简单了解一哈web.py 的使用 1 url处理 使用特定的url结构来解析我们发送的请求.如下面所示: urls = ( '/login' ...

  8. Java开发笔记(七十四)内存溢出的两种错误

    前面介绍的几种异常,其实都存在这样那样的逻辑问题,属于程序员的编码手误.还有一大类系统错误,表面上看不出什么问题,但是程序仍然运行不下去,兹举二例说明.第一个例子且看下列的测试代码: // 测试内存溢 ...

  9. TiDB

    由于目前的项目把mysql换成了TiDb,所以特意来了解下tidb.其实也不能说换,由于tidb和mysql几乎完全兼容,所以我们的程序没有任何改动就完成了数据库从mysql到TiDb的转换,TiDB ...

  10. Mysql基本操作指令集锦

    一.MySQL服务的启动.停止与卸载 在 Windows 命令提示符下运行: 启动: net start MySQL 停止: net stop MySQL 卸载: sc delete MySQL 二. ...