微信分享调用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 相关文章推荐
详解AngularJS实现表单验证
Dec 10 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
移动端js图片查看器
Nov 17 Javascript
vue-router单页面路由
Jun 17 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 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/05/16 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
菜单效果
2006/10/14 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
利用Python实现图书超期提醒
2016/08/02 Python
python实现发送邮件功能
2017/07/22 Python
python中模块的__all__属性详解
2017/10/26 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
python框架中flask知识点总结
2018/08/17 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
自荐信如何“自荐”
2013/10/24 职场文书
村干部承诺书
2014/03/28 职场文书
小小商店教学反思
2014/04/27 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
2014年团队工作总结
2014/11/24 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
技术入股协议书
2016/03/22 职场文书
党员学习型组织心得体会
2019/06/21 职场文书