php微信公众号js-sdk开发应用

2024-09-29 22:51:54

测试js的接口功能，我用的是BAE服务器不是SAE服务器。SAE服务器不能写入文件，测试会出问题。
什么叫js-sdk，我先演示js-sdk接口的具体作用。

我在微信随便打开一片推送文章如下图：

点开第一篇文章

上面就是我们的连接文章，如果我们把这篇文章发送给朋友，显示效果如下图：

分享到朋友圈我们再来看看效果：

为什么同样是文章连接，在公众号、发送给朋友、发送到朋友圈显示的界面效果不一样。公众号的显示效果是因为微信公众帐号在推送的时候调用了微信的消息接口，而后两者是因为页面调用js-sdk相关的sdk接口。
发送给朋友调用了js接口的获取“分享给朋友”按钮点击状态及自定义分享内容接口。
发送给朋友圈调用了js接口的获取“分享到朋友圈”按钮点击状态及自定义分享内容接口。

下面我们来实现调用js-sdk接口的步骤：

第一步：微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

如下图：

只有置于该域名下的页面才能调用js接口。

第二步：http://demo.open.weixin.qq.com/jssdk/sample.zip连接这个地址下载，打开里面的php文件夹，你发现4个php文件

前面3 个php文件是配置文件，不要动它，sample.php是我们在微信中打开的连接页面，在这个页面中我们来编写我们的页面代码。这个文件我用来测试，里面的代码跟原版已经不同。

<?php
// echo "nihao";
require_once "jssdk.php";
$jssdk = new JSSDK("wxaf471be5d2bc9521", "93f5c3817074d43e7a7ab3f403cc72dd");//JSSDK中的参数是appid和appsecret。
$signPackage = $jssdk->GetSignPackage();//获取配置参数。
?>

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
</head>
<body>
 <div>我靠</div>
 <div>猪八戒</div>
 <button style="color: red" id="btn">你好</button>
 <button id="btn1">唐生</button>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>//这个是js-sdk文件，一定要引入。
<script>

 var button = document.getElementsByTagName("button");
 var btn = document.getElementById("btn");
 var div = document.getElementsByTagName("div")[0];
 var btn1 = document.getElementById("btn1");
 //wx表示一个js-sdk构建的一个对象。config（）是它的一个方法，这个接口用来验证配置。
 wx.config({
 debug: true,//true表示每调用一个接口信息都会在页面alert一段字符串。方便测试过程中国是否能正确调用接口。
 appId: '<?php echo $signPackage["appId"];?>',
 timestamp: <?php echo $signPackage["timestamp"];?>,
 nonceStr: '<?php echo $signPackage["nonceStr"];?>',
 signature: '<?php echo $signPackage["signature"];?>',
 //上面的4个参数，如果你像深入了解其来源就去查看jssdk.php代码。测试过程不需要对上面的代码做任何操作。
 jsApiList: [
  // 所有要调用的 API 都要加到这个列表中
  'onMenuShareAppMessage',//获取“分享给朋友”按钮点击状态及自定义分享内容接口。
  'chooseImage',//获取手机相片接口
  'openLocation'//获取微信地图接口
 ]
 });

//所有的js调用接口都要放到下面的ready（）中。
 wx.ready(function () {
 // 在这里调用 API
 //获取“分享给朋友”按钮点击状态，点击后发送给朋友微信，微信上的推送显示内容就是下面的数据
  wx.onMenuShareAppMessage({
   title: '大圣', // 分享标题
   desc: '我要坚持', // 分享描述
   link: 'http://www.baidu.com', // 分享链接
   imgUrl: 'http://discuz.comli.com/weixin/weather/icon/cartoon.jpg', // 分享图标
   type: 'link', // 分享类型,music、video或link，不填默认为link
   dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
   success: function () {
    // 用户确认分享后执行的回调函数
    alert("success");
   },
   cancel: function () {
    // 用户取消分享后执行的回调函数
    alert("error");
   }
  });
 //拍照或从手机相册选择。点击页面上的按钮就可以调用手机里的相册。
  btn.onclick = function(){
  wx.chooseImage({
   count: 1, // 默认9
   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
   success: function (res) {
    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
   }
  })
  };
 //微信内置地图接口。点击该按钮就可转到显示当前位置的地图页面
  btn1.onclick = function() {

  wx.openLocation({
 latitude: 0, // 纬度，浮点数，范围为90 ~ -90
 longitude: 0, // 经度，浮点数，范围为180 ~ -180。
 name: '', // 位置名
 address: '', // 地址详情说明
 scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
 infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});
  }

 });
// wx.checkJsApi({
//  jsApiList: ['onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
//  success: function(res) {
//   // 以键值对的形式返回，可用的api值true，不可用为false
//   // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
//   alert("success");
//  }
// });

// btn.onclick = function() {
//  div.innerText = "齐天大圣";
//  wx.onMenuShareAppMessage({
//  title: '大圣', // 分享标题
//  desc: '我要坚持', // 分享描述
//  link: 'http://www.baidu.com', // 分享链接
//  imgUrl: 'http://discuz.comli.com/weixin/weather/icon/cartoon.jpg', // 分享图标
//  type: 'link', // 分享类型,music、video或link，不填默认为link
//  dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
//  success: function () {
//   // 用户确认分享后执行的回调函数
//   alert("success");
//  },
//  cancel: function () {
//   // 用户取消分享后执行的回调函数
//   alert("error");
//  }
// });
 // }
</script>
</html>

测试js的接口功能，我用的是BAE服务器不是SAE服务器。SAE服务器不能写入文件，测试会出问题。
更多功能及详细信息，请大家访问http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信公众号摇一摇周边功能开发

①申请开通摇一摇功能申请开通摇一摇周边功能.成功提交申请请求后,工作人员会在三个工作日内完成审核.若审核不通过,可以重新提交申请请求.若是审核中,请耐心等待工作人员审核,在审核中状态不能再提交申请请求. 接口代码如下: http请求方式: POST(请使用https协议)https://api.weixin.qq.com/shakearound/account/register?access_token=ACCESS_TOKENPOST数据格式:json POST数据例子: { "name&q
java微信公众号开发案例

微信公众号开发一般是针对企业和组织的,个人一般只能申请订阅号,并且调用的接口有限,下面我们就来简单的描述下接入公众号的步骤: 1.首先你需要一个邮箱在微信公众号平台进行注册: 注册的方式有订阅号.公众号.小程序和企业号,个人我们这里只能选择订阅号 2.注册完后,我们登录到公众号平台--->开发--->基本配置,这里需要填写URL和token,URL就是我们使用服务器的接口: 3.Java Web服务器程序编译好且在服务器上部署可以运行的话,可在微信公众号进行在线接口调试: 1).选择
微信公众号开发实现点击返回按钮就返回到聊天界面

话不多说,请看代码 pushHistory(); function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#"); } if (typeof window.addEventListener != "undefined") { window.addE
微信公众号提示：Unauthorized API function 问题解决方法

微信公众号 Unauthorized API function 调用api的返回结果如下: 200 OK Connection: keep-alive Date: Wed, 15 Oct 2014 09:00:17 GMT Server: nginx/1.4.4 Content-Type: application/json; encoding=utf-8 Content-Length: 45 { "errcode": 48001, "errmsg": "a
微信公众号开发客服接口实例代码

最近,开发微信公众号,负责开发客服功能,这里简单记录下: Kf_account.cs代码: public partial class Kf_account : Form { private readonly DataTable adt_user = new DataTable(); private readonly string as_INIFile = Application.StartupPath + "\\user.ini"; public Kf_account() { Bind
微信公众号支付H5调用支付解析

最近项目需要微信支付,然后看了下微信公众号支付,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验. 一.配置公众号微信支付需要我们配置微信公众号支付地址和测试白名单. 比如:支付JS页面的地址为 http://www.xxx.com/shop/pay/ 那此处配置www.xxx.com/shop/pay/ 二.开发流程借用微信公众号支付api(地址 http://pay.weixin.q
php微信公众号开发模式详解

学习步骤:分四章来讲述这部分内容,下面是每章的大致内容. 1.了解开发模式与编辑模式,开发前的一些准备. 2.开发模式用户.微信服务器.个人服务器是如何交互的.什么是接口. 3.各种接口功能的调用与实现. 4.js-SDK的调用微信公众号开发两种模式:编辑模式和开发模式.编辑模式比较简单,你不需要操作任何的代码,只需要借助微信提供的功能来管理自己的微信公众号.这种方式开发的页面比较简单,主要用来实现文章的推送等功能.开发者模式则能通过自己的后台服务器与微信关注用户实现更多的交互作用,调用微信的
微信公众号-获取用户信息（网页授权获取）实现步骤

根据微信公众号开发官方文档: 获取用户信息步骤如下: 1 第一步:用户同意授权,获取code 2 第二步:通过code换取网页授权access_token 3 第三步:刷新access_token(如果需要) 4 第四步:拉取用户信息(需scope为 snsapi_userinfo) 1 获取code 在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面:
微信公众号开发自定义菜单跳转页面并获取用户信息实例详解

微信公众号开发自定义菜单请先读完本文再进行配置开发请先前往微信平台开发者文档阅读"网页授权获取用户基本信息"的接口说明在微信公众账号开发中,往往有定义一个菜单,然后用户点击该菜单就进入用户个人中心的功能,通常应用于各个公众账号中的会员服务. 如何在微信自定义菜单中将用户导航到个人中心页面呢? 首选需要通过用户点击获取用户openid,而通过用户的点击跳转获取用户openid就必须在菜单中动态绑定用户的openid,或者在菜单的跳转URL中填写微信提供的链接,官方给了两个链接类型
.NET微信公众号获取OpenID和用户信息

本文实例为大家分享了微信公众平台实现获取用户OpenID的方法,供大家参考,具体内容如下 Index.aspx.cs代码: public partial class Index : System.Web.UI.Page { //用户id public string openid = ""; //公众号信息部分 public string appid = ConfigurationManager.AppSettings["AppId"]; public string

php微信公众号js-sdk开发应用

相关推荐

随机推荐