微信分享调用jssdk实例


Posted in Javascript onJune 08, 2017

网页在微信中打开,进行分享,详细过程

1、问题说明

搞了半天,终于搞定。说下基本需求,很简单,网页在微信中打开,分享。
网页是html格式,原来分享时会一直显示链接,看了下代码中没有调用jssdk,调用的是一个第三方的平台的分享接口。

2、问题解析

根据微信官方给出的demo,可以看到核心就是获取四个参数,配置wx.config。
四个参数分别是appId、timestamp、nonceStr、signature
appId不用说,后面三个都是根据微信的接口得到的,有兴趣的可以看下官方,不过也可以不管。

3、解析思路

接下来,说下我的思路,在js中通过ajax调用jssdk部署的接口,返回上述所需参数。
我测了PHP,写了一个myapi.php接口,很简单:

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("你的appId", "你的appSecret");
$signPackage = $jssdk->GetSignPackage();

$data = array(
 'appId' => $signPackage["appId"], 
 'timestamp' => $signPackage["timestamp"],
 'nonceStr' => $signPackage["nonceStr"],
 'signature' => $signPackage["signature"]);
echo json_encode($data);

前端页面

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
 $(function(){
  $.ajax({
    type: "GET",
    url: "./myapi.php",
    data: "",
    success: function(data){
     var result = JSON.parse(data);    
     if (result != null) { 
      wx.config({ 
       debug: false, 
       appId: result.appId, 
       timestamp: result.timestamp, 
       nonceStr: result.nonceStr, 
       signature: result.signature, 
       jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] 
     }); 
     } 
    },
    error: function(){

    }
   });
 });

 window.sharedata = {
  title: '标题',
  desc: '描述',
  link: window.location.href,
  imgUrl: 'https://gqrcode.alicdn.com/img?type=cs&shop_id=295323332&seller_id=1094878600&w=140&h=140&el=q&v=1',
  success: function () {
   alert('success');
  },
  cancel: function () {
   alert('cancel');
  }
 };

 wx.ready(function () {
  wx.onMenuShareAppMessage(sharedata);
  wx.onMenuShareTimeline(sharedata);
 });

</script>

4、知识点

1、微信分享jssdk的使用
2、html调用ajax
3、解决微信分享为何出现链接的问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 #Javascript
jQuery Validate表单验证插件实现代码
Jun 08 #jQuery
浅谈 Vue v-model指令的实现原理
Jun 08 #Javascript
Vue如何实现组件的源码解析
Jun 08 #Javascript
jquery Ajax实现Select动态添加数据
Jun 08 #jQuery
js canvas实现放大镜查看图片功能
Jun 08 #Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 #Javascript
You might like
PHP 事件机制(2)
2011/03/23 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
php不用正则验证真假身份证
2013/11/06 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
JQuery jsonp 使用示例代码
2009/08/12 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python闭包函数定义与用法分析
2018/07/20 Python
Python 中的lambda函数介绍
2018/10/10 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
高中三年学习生活的自我评价
2013/10/10 职场文书
工作会议主持词
2014/03/17 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
护士求职简历自我评价
2015/03/10 职场文书