微信分享调用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 相关文章推荐
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
详解jQuery选择器
Dec 21 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
php微信公众号开发模式详解
2016/11/28 PHP
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
Three.js基础部分学习
2017/01/08 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
Django实现随机图形验证码的示例
2020/10/15 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
shell程序中如何注释
2012/01/28 面试题
加拿大探亲邀请信
2014/01/28 职场文书
四下基层实施方案
2014/03/28 职场文书
事业单位考核材料
2014/05/21 职场文书
国际金融专业自荐信
2014/07/05 职场文书
四年级小学生评语
2014/12/26 职场文书
个人简历求职信范文
2015/03/20 职场文书
2015最新民情日记范文
2015/06/26 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
Python机器学习之决策树和随机森林
2021/07/15 Javascript