微信分享调用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 相关文章推荐
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
微信JS接口大全
Aug 25 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
WebPack基础知识详解
Jan 16 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 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 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Python中Selenium库使用教程详解
2020/07/23 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
公司周年庆典邀请函
2014/01/12 职场文书
高一生物教学反思
2014/01/17 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
初三新学期计划书
2014/05/03 职场文书
法律意见书范本
2015/06/04 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
团拜会主持词
2015/07/04 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers