微信分享调用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 相关文章推荐
JavaScript执行顺序详细介绍
Dec 04 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
Javascript验证方法大全
Sep 21 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
js自定义select下拉框美化特效
May 12 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
js实现图片实时时钟
Jan 15 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
CocosCreator入门教程之网络通信
Apr 16 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
PHP 上传文件的方法(类)
2009/07/30 PHP
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
使用python 获取进程pid号的方法
2014/03/10 Python
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
python批量提取word内信息
2015/08/09 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
Android笔试题总结
2014/11/29 面试题
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
董事长秘书工作总结
2015/08/14 职场文书
python for循环赋值问题
2021/06/03 Python
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript