微信分享调用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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
Javascript中typeof 用法小结
May 12 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 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 getsiteurl()函数
2009/09/05 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
Grid得到选择行数据的方法总结
2011/01/17 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
js面试题之异步问题的深入理解
2020/09/20 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
大学生创业计划书的用途
2014/01/08 职场文书
詹天佑教学反思
2014/04/30 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android