微信JSSDK使用步骤(用于在微信浏览器中自定义分享,分享到朋友圈,拍照,扫一扫等功能)

时间:2023-01-10 10:46:46

一、使用JSSDK需要一个公众号(需要认证!):

(1)、把自己项目的服务器地址输入。

(2)、把MP_verify_m7Qp93BAuIGDWRVO.txt  文件下载下来,放到该服务器域名指向的根目录!

   这样基础工作就完成了!

微信JSSDK使用步骤(用于在微信浏览器中自定义分享,分享到朋友圈,拍照,扫一扫等功能)

 二、后台生成前端需要的参数!

  (1)、前端想要实现分享、扫一扫等等需要的参数!

 wx.config({
debug: false,//是否开启调试功能,这里关闭!
appId: jssdk.appId,//appid
timestamp: 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,//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("失败")
}
});
});
}

微信JSSDK使用步骤(用于在微信浏览器中自定义分享,分享到朋友圈,拍照,扫一扫等功能)的更多相关文章

  1. ASP调用SDK微信分享好友、朋友圈

    ASP调用SDK微信分享好友.朋友圈需要用到sha1.asp,我先来上主代码,然后再附加sha1.asp,方便大家直接复制过去即可使用. 页面:shara.asp 1 <%@LANGUAGE=& ...

  2. 微信JS-SDK使用步骤&lpar;以微信扫一扫为例&rpar;

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

  3. Android之微信开放平台实现分享(分享好友和朋友圈)

    开发中分享操作往往经常遇到,而且还是一些比较大型一定的平台,如微信,QQ,微博等.写这篇博客主要是把微信的的分享和相关操作表达一下,分享可以包含:文字,视频,音乐,图片等分享. 分享可以有 分享给好友 ...

  4. 在做微信分享到朋友圈时,手机扫码报config&colon;invalid signature,分享后后正常的问题,是url问题

    是按照以下步骤检查的 除了ACCESS_TOKEN没有缓存其他都可以 如果是invalid signature签名错误.建议按如下顺序检查: 1.确认签名算法正确,可用 http://mp.weixi ...

  5. web网页外部分享到微信、朋友圈、扣扣、微博等功能、自动生成二维码等

    1.这里重中之重是分享到微信:web端网页通常是没有权限分享过去的 所以用: weixin://dl/business/?ticket=ta428dhj739hg3efe6e  但是这个ticket真 ...

  6. vue 仿微信朋友圈9张图上传功能

    项目需求要求用户上传商品的时候可以一次性上传9张图,多余9张提示‘只能上传9张图’,并且每张图右上角有个删除按钮,图片也可以点击放大. 出来的效果图如下: 话不多说,上代码: <el-form- ...

  7. &period;Net微信网页开发之JSSDK使用步骤和配置信息timestamp&lpar;时间戳&rpar;,nonceStr&lpar;随机串&rpar;,signature&lpar;签名&rpar;,access&lowbar;token&lpar;接口调用凭据&rpar;的生成获取讲解

    前言: 因为接下来会有几篇关于微信JS-SDK功能使用的文章,主要会对微信分享,获取设备信息,获取地理位置,微信扫一扫这几个功能进行讲解.而这几个功能都是围绕着微信JS-SDK实现的,首先使用微信JS ...

  8. 基于Node&period;js的微信JS-SDK后端接口实现

    做了一个网站,放到线上,用微信打开,点击分享,可是分享后发给朋友的链接卡片是微信默认自带的,如下: 这标题,描述以及图片是默认自带的,丑不说,分享给别人还以为是盗号网站呢,而接入微信的JSSDK后,分 ...

  9. 微信公众号&lowbar;订阅号&lowbar;微信JS-SDK网页开发

    微信JS-SDK( 分享接口很常用 ) 是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包 借助微信高效使用相机.语音.选题.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.支付等 ...

随机推荐

  1. git &period;gitignore 文件 解决二进制文件冲突问题

    .gitignore  主要是添加 忽略文件 .最近团队开发经常出现 UserInterfaceState.xcuserstate 冲突,打开发现是二进制文件 ,没法解决冲突. 只好 rm -rf 之 ...

  2. asp&period;net连接SQL SERVER 2012的方法

    在web.config文件中添加 <connectionStrings> <add name="SQLConnectionString" connectionSt ...

  3. dp和px转换

    在编写自定义view的时候,通常会在onTouchEvent回调方法中进行一些关乎距离的判断逻辑,这里的距离常量如果适配到多分辨率的不同设备上时可能会出现一些错乱的问题. 所以一般来说,常常需要dp到 ...

  4. Web Services and C&num; Enums -摘自网络

    Web Service Transparency .NET support for web services is excellent in creating illusion of transpar ...

  5. &lbrack;055&rsqb; SSL 3&period;0曝出Poodle漏洞的解决方式-----开发人员篇

    SSL 3.0曝出高危漏洞 2014年10月15日,Google研究人员发布SSL 3.0协议存在一个非常严重的漏洞,该漏洞可被黑客用于截取浏览器与server之间进行传输的加密数据,如网银账号.邮箱 ...

  6. JSP中使用cookie存储中文

    今天看J2EE的时候,看见书上讲到使用cookie保存信息的时,看到书上举得例子都是英文的键值对,我就想中文是不是一样呢?试了一下果然不一样.废话不多说,直接上代码: 比如说有addCookie.js ...

  7. spring mvc 控制器方法传递一些经验对象的数组

    由于该项目必须提交一个表单,其中多个对象,更好的方法是直接通过在控制器方法参数的数组. 因为Spring mvc框架在反射生成控制方法的參数对象的时候会调用这个类的getDeclaredConstru ...

  8. 最好用的jQuery-Ajax缓存插件

    AJAX-Cache    最好用的jQuery-Ajax缓存插件 介绍 AJAX-Cache是一款jQuery插件,基于localStorage/sessionStorage实现异步请求缓存功能,并 ...

  9. 关键字:This(上)

    对象初始化内存图: this 是一个关键字,表示对象本身,本质上this中存有一个引用,引用对象本身. this用于访问本对象属性,同时解决局部变量和成员变量同名的问题(接有参构造中第二种解决方案.. ...

  10. UVA 814 The Letter Carrier&&num;39&semi;s Rounds

    大致翻译: 对于电子邮件应用程序,您需要描述发生在成对mta之间的基于smtp的通信.发送方 的用户代理向发送消息传输代理(MTA)提供格式化的消息.发送MTA使用SimpleMail 传输协议(SM ...