微信分享调用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 省地市级联选择
Feb 07 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
Vue深入理解插槽slot的使用
Aug 05 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
php中文字母数字验证码实现代码
2008/04/25 PHP
解析link_mysql的php版
2013/06/30 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
python中get和post有什么区别
2020/06/19 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
小学美术教学反思
2014/02/01 职场文书