7.6k 次阅读
标签：至少1个，最多5个
最近做个移动端的H5应用，要实现自定义微信分享功能，实现过程中遇到一些小小的坑，这里分享一下。
以前微信官方是没有正式支持微信分享的自定义接口（包括图片、标题、描述）的，然而有一些大神找到了WeixinJSBridge这个强大的“对象”，一个方法调用就轻而易举地实现了分享功能。
后来微信放出了JSSDK，开始对H5端提供丰富、强大的官方接口支持，WeixinJSBridge也逐渐淡出了开发者的视野。
然而这个JSSDK的调用方法，实现起来却并不是太容易。难点不在于技术上，而是业务流程上。虽然是一个前端的接口，但是为了安全性，微信要求开发者进行服务端的验证，而这个验证竟然还要分两步来进行……如此一来，对于仅仅是想要实现一个“分享到朋友圈”功能的人来说，真是有点叫人吐血。
事实上呢，这个后端的两步验证，对于熟悉微信开发流程的人来说，也是很合理的。因为第一步，获取“AccessToken”，是所有微信业务的起点；而第二步，获取JSApi的签名，才是使用JSSDK对应的需求。如果说项目上本来就针对微信进行了一些开发，这点需求应该是可以很快解决了。
好了，废话到此结束，下面说后端接口具体实现步骤。接口的实现是基于PHP语言的，PHP的语法简单明了，相信各位不熟悉这门语言的同学应该能够理解；代码已经托管在OSChina上开源共享，可以下载使用；链接见文章末尾。
第一步，是一定要细读的。然后你的微信公众号已经通过认证，这点是不用提醒的吧？
第二步，绑定安全域名。公众号后台左菜单 -& 设置 -& 公众号设置 -& 功能设置 -& JS接口安全域名。注意这里填写顶级域名的话，对其所有子域名都是有效的。所以为了有效利用三个名额，最好直接填写顶级域名。
第三步，写代码了。这里虚拟了一个项目，包括前端和服务端的实现。
代码：演示：
项目目录结构：
数据目录，用来存放微信端获取到的AccessToken和Ticket数据
/lib/Weixin.class.php 微信接口类库
/webapp/index.html
/webapp/main.js
服务端接口示例，这里演示了对jsonp的支持
/config.php
配置文件，包括appId、appSecret、数据目录，顺带支持SAE环境
/callback.php
微信回调接口，代码直接拷贝&a href="http://mp.weixin.qq.com/mpres/htmledition/res/wx_sample..zip" data-mce-href="http://mp.weixin.qq.com/mpres/htmledition/res/wx_sample..zip"&微信文档中的Demo&/a&
重点在于Weixin.class.php中三个方法的实现：getAccessToken、getTicket、createSignature。这三个方法各自有一些注意事项，前面两个都要求用户在服务端缓存微信接口返回的数据，因此在每次调用时都要检查一下是否已经过期；第三个方法则有两点容易犯低级错误：其一，前端传过来的url是不需要hash部分（就是#及其后面的一段）的，这个前端需要注意；其二，服务端签名算法中拼接字符串时nonceStr是全部小写的，应写成noncestr，再就是要注意拼接的顺序不能错。
前端部分，除了上面说的传递url时需要去掉hash外，还需注意，业务逻辑应尽可能wx.ready中调用，以避免网络延迟带来的问题。开发调试时记得开启调试选项，这样就可以根据弹出的错误码来对照排查问题。
1 收藏&&|&&41
微信提供的代码示例也不错，不过只有后端的。
微信提供的代码示例也不错，不过只有后端的。
http://demo.open.weixin.qq.com/jssdk/sample.zip
你好，因为我不懂后端代码，所以想将你的代码直接用在我的服务器，所以想请问一下，如果我直接用你的代码需要修改那些地方。谢谢 ，求帮助。
你好，因为我不懂后端代码，所以想将你的代码直接用在我的服务器，所以想请问一下，如果我直接用你的代码需要修改那些地方。谢谢 ，求帮助。
估计你不是用SAE的环境吧？如果不是，把config.php里面的app_key、app_secret换成你的，然后把下面：
define('ENV', 'sae');
//define('ENV', 'dev');
define('SAE_DATA_PATH', 'saekv://');
这几行中第一、三行注释掉，第二行恢复，也就改成这样：
//define('ENV', 'sae');
define('ENV', 'dev');
//define('SAE_DATA_PATH', 'saekv://');
然后和其他代码原封不动放到服务器上就能用了。遇到问题直接留言。
估计你不是用SAE的环境吧？
如果不是，把config.php里面的app_key、app_secret换成你的，然后把下面：
define('ENV', 'sae');
//define('ENV', 'dev');
define('SAE_DATA_PATH', 'saekv://');
这几行中第一、三行注释掉，第二行恢复，也就改成这样：
//define('ENV', 'sae');
define('ENV', 'dev');
//define('SAE_DATA_PATH', 'saekv://');
然后和其他代码原封不动放到服务器上就能用了。
遇到问题直接留言。
如果是SAE环境的话，啥也不用改，传上去就能用了。
如果是SAE环境的话，啥也不用改，传上去就能用了。
万分感谢，可以用了^_^
万分感谢，可以用了^_^
那如果是二级甚至三级目录的话
安全域名是写顶级域名还是带目录的域名?
那如果是二级甚至三级目录的话
安全域名是写顶级域名还是带目录的域名?
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。微信jssdk.php需要修改么？可以直接用么？_百度知道
微信jssdk.php需要修改么？可以直接用么？
我有更好的答案
&?php echo ' web-root = '.$_SERVER['DOCUMENT_ROOT'].'&br&'; echo ' current-file = '.__FILE__.'&br&'; echo ' current-dir = '.dirname(__FILE__).'&br&';
echo ' http-root = '.$_SERVER['HTTP_HOST'].'&br&'; echo ' web-position = '.$_SERVER['PHP_SELF'].'&br&';$file='c:/webroot/index.php'; echo ' file-position = '.$file.'&br&';
$fileWebAddress='http://'.str_replace($_SERVER['DOCUMENT_ROOT'],$_SERVER['HTTP_HOST'],$file); echo ' file-web-position = '.$fileWebAddress.'&br&';?&
采纳率：96%
来自团队：
config里面的参数需要自己配置
为您推荐：
其他类似问题
php的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。微信开发的jssdk，php怎么用_百度知道
微信开发的jssdk，php怎么用
我有更好的答案
不是有例子吗，你下载下来之后要用哪个接口可以相应的调用啊，不过你自己网站页面要把相应的接口写进去（这个在你下载的一个php文件里面就有），不会的话把官方那一块都直接粘贴进去，还有你公众号得有相应的接口权限，不会开发的话硪可以提供技术支持
采纳率：91%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。今天应客户要求，把一个html5游戏的微信分享功能从第三方库切换到官方库了，。
这其中碰到了一些问题，记录一下（服务端环境为PHP）：
###1. 开启openssl功能
Warning: file_get_contents(https://graph.qq.com/user/xxxxx) [function.file-get-contents]: failed to open stream: No error in /xxx/php.php on line 2
遇到这样的错误的，是因为没有开启openssl功能，可以在php.ini中把 extension=php_openssl.dll之前的;去掉，保存并重启（最好重启服务器）
注意：php.ini的位置是在phpinfo中找的。
###2. encodeURIComponent(url)
js端的要记得把当前页面的url编码，不然送给服务器的参数可能不对，最后导致签名出错。
####最后附上相关的源码，包括服务端和javascript：
客户端javascript
* Author: lonewolf
// 微信分享的数据
var wxData = {
title : '好玩的游戏！',
desc : '大家快来玩!',
link : 'http://xxx',
imgUrl : 'http://xxx.png',
dataUrl: '',
success: function () {
//分享成功
//do something!
// 配置数据
wxConfigData={
debug: true, //调试的时候最好设为true，它每一步都会alert数据出来，让你知道出了什么问题
appId: 'xxx',
timestamp: , //随便填写一串数字
nonceStr: 'sMADlDUaGt6DsEc6', //随便一字符串
signature: '', //**这个要到服务器获取**
jsApiList: [ //用到的功能，自定义
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
// 获取签名
function wxGetSign () {
var data1={};
data1[&timestamp&]=wxConfigData[&timestamp&];
data1[&nonceStr&]=wxConfigData[&nonceStr&];
data1[&url&]=encodeURIComponent(location.href.split('#')[0]);
// alert(data1[&url&]);
// 自己找个ajax库
ajax.post(&wxGetSign.php?ran=&+Math.random(), data1, function (data) {
// 返回{sign:xxx}
// alert(data);
data=eval(&(&+data+&)&);
if(data[&sign&])
// 获取签名成功，初始化分享
wxConfigData[&signature&]=data[&sign&];
// 初始化，已经获得签名
function wxInit () {
// 配置参数
wx.config(wxConfigData);
wx.ready(function(){
addWeixinShareListening();
wx.error(function(res){
// alert(res);
// 分享绑定
function addWeixinShareListening () {
wx.onMenuShareTimeline(wxData);
wx.onMenuShareAppMessage(wxData);
wx.onMenuShareQQ(wxData);
wx.onMenuShareWeibo(wxData);
//执行，获取签名
wxGetSign();
相关的参数改一改，放到页面中就可以了，也可保存为一个js文件。
因为获取的access_token以及jsapi_ticket都有时间限制（7200秒后失效），且调用接口的次数有限制，所以我们得把得到的access_token和jsapi_ticket缓存到一个文件里，每次请求都检查是否已过期。
//设置时区
date_default_timezone_set('Asia/ShangHai');
session_start();
$returnObj = array(&sign& =& &&);
$appId=&xxx&;
$appSecret=&xxx&;
$timestamp = $_POST[&timestamp&];
$nonceStr = $_POST[&nonceStr&];
$url = $_POST[&url&];
if ($timestamp&&$nonceStr&&$url) {
// 获取access_token和jsapi_ticket
$access_token=&&;
$jsapi_ticket=&&;
// 保存到文件sign.txt
$filename=&sign.txt&;
$time=time();
// 先查找本地有没有保存
if (file_exists($filename)) {
$str=file_get_contents($filename);
$obj=json_decode($str,true);
if ($obj&&$obj[&access_token&]&&$obj[&jsapi_ticket&]&&$obj[&time&]) {
$lastTime=intval($obj[&time&]);
// 标准的是7200，要少一点
if ($time-$lastTime&7100) {
$access_token=$obj[&access_token&];
$jsapi_ticket=$obj[&jsapi_ticket&];
if ($access_token==&&) {
// 如果第一次或已过期则重新获取
$returnObj[&re&]=1; //这个只是测试用，看看是不是新请求
// 获取access_token
$tokenUrl=&https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appId}&secret={$appSecret}&;
$str=file_get_contents($tokenUrl);
// $returnObj[&token_data&]=$
$obj=json_decode($str,true);
if ($obj&&$obj[&access_token&]) {
$access_token=$obj[&access_token&];
// 获取jsapi_ticket
$ticketUrl=&https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi&;
$str=file_get_contents($ticketUrl);
// $returnObj[&ticket_data&]=$
$obj=json_decode($str,true);
if ($obj&&$obj[&errcode&]==0&&$obj[&ticket&]) {
$jsapi_ticket=$obj[&ticket&];
// 保存文件
$data=array(&access_token&=&$access_token,&jsapi_ticket&=&$jsapi_ticket,&time&=&$time);
$data=json_encode($data);
file_put_contents($filename, $data);
$returnObj[&error&]=&wrong ticket&;
$returnObj[&error&]=&wrong access_token&;
if ($access_token&&$jsapi_ticket) {
// $returnObj[&access_token&]=$access_
// $returnObj[&jsapi_ticket&]=$jsapi_
// 签名算法
$str=&jsapi_ticket={$jsapi_ticket}&noncestr={$nonceStr}&timestamp={$timestamp}&url={$url}&;
// $returnObj[&signstr&]=$
$sign=sha1($str);
$returnObj[&sign&]=$
echo json_encode($returnObj);
至此，整个过程就算完了。
& 著作权归作者所有
人打赏支持
领取时间：
领取条件：开源项目被开源中国收录的开发者可领取
码字总数 17561
进行微信开发的第一步是要接入，验证服务器地址的有效性。 官网没有meteor的demo。网上也有很多介绍各种平台的验证方法。但是meteor验证token的方法网上还找不到。因为meteor与nodejs 有很深...
微信JSSDKJava版接入--步骤及问题处理和解决 可以关注测试微信号，查看效果 服务器是个人的。请不要恶意攻击。 个人订阅号 个人小程序，可以微信扫一扫看看。谢谢支持 JSSDK使用步骤 http:/...
最近将 riot.js 升级到了 3.0，并用上了新版本的 riot-route，原先用了一年多的 2.2.4 版本内置的 riot.route 只支持 hash 形式的 SPA 单页面应用，riot-route 则支持 pushState。 Hash 方式...
XiongLiding
为什么要接入三方登录 如果你的微信服务器要做复杂的逻辑，比如html5、给用户提供高级的服务，并且有很好看的页面等等，这种时候你就需要一个正常的web服务器，用户打通就需要做三方登录了。...
小程序开发 - webview 会飞的污熊 阅读 webView 最近要做一个项目需要在小程序中打开外链，小程序最近开放了web-view组件，可在里面内嵌自己写的H5页面，也就实现了打开外链的功能...
会飞的污熊
为什么要接入三方登录 如果你的微信服务器要做复杂的逻辑，比如html5、给用户提供高级的服务，并且有很好看的页面等等，这种时候你就需要一个正常的web服务器，用户打通就需要做三方登录了。...
duoduo3_69
微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片 微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置 微信公众号与HTML 5混合...
柯南和由美
历时6个月时间，全新的客服系统，从零开始，到v2.0.0，今天，终于发布首个正式版本！ 本次发布的增加了Oracle数据库版本，支持HTTPS。 优客服全渠道客服系统 优客服，是一个全渠道融合的客服...
优客服多渠道客服系统
现在很多企业局域网都是全无线覆盖，给员工和客户的网络接入提供了很大的便利。无论在公司或者厂区的任何位置，都可以很方便的接入到公司局域网和互联网。但是这样也带来了不可避免的安全性问...
微信在去年发布JSSDK后，把包括自定义分享在内的众多网页服务接口进行了统一。现在，如果要想自定义分享自己的网页信息给好友或朋友圈，就最好使用这个统一的网页服务接口。没有认证微信号的...
没有更多内容
加载失败，请刷新页面
有哪些方法 实现服务启动之后,马上执行相关操作? 方式一 :@PostConstruct 对类的要求 无,普通的java bean即可 例如:
* 执行完构造方法之后就会执行该方法
*/@PostConstruc...
一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame，即比 bit大的frames，Jumbo frame的大小是每个设备厂商规定的，不属于IEEE标准；...
1. 二维数组中的查找（难度：易） 题目描述 在一个二维数组中（每个一维数组的长度相同），每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入...
大不了敲一辈子代码
linux任务计划cron 在linux下，有时候要在我们不在的时候执行一项命令，或启动一个脚本，可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户，不加-u表示当前用...
单例模式的定义是确保某个类在任何情况下都只有一个实例，并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点： 1.构造方法私有化 2.提供一个...
人觉非常君
在线阅读：https://riboseyim.gitbook.io/perf 在线阅读：https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】：https://pan.baidu.com/s/1C20T......
https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......
Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题，但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...
1、Alibaba Java Coding Guidelines 经过247天的持续研发，阿里巴巴于10月14日在杭州云栖大会上，正式发布众所期待的《阿里巴巴Java开发规约》扫描插件！该插件由阿里巴巴P3C项目组研发。P3C...
Tomcat介绍 Tomcat是Apache软件基金会（Apache Software Foundation）的Jakarta项目中的一个核心项目，由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...
没有更多内容
加载失败，请刷新页面
文章删除后无法恢复，确定取消删除此文章吗？
亲，自荐的博客将通过私信方式通知管理员，优秀的博客文章审核通过后将在博客推荐列表中显示
确定推荐此文章吗？
确定推荐此博主吗？
聚合全网技术文章，根据你的阅读喜好进行个性推荐
指定官方社区
深圳市奥思网络科技有限公司版权所有&>&微信jssdk demo php
微信jssdk demo php
上传大小：9KB
微信jssdk demo,填入一些参数就可以使用
综合评分：0
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有1条
爆出有毒，气死我了
综合评分：
积分/C币：3
速易达网络
综合评分：
积分/C币：5
综合评分：
积分/C币：5
综合评分：
积分/C币：5
综合评分：
积分/C币：10
VIP会员动态
热门资源标签
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
微信jssdk demo php
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*投诉人姓名：
*投诉人联系方式：
*版权证明：
*详细原因：
微信jssdk demo php