微信分享调用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 相关文章推荐
html+js实现动态显示本地时间
Sep 21 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
vue实现单选和多选功能
Aug 11 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 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面向对象编程快速入门
2006/10/09 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
php车辆违章查询数据示例
2016/10/14 PHP
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
javascript中new关键字详解
2015/12/14 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python基类函数的重载与调用实例分析
2015/01/12 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
新学期家长寄语
2014/01/19 职场文书
小学毕业感言150字
2014/02/05 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
房屋维修协议书范本
2014/09/25 职场文书