微信分享调用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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
详细讲解JS节点知识
Jan 31 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
浅谈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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
web打印小结
2017/01/11 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
python打开windows应用程序的实例
2019/06/28 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
django rest framework serializers序列化实例
2020/05/13 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
二手房购房意向书范本
2014/04/01 职场文书
总经理任命书范本
2014/06/05 职场文书
毕业大学生自荐信
2014/06/17 职场文书
幼儿老师求职信
2014/06/30 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
python通过新建环境安装tfx的问题
2022/05/20 Python