微信分享调用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 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
ie focus bug 解决方法
Sep 03 Javascript
jquery操作select option 的代码小结
Jun 21 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
微信小程序转发事件实现解析
Oct 22 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
mysql 全文搜索 技巧
2007/04/27 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
PHP微信红包API接口
2015/12/05 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
原生js实现滑块区间组件
2021/01/20 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Python编写屏幕截图程序方法
2015/02/18 Python
python使用多线程不断刷新网页的方法
2015/03/31 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
Python实现学校管理系统
2018/01/11 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
标记环介质访问控制协议
2016/03/27 面试题
UNIX文件系统常用命令
2012/05/25 面试题
社会实践活动总结范文
2014/07/03 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
2016年春节问候语
2015/11/11 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB