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

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

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

   这样基础工作就完成了!

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

  (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使用步骤(以微信扫一扫为例)

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

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

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

  4. 在做微信分享到朋友圈时,手机扫码报config: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. 微信小程序分享好友,朋友圈

    <template> <view> <button open-type="share">发送给好友</button> </vi ...

  8. .Net微信网页开发之JSSDK使用步骤和配置信息timestamp(时间戳),nonceStr(随机串),signature(签名),access_token(接口调用凭据)的生成获取讲解

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

  9. 基于Node.js的微信JS-SDK后端接口实现

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

随机推荐

  1. Python迭代和解析(5):搞懂生成器和yield机制

    解析.迭代和生成系列文章:https://www.cnblogs.com/f-ck-need-u/p/9832640.html 何为生成器 生成器的wiki页:https://en.wikipedia ...

  2. MySQL 笔记整理(8.b) --事务到底是隔离还是不隔离的?

    笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> (本篇内图片均来自丁奇老师的讲解,如有侵权,请联系我删除) 8.a) --事务到底是隔离还是不隔离的? 本周工作较忙,加上懒惰,拖更 ...

  3. C#实现窗体全屏

    方法一:设置窗体属性 //程序启动路径,与生成程序的exe文件在同一目录下 public String exePath = Application.StartupPath; //定义窗体宽高 ; ; ...

  4. 分析解剖微服务系列(二)-SOA和微服务异同

    微服务架构模式成熟之前,软件领域讨论的比较多的是SOA的架构模式.SOA早在1996年就由Gartner提出,作为面向服务的架构模式,SOA的理念是对于复杂的企业IT系统,按照不同的.可重用的粒度划分 ...

  5. 细说addEventListener与事件捕获

    细说addEventListener与事件捕获.事件冒泡(一)addEventListener的基本用法 在复杂的项目开发中,javascript和html的解耦变得至关重要,我们被推荐使用事件动态绑 ...

  6. Android开发,关于如何在应用间共享SharedPreference

    开发一个应用,需要用到两个应用A和B之间共享数据的问题,这个数据是个单一的数据,所以就想用SharedPrefernce来进行保存. 使用网上的各种应用间的共享代码,B是读取A的数据,所以代码为: C ...

  7. Web开发人员学习路线图

    http://www.runoob.com/w3cnote/2018-web-developer.html

  8. web.xml文件介绍

    每个javaEE工程中都有web.xml文件,那么它的作用是什么呢?它是每个web.xml工程都必须的吗? 一个web中可以没有web.xml文件,也就是说,web.xml文件并不是web工程必须的. ...

  9. centos7查看可登陆用户

    一.命令 cat /etc/passwd | grep -v /sbin/nologin | cut -d : -f 1 cat /etc/passwd | grep   /bin/bash | cu ...

  10. 利用ZYNQ SOC快速打开算法验证通路(1)——MATLAB浮点数与定点二进制补码互转

    最近本人一直在学习ZYNQ SOC的使用,目的是应对科研需要,做出通用的算法验证平台.大概思想是:ZYNQ PS端负责与MATLAB等上位机数据分析与可视化软件交互:既可传输数据,也能通过上位机配置更 ...