微信分享调用jssdk实例

网页在微信中打开,进行分享,详细过程

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、解决微信分享为何出现链接的问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • javascript实现修改微信分享的标题内容等

    代码超级简单,这里就不多废话了,小伙伴们自己看注释吧, 奉上代码: 复制代码 代码如下: <script> //微信分享 var wimg = "分享图片网址123"; var wurl = "分享网址123"; var wdesc = '分享内容123'; var wtit = '分享标题123'; var wappid = '';   function shareMsg() {//<span style="font-family: A

  • javascript获取wx.config内部字段解决微信分享

    背景 在微信分享开发的时候我们通常的流程是 <?php require_once "jssdk.php"; $jssdk = new JSSDK("yourAppID", "yourAppSecret"); $signPackage = $jssdk->GetSignPackage(); ?> <!DOCTYPE html> <html lang="en"> <head>

  • js微信分享实现代码

    本文实例为大家分享了js微信分享实现代码,供大家参考,具体内容如下 微信分享代码,先引入: <script type="text/javascript" charset="utf-8" src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script> 获取签名: mui.ajax('/apijson/wxsign', { type: 'get', data: { u

  • js实现通用的微信分享组件示例

    一.可定义的信息 1.分享时显示的LOGO:2.分享LOGO的宽度:3.分享LOGO的高度:4.分享出去显示的标题(默认调用网页标题):5.分享出去显示的描述(默认调用网页标题):6.分享链接(默认为当前页面的URL).7.分享微信的APPID(一般为空). 二.使用方法1.引入微信分享组件js: 复制代码 代码如下: /******************************* * Author:Mr.Think * Description:微信分享通用代码 * 使用方法:_WXShare

  • javascript实现微信分享

    代码很简单,我这里就不多废话了,直接奉上源码: 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServ

  • Javascript 实现微信分享(QQ、朋友圈、分享给朋友)

    最近做微信开发,对微信公众号的开发,现在好的都是分享到朋友圈,QQ,分享给好友等分享功能,这里记录下,有需要的朋友也可以看下. // 微信分享 var wx = require('wechat-sdk'); rewardsResultService.getWechatInfo().then(function(data) { var conf = data; wx.config({ debug: false, appId: 'wx34e783920b37ee91', timestamp: conf

  • VueJs单页应用实现微信网页授权及微信分享功能示例

    在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算完成了,但开发过程中遇到好几个坑.废话不多说了,开始正题. 描述点 微信相关开发知识了解 怎么样实现微信相关功能本地测试 微信网页授权 微信分享 微信相关开发知识了解 微信公众号的appId,AppSecret 当我们注册一个微信公众号后,便能够得到一个appId(每个微信公众号只有一个,一个微信公

  • js实现微信分享代码

    通常自己做的一个页面想通过微信像朋友分享时,展示的标题和描述都是不是自己想要的,自己查了一些资料,原来是通过js来进行控制 展示效果如下: 标题.描述.还有分享的图片都是有js来控制的. js代码如下 <script> var dataForWeixin = { appId: "", MsgImg: "Christmas/201012189457639.gif",//显示图片 TLImg: "Christmas/201012189457639.

  • JS中静态页面实现微信分享功能

    微信分享网页的时候,希望分享出来的链接是标题+描述+缩略图,微信开发代码示例里已提供了方法,但只适用于动态页面.我使用phpcms把页面生成了静态文件,示例代码就起不到作用了.在网上找了下,有大神使用ajax实现静态页面也能实现微信分享功能,在这里分享给大家. 前台代码: <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> url=locatio

  • js微信分享API

    本文为大家分享了js微信分享实现代码,供大家参考,具体内容如下 微信分享Js API 功能: 1.分享到微信朋友圈 2.分享给微信好友 3.分享到腾讯微博 4.隐藏/显示右上角的菜单入口 5.隐藏/显示底部浏览器工具栏 6.获取当前的网络状态 7.调起微信客户端的图片播放组件 8.关闭公众平台Web页面 /**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.隐藏/显示右上角的菜单入口 * 5.

随机推荐