微信JSSDK分享到朋友圈和朋友自定义内容功能实现
时间:2022-04-27
本文章向大家介绍微信JSSDK分享到朋友圈和朋友自定义内容功能实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.6433997488875112#gaishu
本Demo是基于之前几个例子写的。本Demo相当简单。
JSSDK使用步骤
步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如需使用摇一摇周边功能,请引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
步骤三:通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见附录1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
通过Ajax请求Java后台返回数据
$(function(){
$.ajax({
type:'get',
url:url,//填写自己的后台方法路径
dataType:'jsonp',
jsonpCallback: "js",
success:function(sign){
$("#url").val(sign.url);
$("#tk").val(sign.jsapi_ticket);
$("#appId").val(sign.appId);
$("#nonceStr").val(sign.signature);
$("#timestamp").val(sign.timestamp);
$("#signature").val(sign.signature);
wx.config({
debug: true,//必须开启的debug调试 以便查询错误,快速定位解决
//jsapi_ticket:sign.jsapi_ticket,
//url:sign.url,
appId: sign.appId,
timestamp: sign.timestamp,
nonceStr: sign.nonceStr,
signature: sign.signature,
//接口列表
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onRecordEnd',
'playVoice',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard',
'configWXDeviceWiFi'
]
});
}
});
});
获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
wx.ready(function () {
// 分享到朋友圈
wx.onMenuShareTimeline({
title: '测试朋友圈', // 商品名
link: 'http://www.qq.com', // 商品购买地址
desc: '测试分享到朋友圈', // 描述
imgUrl: 'http://135523_DRVV_1444646.jpg', // 分享的图标
fail: function (res) {
alert(JSON.stringify(res));
}
});
});
“分享到朋友圈”按钮点击状态及自定义分享内容接口截图示意
图1显示为JSSDK接入成功。可以查看我的另一篇博文。
图2则是选择分享到朋友圈操作
图3显示点击后是分享到朋友圈还是转发给朋友的信息
图4显示为分享到朋友圈的一个操作
图5显示分享到朋友圈成功。如果取消。则显示取消信息
获取“分享给朋友”按钮点击状态及自定义分享内容接口
wx.ready(function () {
// 分享给朋友
wx.onMenuShareAppMessage({
title: '测试分享转发给朋友', // 商品名
desc: '测试分享转发给朋友', // 描述
link: 'http://www.qq.com', // 商品购买地址
imgUrl: 'http://stati_1444646.jpg', // 分享的图标
fail: function (res) {
alert(JSON.stringify(res));
}
});
});
获取“分享给朋友”按钮点击状态及自定义分享内容接口截图示意
图1显示为J选择分享给朋友。
图2则是选择分享到朋友打印的信息
图3显示点击后是分享到指定朋友的一个操作
图4显示为分享到朋友完成后的一个信息
微信JSSDK分享到 “朋友圈”转发给“朋友”例子就这些。JSSDK接口相对于来说难度较小。
- (四) 如何将socket设置为非阻塞模式
- Scala Collections集合的几个重要概念
- (五)如何编写高性能日志
- Scala之偏函数Partial Function
- (六)关于网络编程的一些实用技巧和细节
- 快学Scala习题答案汇总
- (八)高性能服务器架构设计总结1——以flamigo服务器代码为例
- (八)高性能服务器架构设计总结2——以flamigo服务器代码为例
- Scala集合练习题
- 机器学习(10)之趣味案例理解朴素贝叶斯
- Spart DataSet数据集
- (八)高性能服务器架构设计总结3——以flamigo服务器代码为例
- (八)高性能服务器架构设计总结4——以flamigo服务器代码为例
- SQL员工部门表综合查询60题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- element-ui 实现嵌套表格
- Leetcode 第23场双周赛A 5360. 统计最大组的数目 (手速题,map)
- Java 水题系列(4)数组合并
- SpringBoot 整合 SpringDataJPA
- Codeforces Beta Round #51 C. Pie or die(博弈 思维)
- SpringDateJPA 系列之 JPA 中的相关操作
- python Turtle 画出“精美碎花小清新树”快来拿代码!
- SpringDataJPA 系列之 JPA 简介
- Leetcode 264. 丑数 II (数论,三指针,类dp)
- Leetcode 628. 三个数的最大乘积 (数学)
- Vue 组件化开发
- Spring Boot 基础配置
- 读懂 Java 单例模式
- 数值分析第一次实习题报告
- Leetcode 409. 最长回文串 (Hash)