微信网页开发分享

翻译 2018年01月31日 17:20:53

首先提供一个微信官方地址点击打开链接

早期web项目中经常用到微信分享功能,现在整理一下,供记忆与分享,开发环境为JAVA +H5。

1、微信的开发环境不在多说,大概为:使用已备案的域名,设置“公众号设置”的三项域名、

设置开发者密码(AppSecret)、调试通过核心服务地址。

2、公众平台以access_token为接口调用凭据,来调用接口,所有接口的调用需要先获取access_token,access_token在2小时内有效,过期需要重新获取,但1天内获取次数有限,开发者需自行存储。在线测试地址点击打开链接

 接口地址:JSAPI_Access_token = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential";

 提供必要参数: String tokenURL=JSAPI_Access_token+"&appid="+appid+"&secret="+secret;3、用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket);

String JSAPI_TICKET_URL = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi";

以上JS-SDK接口是基础,比较简单,注意细节即可。

4、签名计算

 

public static Map<String, String> sign(String jsapi_ticket, String url) {
		Map<String, String> ret = new HashMap<String, String>();
		String nonce_str = echostr();
		String timestamp = getTimeStamp();
		String string1;
		String signature = "";
		string1 = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonce_str + "timestamp=" + timestamp +     "&url=" + url;
		//System.out.println(string1);
		try {
			MessageDigest crypt = MessageDigest.getInstance("SHA-1");
			crypt.reset();
			crypt.update(string1.getBytes("UTF-8"));
			signature = byteToHex(crypt.digest());
		} catch (NoSuchAlgorithmException e) {
			e.printStackTrace();
		} catch (UnsupportedEncodingException e) {
			e.printStackTrace();
		}
		
		ret.put("url", url);
		ret.put("jsapi_ticket", jsapi_ticket);
		ret.put("nonceStr", nonce_str);
		ret.put("timestamp", timestamp);
		ret.put("signature", signature);
		return ret;
	}
5、WEB前端js函数封装,页面加载是注册分享事件


function wxSharecfg(response, setFx) {
    var Request = new Object();
    Request = GetRequest();
    var d = Request["demo"];
    wx.config({
        debug: false,
        appId: response.appId,
        timestamp: response.timestamp,
        nonceStr: response.nonceStr,
        signature: response.signature,
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone'
        ]
    });
    wx.ready(function () {
        var shareData = {
            imgUrl: urlStr ,//图片地址
            link: url,
            title: "标题",
            desc: setFx.desc,
            success: function (res) {
                //alert('已分享');    
            },
            fail: function (res) {
                    //'分享失败!'
            }
        };
        wx.onMenuShareAppMessage(shareData);
        wx.onMenuShareTimeline(shareData);
        wx.onMenuShareQQ(shareData);
        wx.onMenuShareWeibo(shareData);
        wx.onMenuShareQZone(shareData);
    });
}












微信分享,二次分享时缩略图以及标题变形的实际操作

目录 目录 问题描述 解决方案 公众号设置参数 服务器配置 分享页面中动态添加 注意事项 附录 问题描述 我们的app中分享到微信之后,用户从微信打开页面,在QQ浏览器中...
  • mx472756841
  • mx472756841
  • 2018年01月12日 11:20
  • 440

微信JS-SDK实现自定义分享功能,分享给朋友,分享到朋友圈及QQ自定义分享

问题: H5经常会做一些从APP或其他地方分享出来的页面,在微信及QQ中会进行二次分享,需要自己定义分享的名字和图片; 微信的分享再分享在微信公众号文档中有相关说明:微信JS-SDK说明文档 ...
  • qq_34664239
  • qq_34664239
  • 2018年01月30日 14:08
  • 109

微信分享没有缩略图,描述

最近遇到几次微信分享失败的问题,每次原因都不太一样: 微信分享的link必须在当前微信公众号的js安全域名里,这个微信官方有预告过,当时没在意,4月25号左右已经开始执行了(不过有些微信旧版本不再安全...
  • w20101310
  • w20101310
  • 2017年05月19日 15:04
  • 2229

设置微信分享的标题 缩略图 连接 描述

var imgUrl = 'http://topic.xcar.com.cn/201403/ad_q3/pic/banner.jpg'; var lineLink = 'http://topic.xc...
  • china_skag
  • china_skag
  • 2014年09月27日 13:55
  • 21334

微信分享时没有缩略图时的解决方案!

其实之前微信分享都是默认抓取页面第一张图片的,后来随着微信的版本升级,也方式那种诱导式分享,腾讯屏蔽了这一功能,目前仅在PC版本是自动抓取,所以手机版微信分享带缩略图及简介的话就要使用jssdk。我之...
  • arbben
  • arbben
  • 2017年05月23日 16:20
  • 911

微信公众号网页分享功能开发

现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接:                        上面这个是微信的j...
  • zhengyangzkr
  • zhengyangzkr
  • 2017年04月15日 21:43
  • 4547

微信网页开发--分享接口

流程关于流程,在上一篇中已经有图介绍: 微信文档微信JS-SDK说明文档JSSDK使用步骤首先确保已经获取了相关权限 步骤一:绑定域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS...
  • zhuming3834
  • zhuming3834
  • 2017年03月06日 12:03
  • 2482

关于微信二次分享,描述变链接的解决方法(一)----文档说明

前言: 最近工作中遇到了使用微信二次分享的时候,标题被截短,描述也变成了链接,图片也没有,运营人员半夜还在嚷嚷,无奈只好硬着头皮去百度,去google,但是悲催的是没有详细的解决方法,最终只能自...
  • zxf13598202302
  • zxf13598202302
  • 2017年02月27日 11:15
  • 3218

微信分享 缩略图显示问题

微信分享中,会有一个小图标显示出来,该怎么做,注意哪些问题这个图片能显示的条件:宽高大于300px页面从上到下的第一张图片除了上面两点,经过测试,还有以下要注意的img标签上不能出现 display:...
  • fengcaho0616
  • fengcaho0616
  • 2018年02月13日 16:28
  • 7

微信公众平台网页开发实战--1.微信分享一个网页到朋友圈

微信JS-SDK接口+H5的混合开发模式,将引爆微信公众平台的开发商业模式,让更多的人和更多的小而美企业,搭建属于自己的小而美平台,零成本、零难度、还跨平台,大众创业万众创新不在是空谈!...
  • kgsew
  • kgsew
  • 2017年06月14日 21:06
  • 458
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:微信网页开发分享
举报原因:
原因补充:

(最多只允许输入30个字)