微信分享 JSSDK的使用
我现在做过的在微信中运行的项目,基本上都有微信分享功能,所以,会使用JSSDK分享页面是非常重要的。
分享功能的代码一般会放在beforeCreate或mounted钩子中,代码如下:
this.$http.get("group/identity")
.then(({data:{code, content, jssdk, msg}}) => {
if (code == 0) {
this.group_id = content.group_id;
if(this.group_id){
this.isSignUpBtn = false;
this.isMyBtn = true; // 这里放分享功能的代码 }
} else {
MessageBox('提示', msg)
}
}, ({data:{msg}}) => {
MessageBox('提示', msg);
});
假如下面是我们请求接口的数据:
{
"code": 0,
"msg": "请求成功的消息",
"content": "这里放数据",
"is_mobile_user": true,
"jssdk": {
"appId": "wxec4d172a4f73ee6f",
"timestamp": "1487756879",
"nonceStr": "58ad5e4f70226",
"signature": "418034b044c61eef9375ada45a1dc373a5e4b7db"
}
}
一切准备就绪之后,我们来根据不同页面的使用方式一一分解:
先说引入的问题:
// 首先,在index.html页面先引入JSSDK文件
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(decodeURI("%3Cscript src='" + _bdhmProtocol + "res.wx.qq.com/open/js/jweixin-1.0.0.js' type='text/javascript'%3E%3C/script%3E"));
</script> // 当然,你也可以用最简单的方式引入
<script src='https://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script> // 我个人比较喜欢第一种。
下面就开始使用了,先来一个代码初级版本的方式:
// 方式一,所有代码直接写在页面里面上,分享出去后,用户直接点击分享的链接就回到当前这个页,不需要拼接 link,有动态参数
// 获取jssdk需要的数据
let jssdk = data.jssdk;
// 配置功能
wx.config({
debug: false,
appId: jssdk.appId,
timestamp: parseInt(jssdk.timestamp),
nonceStr: jssdk.nonceStr,
signature: jssdk.signature,
jsApiList: [
"onMenuShareTimeline",
"onMenuShareAppMessage"
]
});
wx.ready(function () {
wx.onMenuShareTimeline({
title: "我们的战场我们的团,快来为" + self.headerData.class + "王者而战!", // 分享标题
desc: "哥们儿,咱很久没一起排位了,Hey兄弟们!咱该怒砍一血了!",
link: location.href, // 分享链接
imgUrl: "https://tup.iheima.com/sport.png", // 分享图标
success: function () {
// alert("成功");
},
cancel: function () {
// alert("失败")
}
});
wx.onMenuShareAppMessage({
title: "我们的战场我们的团,快来为" + self.headerData.class + "王者荣誉而战!", // 分享标题
desc: "哥们儿,咱很没一起排位了,Hey兄弟们!咱该怒砍一血了!",
link: location.href, // 分享链接
imgUrl: "https://tup.iheima.com/sport.png", // 分享图标
success: function () {
// alert("成功");
},
cancel: function () {
// alert("失败")
}
});
});
// self.headerData.class 为需要动态传入的参数,获取数据的时候直接取出来就行。
// 方式二,所有代码直接写在页面里面上,需要拼接link,一般放在首页或对外分享的主页面,没有动态参数
// 获取jssdk需要的数据
let jssdk = data.jssdk;
// 配置功能
wx.config({
debug: false,
appId: jssdk.appId,
timestamp: parseInt(jssdk.timestamp),
nonceStr: jssdk.nonceStr,
signature: jssdk.signature,
jsApiList: [
"onMenuShareTimeline",
"onMenuShareAppMessage"
]
});
var hostName = 'https://wx.chuangyejia.com/';
var pathName = 'fe-sport/#/home';
wx.ready(function() {
wx.onMenuShareTimeline({
title: "王者荣耀正在招团长,快来一战成名!", // 分享标题
desc: "Hey,兄弟,好久不见!11月7日,王者战场见。",
link: process.env.NODE_ENV === 'development' ? hostName + 'dev/' + pathName : hostName + pathName, // 分享链接
imgUrl: "https://tup.iheima.com/sport.png", // 分享图标
success: function() {
// alert("成功");
},
cancel: function() {
// alert("失败")
}
}); wx.onMenuShareAppMessage({
title: "王者荣耀正在招团长,快来一战成名!", // 分享标题
desc: "Hey,兄弟,好久不见!11月7日,王者战场见。",
link: process.env.NODE_ENV === 'development' ? hostName + 'dev/' + pathName : hostName + pathName, // 分享链接
imgUrl: "https://tup.iheima.com/sport.png", // 分享图标
success: function() {
// alert("成功");
},
cancel: function() {
// alert("失败")
}
});
});
// 方式三,将分享的代码单独剥离出来成一个js文件,然后在需要的地方引入这个js文件。(推荐)
// utils.js文件中有如下代码
const shareJs = function(jssdk, options) {
wx.config({
debug: false,
appId: jssdk.appId,
timestamp: parseInt(jssdk.timestamp),
nonceStr: jssdk.nonceStr,
signature: jssdk.signature,
jsApiList: [
"onMenuShareTimeline",
"onMenuShareAppMessage"
]
});
var defaults = {
title: "分享的标题",
desc: "分享的描述",
link: location.href, //分享页面地址,不能为空
imgUrl: 'https://tup.iheima.com/sport.png', //分享是封面图片,不能为空
success: function() {}, //分享成功触发
cancel: function() {} //分享取消触发,需要时可以调用
}
options = Object.assign({}, defaults, options);
wx.ready(function() {
var thatopts = options;
wx.onMenuShareTimeline({
title: thatopts.title, // 分享标题
desc: thatopts.desc, // 分享描述
link: thatopts.link, // 分享链接
imgUrl: thatopts.imgUrl, // 分享图标
success: function() {
// alert("成功");
},
cancel: function() {
// alert("失败")
}
});
wx.onMenuShareAppMessage({
title: thatopts.title, // 分享标题
desc: thatopts.desc, // 分享描述
link: thatopts.link, // 分享链接
imgUrl: thatopts.imgUrl, // 分享图标
success: function() {
// alert("成功");
},
cancel: function() {
// alert("失败")
}
});
});
} module.exports = {
shareJs
};
// 在home.vue页面中使用
<script type="text/ecmascript-6">
import { shareJs } from './../utils'; // 引入分享功能的js文件
// 需要拼接地址的地方
let jssdk = data.jssdk;
var hostName = 'https://wx.chuangyejia.com/';
var pathName = 'fe-sport/#/home';
let optionData = {
title: "王者荣耀正在招团长,快来一战成名!",
desc: "Hey,兄弟,好久不见!11月7日,王者战场见。",
link: process.env.NODE_ENV === 'development' ? hostName + 'dev/' + pathName : hostName + pathName,
imgUrl: "https://tup.iheima.com/sport.png"
};
shareJs(jssdk, optionData); // 不需要拼接地址的地方
let jssdk = data.jssdk;
// 准备好要传入到utils.js文件中的参数。
let optionData = {
title: "我们的战场我们的团,快来为" + self.headerData.class + "王者荣誉而战!",
desc: "哥们儿,咱很久没一起排位了,Hey兄弟们!咱该怒砍一血了!",
link: location.href,
imgUrl: "https://tup.iheima.com/sport.png"
};
// 将jssdk和分享后展示的参数传入
shareJs(jssdk, optionData); // self.headerData.class 为需要动态传入的参数,获取数据的时候直接取出来就行。
// 或者还可以像下面这样写,先将分享的内容准备后,然后以更简洁的方式赋值给专入到utils.js中
<script>
let fromPath = '';
beforeRouteEnter (to, from, next) {
fromPath = from.path;
next();
},
// 获取fromPath
</script>
let toLink = location.href;
let titleDetail = "我们的战场我们的团,快来为" + self.headerData.class + "王者荣誉而战!";
let destDetail = "哥们儿,咱很久没一起排位了,Hey兄弟们!咱该怒砍一血了!";
// 根据不同的情况来修改分享后显示的文案。
if(fromPath.substr(-1) == "/"){
toLink = "http://wx.chuangyejia.com/mobile/sport/whoami";
titleDetail = "商场王者,快来测试你是王者荣耀里的谁?";
destDetail = "王者荣耀开幕在即,众多神装大佬已整装待发,速来测试你的王者基因,你更适合加入哪支王者战队?"
} let myJssdk = jssdk;
let optionData = {
title: titleDetail,
desc: destDetail,
link: toLink,
imgUrl: "https://tup.iheima.com/sport.png"
};
shareJs(myJssdk, optionData);
有了上面的这些代码之后,下一次再遇到这类需求时,我就更得心应手了。
微信分享 JSSDK的使用的更多相关文章
- Angularjs+ThinkPHP3.2.3集成微信分享JS-SDK实践
先来看看微信分享效果: 在没有集成微信分享js-sdk前是这样的:没有摘要,缩略图任意抓取正文图片 在集成微信分享js-sdk后是这样的:标题,摘要,缩略图自定义 一.下载微信SDK开发包 下 ...
- ThinkPHP3.2.3集成微信分享JS-SDK实践
先来看看微信分享效果:在没有集成微信分享js-sdk前是这样的:没有摘要,缩略图任意抓取正文图片 在集成微信分享js-sdk后是这样的:标题,摘要,缩略图自定义 一.下载微信SDK开发包下载地址:ht ...
- 微信分享JS-SDK
微信JS-SDK,提供给开发者的基于微信内的网页开发工具包 使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微 ...
- 微信分享jssdk config:invalid signature 签名错误
使用微信分享时,按照官方给的demo,使用时一直提示签名错误. 根据微信开发文档(http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd ...
- 关于微信分享JSSDK使用需注意的几点问题
微信公众平台技术文档中有微信JS-SDK说明文档,详情见地址https://mp.weixin.qq.com/wiki 官方给出了使用步骤和DEMO,下面说一下几点需要注意的问题. 1.登录微信公众平 ...
- 微信分享接口 略缩图 php
php插件下载地址: https://files.cnblogs.com/files/fan-bk/jssdk_php.rar 提示:如果插件里面的jssdk.php函数 file_get_cont ...
- 使用JSSDK集成微信分享遇到的一些坑
h5项目中需要集成微信分享,以实现自定义标题.描述.图片等功能.结果遇到了很多坑. 准备工作 务必详细阅读微信JS-SDK说明文档 需要后端支持 强烈建议下载使用微信web开发者工具 按文档配置好公众 ...
- 用c#开发微信 (10) JS-SDK 基本用法- 分享接口“发送到朋友”
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享. ...
- 用c#开发微信(10) JSSDK 基本用法 分享接口“发送到朋友”
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享. ...
随机推荐
- 百度地图JS调用示例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JavaEE 对象的串行化(Serialization)
什么情况下需要序列化 a)当你想把的内存中的对象写入到硬盘的时候:b)当你想用套接字在网络上传送对象的时候:c)当你想通过RMI传输对象的时候:再稍微解释一下:a)比如说你的内存不够用了,那计算机就要 ...
- git subtree pull 错误 Working tree has modifications
git subtree 是不错的东西,用于 git 管理子项目. 本文记录我遇到问题和翻译网上的答案. 当我开始 pull 的时候,使用下面的代码 git subtree pull --prefix= ...
- UVa1635 - Irrelevant Elements
通过观察发现其规律符合杨辉三角 需要注意的是最后ai的系数是C(i-1,n-1) 那么,问题就可以变成判断C(0,n-1),C(1,n-1)....C(n-1,n-1)哪些是m的倍数 只需要计算出m的 ...
- 查找算法(I) 顺序查找 二分查找 索引查找
查找 本文为查找算法的第一部分内容,包括了基本概念,顺序查找.二分查找和索引查找.关于散列表和B树查找的内容,待有空更新吧. 基本概念 查找(search)又称检索,在计算机上对数据表进行查找,就是根 ...
- LINUX 笔记-重定向 :<,<<,>,>>
command>filename 把标准输出重定向到一个新文件中 command>>filename 把标准输出重定向到一个文件中(追加) command 1>filena ...
- MongoDB原子操作
MongoDB原子操作常用命令: 1. $set: 用来指定一个键并更新键值,若键不存在则创建并赋值. { $set : { field : value } } 2. $unset: 用来删除一个键. ...
- LeetCode 531. Longly Pixel I (孤独的像素之一) $
Given a picture consisting of black and white pixels, find the number of black lonely pixels. The pi ...
- python matplotlib 图表局部放大
import matplotlib.pyplot as plt from mpl_toolkits.axes_grid1.inset_locator import zoomed_inset_axes ...
- 使用python实现计算器功能
学习python过程中的作业.实现了+.-.×./.及幂运算,支持括号优先级. 代码为python3.5 import re def formatEquation(string): string = ...