使用微信SDK自定义分享的方法

2024-08-19 21:28:22

一、背景介绍

在微信中打开自己网站的链接，经常会变成下面这样

不太好看有木有，如果你想在分享出来的东西带上你的logo，带上你想要的描述，怎么办，像下面这样

这就需要用到微信的分享SDK，文档链接：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

二、微信SDK使用说明第一步

第一步

先要在微信公众平台上注册一个微信公众号，还必须要是认证的企业或组织，流程走下来大概要个两三天的时间吧，只有认证了的公众号才有分享SDK的权限，个人的不行，这个比较麻烦。账号申请成功后会有AppID和AppSecret，这个相当于你公众号的秘钥，第二步需要用到。然后在JS接口安全域名中加入你调微信SDK时的页面的地址，不支持IP地址、端口号及短链域名，只能写域名，不用加http啥的，在设置了安全域名的路径下才能够成功调SDK。

第二步

需要一个获取签名的接口，这个可以找RD帮忙操作，请求接口的时候带上URL（必须和你当前的URL一致），然后让RD好好研读下如何通过公众号的AppID和AppSecret获取到token及签名等信息，接下来就可以愉快的调用微信的分享SDK了。

第三步

获取到签名之后在HTML中引入

<script typet="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

引入后在代码中调用分享SDK

  window.wx.config({
    appId: res.data.appId, //res.data为请求签名接口返回数据
    timestamp: res.data.timestamp,
    nonceStr: res.data.nonceStr,
    signature: res.data.signature,
    jsApiList: [
      'checkJsApi',
      'updateAppMessageShareData',
      'updateTimelineShareData'
    ]
  });
  const shareConfig = {
    'imgUrl': '你想展现的图标',
    'desc': '你想展现的描述',
    'title': '你想展现的title',
    'link': window.location.href,
    'success': function () {
      console.log('成功了！');
    },
    'cancel': function () {
      console.log('取消');
    }
  };
  window.wx.ready(function () {
    window.wx.updateAppMessageShareData(shareConfig);
    window.wx.updateTimelineShareData(shareConfig);
  });

OK！大功告成，现在就可以按你的想法分享内容了，但是如何在本地测试是否成功呢？我们刚才也说了只能在安全域名下才能调用成功，所以Charles就派上大用场了。。。把安全域名代理到本地，然后可以在微信开发者工具上面自测一下，没问题了上真机，iOS和安装都要试一下，会有惊喜。

三、坑及总结

在自测了没问题之后上线了。。。结果发现iOS的手机获取签名失败，报invalid signature,后来排查发现在iOS的微信里面如果从其他页面跳转到你要分享的页面window.location.href是不会变的。。。也就是说你发请求去获取签名时候传给后端的URL和你当前的URL是不一致的，所以导致签名获取失败。这个解决办法很多，可以把前一个页面的URL拿去获取签名，只要保持一致就是OK的。

好了先写这么多。。。

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

微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解

最近开发一个项目时,有微信H5网页自定义分享功能,使用了微信JS-SDK的分享到好友和分享到朋友圈功能. 微信开发文档这样写的自定义"分享给朋友"及"分享到QQ"按钮的分享内容(1.4.0) wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.updateAppMessageShareData({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接,该链接域名或路径必
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】

本文实例讲述了微信JS-SDK自定义分享功能.分享给大家供大家参考,具体如下: 分享出去的内容,可以通过jssdk进行修改. 1.配置jssdk Wx_config.html <?php import("@.ORG.jssdk"); $jssdk = new JSSDK(C('oauth_config.appid'), C('oauth_config.appsecret')); $signPackage = $jssdk->GetSignPackage(); ?> &
使用微信SDK自定义分享的方法

一.背景介绍在微信中打开自己网站的链接,经常会变成下面这样不太好看有木有,如果你想在分享出来的东西带上你的logo,带上你想要的描述,怎么办,像下面这样这就需要用到微信的分享SDK,文档链接:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 二.微信SDK使用说明第一步第一步先要在微信公众平台上注册一个微信公众号,还必须要是认证的企业或组织,流程走下来大概要个两三天的时间吧,只有认证了的公众
vue引入微信sdk 实现分享朋友圈获取地理位置功能

最近入职的公司主要做微信端的h5,所以在所难免要引用sdk.虽然官方文档写的还算清楚,但是还是有坑. 1.在index.html中引入微信sdk <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> 2.在assets/js 下新建文件 wx.js export default { wxShowMenu: fu
Android微信SDK实现分享

用微信提供的SDK来实现分享: 从http://open.weixin.qq.com下载Android相关的jar包,将libammsdk.jar加入到项目中. 微信分享的核心类,部分代码如下: WechatShareManager.java package com.jackie.umeng.share; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFa
微信小程序生成分享海报方法（附带二维码生成）

昨天写了一篇小程序本地生成二维码的功能小程序本地生成二维码,趁热打铁今天给大家分享一下小程序内生成海报的功能以及具体步骤这次分享海报里面的元素比较少,进行绘制的分别有头像,海报背景以及二维码(二维码的生成请看上面<小程序本地生成二维码>一文),此次没有涉及到文字的绘制,不过原理大致相同,这篇文章就不对文字绘制进行阐述了. 下面我们就开始吧
php版微信公众号自定义分享内容实现方法

本文实例讲述了php版微信公众号自定义分享内容实现方法.分享给大家供大家参考,具体如下: 微信公众号号在手机中通过api接口可以实现自定义分享内容了,下面我们来看这个接口的实现步骤. 一.准备阶段公众号一个,微网站一个. 二.绑定域名先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 备注:登录后可在"开发者中心"查看对应的接口权限. 三.代码 <?php //curl获取请求文本内容 f
php实现基于微信公众平台开发SDK(demo)扩展的方法

本文实例讲述了php实现基于微信公众平台开发SDK(demo)扩展的方法.分享给大家供大家参考.具体分析如下: 该扩展基于官方的微信公众平台SDK,这里只做了简单地封装,实现了一些基本的功能(如天气查询,翻译,自动聊天机器人,自定义菜单接口)仅供学习之用.代码如下: 复制代码代码如下: define("TOKEN", "xingans"); $wechatObj = new wechatCallbackapiTest(); $wechatObj->respo
vue 项目如何引入微信sdk接口的方法

做微信的网页基本上都要接入微信的sdk,我在做的时候,也颇费了一番功夫,然后就想记录一下,供自己日后翻阅,以及让有需要的朋友可以做一下参考,如果喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 安装sdk npm install weixin-js-sdk --save 开始之前大家可以先读一读微信公众号的接入文档,vue是单页面项目,比如你想要接入微信分享功能,分享功能在每个路由地址都要有,因为每个路由的url是不一样的,搜易就需要在每个路由地址都引入一遍. 整体步骤: vue引入sdk的
PHP实现创建微信自定义菜单的方法示例

本文实例讲述了PHP实现创建微信自定义菜单的方法.分享给大家供大家参考,具体如下: 在使用通用接口前,你需要做以下两步工作: 1.拥有一个微信公众账号,并获取到appid和appsecret(在公众平台申请内测资格,审核通过后可获得) 2.通过获取凭证接口获取到access_token 注意: access_token是第三方访问api资源的票据: access_token对应于公众号是全局唯一的票据,重复获取将导致上次获取的access_token失效. 访问下面这个地址(注意替换你的appi
基于thinkPHP实现的微信自定义分享功能示例

本文实例讲述了基于thinkPHP实现的微信自定义分享功能.分享给大家供大家参考,具体如下: 在许多大的网站我们都会看到点击分享就可以把数据分享到微信或QQ或其它的平台了,下面我们来看一段php版微信自定义分享代码,代码参考官方开发的没有任何问题. 分享需要认证微信订阅号或者服务号. php 代码(thinkphp): $appid='xxx'; $appsecret='xxxx'; $timestamp = time(); $noncestr = $this->getRandStr(15);

使用微信SDK自定义分享的方法

相关推荐

随机推荐