微信分享调用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的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
Vuex 入门教程
Jan 10 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
javascript实现简易数码时钟
Mar 30 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 会话(session 时间设定)使用入门代码
2008/06/05 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
php简单压缩css样式示例
2016/09/22 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Python科学画图代码分享
2017/11/29 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
python能做什么 python的含义
2019/10/12 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
运动会广播稿200字
2014/01/15 职场文书
企业总经理职责
2014/02/02 职场文书
授权委托书范本
2014/04/03 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
竞选部长演讲稿
2014/04/26 职场文书
校园文明倡议书
2014/05/16 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
二审答辩状格式
2015/05/22 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python