微信分享调用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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
JavaScript 面向对象之命名空间
May 04 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
浅析Vue中method与computed的区别
Mar 06 Javascript
token 机制和实现方式
Dec 15 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
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
PHP脚本的10个技巧(7)
2006/10/09 PHP
用header 发送cookie的php代码
2007/03/16 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
Python代码的打包与发布详解
2014/07/30 Python
Python基于select实现的socket服务器
2016/04/13 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
HTML5文档结构标签
2017/04/21 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
教育英语专业毕业生的求职信
2014/03/13 职场文书
行政管理专业求职信
2014/07/06 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
助学感谢信范文
2015/01/21 职场文书