微信分享调用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 相关文章推荐
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
JS Canvas接口和动画效果大全
Apr 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
javascript 弹出层组件(升级版)
2011/05/12 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
2014年五四青年节活动策划书
2014/04/22 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
基石观后感
2015/06/12 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python