微信JSSDK使用步骤(用于在微信浏览器中自定义分享,分享到朋友圈,拍照,扫一扫等功能)
一、使用JSSDK需要一个公众号(需要认证!):
(1)、把自己项目的服务器地址输入。
(2)、把MP_verify_m7Qp93BAuIGDWRVO.txt 文件下载下来,放到该服务器域名指向的根目录!
这样基础工作就完成了!
二、后台生成前端需要的参数!
(1)、前端想要实现分享、扫一扫等等需要的参数!
wx.config({debug: false,//是否开启调试功能,这里关闭!appId: jssdk.appId,//appidtimestamp: parseInt(jssdk.timestamp), //时间戳nonceStr: jssdk.nonceStr, //生成签名的随机字符串signature: jssdk.signature,//签名jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage"]});
(2)、后端代码获取参数实现如下:
微信官方后台代码: http://demo.open.weixin.qq.com/jssdk/sample.zip
三、前端代码封装实现:
(一)、页面中引入!
<script src='https://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script>
(二)、请求后台的接口,获取步骤二中展示的需要的参数,然后调用如下的封装的函数即可实现自定义分享,扫一扫、拍照等功能!
/*** @param {jssdk为从后台请求过来的各种信息,包括appId,timestamp,nonceStr,signature} jssdk * 以上4个参数,需要后台在公众号相关平台进行配置,然后得出!前端页面必须放在服务号配置的域名下面才可以保证成功!* @param {为js对象格式,options里面包含自定义的title,desc,link,imgUrl} options * 引入jweixin文件后,直接调用该函数,即可实现自定义分享功能*/function shareJs(jssdk, options) {wx.config({debug: false,//是否开启调试功能,这里关闭!appId: jssdk.appId,//appidtimestamp: 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("失败")}});});
}
微信JSSDK使用步骤(用于在微信浏览器中自定义分享,分享到朋友圈,拍照,扫一扫等功能)相关推荐
- SpringMVC实现微信链接分享到朋友圈显示图片功能微信JS-SDK调用步骤
SpringMVC实现微信链接分享到朋友圈显示图片功能微信JS-SDK调用步骤 一.登录微信平台 login url:https://mp.weixin.qq.com/ name: your name ...
- 微信JSSDK使用步骤
最近在做一个公众号项目,其中用到了微信的[扫一扫],如何在项目中接入扫一扫呢?下面开始详细说说. 首先查看文档,之前也看到过很多人抱怨腾讯的文档.不得不说,微信的文档写的真的是"普通&quo ...
- vue怎么设置封面_微信朋友圈封面视频如何制作?微信朋友圈封面视频制作软件VUE功能介绍...
貌似最近挺火的,很多人都把朋友圈相册封面变成了小视频,有声音还可以动;那么微信朋友圈封面视频如何制作呢?下面请看微信朋友圈封面视频制作软件VUE功能介绍. 微信朋友圈封面视频制作软件:VUE VUE怎 ...
- android com.mylhyl,Android 高仿微信朋友圈拍照上传功能
模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. photopicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间 ...
- android 微信高仿,Android 高仿微信朋友圈拍照上传功能
模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. PhotoPicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间 ...
- 微信朋友圈是访问腾讯服务器吗,微信朋友圈疑似增加“来访”新功能?网友:再也不看朋友圈了!...
原标题:微信朋友圈疑似增加"来访"新功能?网友:再也不看朋友圈了! 微信朋友圈疑似增加"来访"新功能?网友:再也不看朋友圈了! 作为当今中国最大的社交软件,微信 ...
- 微信小程序/uniapp分享功能-代码封装与使用(分享好友或朋友圈-两种方式)
官方地址:分享 | uni-app官网 一.分享朋友圈-详见uni-app官方文档 注意:更多注意事项见uni-app文档 结果展示: 二.分享好友或者朋友圈-详见微信开放文档 先展示: 实现分享 ...
- 微信JS-SDK使用步骤(以微信扫一扫为例)
概述: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用 ...
- html微信浏览器缩略图,微信内通过自带浏览器分享网页到朋友圈如何显示缩略图...
问题描述 我们在app分享一个网页到朋友圈,可以显示缩略图的网页的title(因为使用的是第三方分享有相关参数可以设置).但在朋友圈点击这个网页用微信自带浏览器打开,通过右上角分享到朋友圈时,不会有缩 ...
最新文章
- SpringCloud Alibaba微服务实战(三) - Nacos服务创建消费者(Feign)
- 如何蒸螃蟹?教你蒸螃蟹3个小窍门
- 第四冠!腾讯AI「绝艺」斩获世界智能围棋公开赛冠军
- 满足多个条件的JAVA语句_关于Java:关于具有多个条件的If语句的快速问题
- Git协助方式:Fork项目开发新功能并使用Pull-Request把新特性推送给原项目
- raid5加热备盘_联想服务器X3650 M2 配置RAID5与热备盘图文方法
- Elastic 技术栈之 Filebeat
- Lottie动画 轻松使用
- 金蝶Cloud取物料最后一次采购入库价格
- Ubuntu 11.10ibus万能五笔
- 内存颗粒的逻辑bank理解
- java 生成水印_Java实现图片生成水印
- 共青团课程华育兴业java_华育兴业|Java程序员金三银四必备面试题及答案(基础篇)...
- 二维数组更改vue,VueX中直接修改数据报错,修改一维数组,二维数组,报错的原因...
- Hadoop从零开始的搭建(伪分布式)
- 【PC工具】压缩包密码破解工具,暴力破解压缩包密码,解压密码获取
- MySQL求百分比带百分号%
- Element学习使用
- 【谷粒学院】001-项目概述、Mybatis Plus入门
- ESP32学习11:PWM