微信分享调用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实时监听文本框状态的方法
Apr 26 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
JavaScript中遍历的十种方法总结
Dec 15 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
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
xml+php动态载入与分页
2006/10/09 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
php实现登录页面的简单实例
2019/09/29 PHP
phpwind放自动注册方法
2006/12/02 Javascript
JS option location 页面跳转实现代码
2008/12/27 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
vue生命周期的探索
2019/04/03 Javascript
用python与文件进行交互的方法
2018/03/01 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
秘书英文求职信范文
2014/01/31 职场文书
新护士岗前培训制度
2014/02/02 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
校园安全教育广播稿
2014/02/17 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
空乘英文求职信
2014/04/13 职场文书
毕业生求职信范文
2014/06/29 职场文书
单位工资证明范本
2015/06/12 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
JavaScript文档对象模型DOM
2021/11/20 Javascript