微信开发者分享_微信分享功能微信开发者工具没有问题,在手机上配置不起作用 - CSDN
  • 一:登录微信公众平台进行设置JS接口安全域名 二:获取access_token凭证 access_token的接口地址 https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=...

    一:登录微信公众平台进行设置JS接口安全域名

     

    二:获取access_token凭证

    access_token的接口地址
    https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
    

     

    三:通过获取到的access_token来请求获得jsapi_ticket

    jsapiTicket的接口地址
    https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

     

    四:网页端JSSDK授权

    引入jweixin-1.2.0.js
    $.ajax({
            url: "<%=basePath%>/wechatpublic/jsapisign",
            type : "post",
            data : {
                url : encodeURIComponent(location.href.split('#')[0])
            },
            contentType : 'application/x-www-form-urlencoded;charset=utf-8',
            async : true,
            success : function(data) {
                wx.config({
                    debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                    appId : data.appId, // 必填,公众号的唯一标识
                    timestamp : data.timestamp, // 必填,生成签名的时间戳
                    nonceStr : data.nonceStr, // 必填,生成签名的随机串
                    signature : data.signature,// 必填,签名,见附录1
                    jsApiList : [ 'checkJsApi', 'onMenuShareTimeline',
                        'onMenuShareAppMessage', 'onMenuShareQQ',
                        'onMenuShareWeibo', 'onMenuShareQZone']
                });
                wx.error(function(res) {
                    console.log(res);
                });
            }
        });

     

    五:网页端分享接口

    //验证通过ready接口
        wx.ready(function() {
            var title = "销售排行";// 分享标题
            var desc = "智能售彩机器人销售排行";// 分享描述
            var shareUrl = window.location.href.replace("rankingList.do","wechatRankingList.do");// 分享链接,将当前登录用户转为puid,以便于发展下线
            var imgUrl = '<%=basePath%>/img/aiwalogo.png';// 分享图标
            //分享到朋友
            wx.onMenuShareAppMessage({
                title: title, // 分享标题
                desc: desc,// 分享描述
                link: shareUrl, // 分享链接,将当前登录用户转为puid,以便于发展下线
                imgUrl: imgUrl, // 分享图标
                success: function () {
                    share(1,'分享到朋友成功',title,shareUrl);//分享
                },
                fail: function () {
                    $(".weui-dialog__bd").html("分享到朋友失败");
                    $(".js_dialog").show();
                },
                cancel: function () {
                    $(".weui-dialog__bd").html("未分享");
                    $(".js_dialog").show();
                }
            });
    
            //分享到朋友圈
            wx.onMenuShareTimeline({
                title: title, // 分享标题
                desc: desc,// 分享描述
                link: shareUrl, // 分享链接,将当前登录用户转为puid,以便于发展下线
                imgUrl: imgUrl, // 分享图标
                success: function () {
                    share(2,"分享到朋友圈成功",title,shareUrl);//分享
                },
                fail: function () {
                    $(".weui-dialog__bd").html("分享到朋友圈失败");
                    $(".js_dialog").show();
                },
                cancel: function () {
                    $(".weui-dialog__bd").html("未分享");
                    $(".js_dialog").show();
                }
            });
    
            //分享到QQ
            wx.onMenuShareQQ({
                title: title, // 分享标题
                desc: desc,// 分享描述
                link: shareUrl, // 分享链接,将当前登录用户转为puid,以便于发展下线
                imgUrl: imgUrl, // 分享图标
                success: function () {
                    share(3,"分享到QQ成功",title,shareUrl);//分享
                },
                fail: function () {
                    $(".weui-dialog__bd").html("分享到QQ失败");
                    $(".js_dialog").show();
                },
                cancel: function () {
                    $(".weui-dialog__bd").html("未分享");
                    $(".js_dialog").show();
                }
            });
    
            //分享到QQ空间
            wx.onMenuShareQZone({
                title: title, // 分享标题
                desc: desc,// 分享描述
                link: shareUrl, // 分享链接,将当前登录用户转为puid,以便于发展下线
                imgUrl: imgUrl, // 分享图标
                success: function () {
                    share(4,"分享到QQ成功",title,shareUrl);//分享
                },
                fail: function () {
                    $(".weui-dialog__bd").html("分享到QQ空间失败");
                    $(".js_dialog").show();
                },
                cancel: function () {
                    $(".weui-dialog__bd").html("未分享");
                    $(".js_dialog").show();
                }
            });
    
            //分享到微博
            wx.onMenuShareWeibo({
                title: title, // 分享标题
                desc: desc,// 分享描述
                link: shareUrl, // 分享链接,将当前登录用户转为puid,以便于发展下线
                imgUrl: imgUrl, // 分享图标
                success: function () {
                    share(5,"分享到QQ成功",title,shareUrl);//分享
                },
                fail: function () {
                    $(".weui-dialog__bd").html("分享到微博失败");
                    $(".js_dialog").show();
                },
                cancel: function () {
                    $(".weui-dialog__bd").html("未分享");
                    $(".js_dialog").show();
                }
            });
        });

    仅此供给大家,在大家有这方面的需求时,少走弯路!如果对大家有用,请大家多多点赞支持!

    尊重原创,转载请注明出处

    kung900519

    https://blog.csdn.net/tianya900519/article/details/99291918

     

    展开全文
  • 文章目录一、公众号管理,绑定域名二、在页面引入JS文件三、通过config接口注入权限验证配置四、通过ready接口处理成功验证五、步骤三中参数获取1、Controller层2、Service层方法实现(1)首先是获取时间戳和随机串...

    一、公众号管理,绑定域名

    进入微信公众号管理,在JS接口安全域名修改出配置自己的域名。
    在这里插入图片描述

    二、在页面引入JS文件

    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js?v=7f54"></script>
    

    三、通过config接口注入权限验证配置

    wx.config({
    	    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,
    	    appId: '${appId}', // 必填,公众号的唯一标识
    	    timestamp: '${timestamp}', // 必填,生成签名的时间戳
    	    nonceStr: '${nonceStr}', // 必填,生成签名的随机串
    	    signature: '${signature}',// 必填,签名
    	    jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填,需要使用的JS接口列表
    	});
    

    其中jsApiList表示需要使用的JS接口列表,上面“onMenuShareAppMessage”和“onMenuShareTimeline”分别是分享微信好友和分享微信朋友圈。后面第五步将会介绍在后台如何获取时间戳、随机串和签名等问题。

    四、通过ready接口处理成功验证

       // 获取需要使用的相关参数
        var memberSid = "${member.memberSid}";
    	var baseUrl = "${baseUrl}";
    	var linkUrl = baseUrl + "/lachinHit.html?memberSid="+memberSid+"&f="+flag;
    	var src =baseUrl+ "/images/activity/lachin/fenxiangPic.png"
    	
    	wx.ready(function(){
    	wx.onMenuShareAppMessage({
    		    title: '我的标题', // 分享标题
    		    desc: '我的分享描述', // 分享描述
    		    link: linkUrl, // 分享链接 
    		    imgUrl: src, // 分享图标
    		    type: '', // 分享类型,music、video或link,不填默认为link
    		    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    		    success: function () {
                    alert("分享微信好友成功!");
    		    },
    		    cancel: function () {
    		     	alert('分享微信好友失败');
    		    }
    		});
    	wx.onMenuShareTimeline({
    		    title: '我的标题', // 分享标题
    		    desc: '我的分享描述', // 分享描述
    		    link: linkUrl, // 分享链接 
    		    imgUrl: src, // 分享图标
    		    type: '', // 分享类型,music、video或link,不填默认为link
    		    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    		    success: function () {
                    alert("分享微信好友成功!");
    		    },
    		    cancel: function () {
    		     	alert('分享朋友圈失败');
    		    }
    		});
    	});
    

    五、步骤三中参数获取

    1、Controller层

    	JSONObject config = wxInfoService.JSConfig(request);
    	model.addAttribute("member", member);
    	model.addAttribute("appId", config.getString("appId"));
    	model.addAttribute("timestamp", config.getString("timestamp"));
    	model.addAttribute("nonceStr", config.getString("nonceStr"));
    	model.addAttribute("signature", config.getString("signature"));
    

    2、Service层方法实现

    (1)首先是获取时间戳和随机串。

    public JSONObject JSConfig(HttpServletRequest request) throws Exception {
            JSONObject json = new JSONObject();
            // 从配置文件中读取appid
            String appId = PropertiesLoader.get("appid");
            // 获取时间戳
            String timestamp = System.currentTimeMillis() / 1000 + "";
            // 生成随机串
            String nonceStr = CommonUtil.createNonceStr(10);
            String currentUrl = request.getRequestURL() + "";
            if (StringUtils.isNotEmpty(request.getQueryString())) {
                currentUrl = currentUrl + "?" + request.getQueryString();
            }
            // 获取签名,重要步骤
            String signature = getJSSign(nonceStr, timestamp, currentUrl);
            json.put("appId", appId);
            json.put("timestamp", timestamp);
            json.put("nonceStr", nonceStr);
            json.put("signature", signature);
            return json;
        }
    

    (2)生成随机串方法

    public static String createNonceStr(int length) {
    		String chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    		String res = "";
    		for (int i = 0; i < length; i++) {
    			Random rd = new Random();
    			res += chars.charAt(rd.nextInt(chars.length() - 1));
    		}
    		return res;
    	}
    

    (3)获取签名

    签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。

    public String getJSSign(String noncestr, String timestamp, String url)
                throws Exception {
            // 获取jsapi_ticket
            String ticket = getJSTicket();
            StringBuffer buffer = new StringBuffer();
            buffer.append("jsapi_ticket=" + ticket);
            buffer.append("&");
            buffer.append("noncestr=" + noncestr);
            buffer.append("&");
            buffer.append("timestamp=" + timestamp);
            buffer.append("&");
            buffer.append("url=" + url);
            String temp = buffer.toString();
            logger.info("getJSSign获取jsapi_ticket的参数为:currentUrl=" + url +
                    "---timestamp=" + timestamp + "---nonceStr=" + noncestr +
                    "----jsticket=" + ticket + "-----生成的signature=" + CommonUtil.Sha1(temp));
            return CommonUtil.Sha1(temp);
        }
    

    (4)其中获取jsapi_ticket的方法

    public String getJSTicket() throws Exception {
            String ticket = null;
            try {
                ticket = shopinRedis.get(Constants.JS_TICKET_KEY);
                if (ticket != null) {
                    return ticket;
                }
                // 获取token
                String token = getToken();
                // url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=" + token
                String url = PropertiesLoader.get("wechat_api") + PropertiesLoader.get("js_ticket") + token;
                String result = HttpUtil.Get(url);
                JSONObject json = JSONObject.parseObject(result);
                ticket = json.getString("ticket");
                // 放入缓存
                this.shopinRedis.delete(Constants.JS_TICKET_KEY);
                this.shopinRedis.set(Constants.JS_TICKET_KEY, ticket, 60 * 60 * 1);
            } catch (Exception e) {
                e.printStackTrace();
            }
            return ticket;
        }
    

    (5)获取jsapi_ticket前首先获取token

    public String getToken() throws Exception {
            String accessToken = null;
            try {
                accessToken = shopinRedis.get(Constants.ACCESS_TOKEN_KEY);
                if (accessToken != null) {
                    return accessToken;
                }
                // 读取配置信息中配置的appid和secret
                String appid = PropertiesLoader.get("appid");
                String secret = PropertiesLoader.get("secret");
                // url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appid + "&secret=" + secret
                String url = PropertiesLoader.get("wechat_api") + PropertiesLoader.get("access_token") + "&appid="
                        + appid + "&secret=" + secret;
                String result = HttpUtil.Get(url);
                JSONObject json = JSONObject.parseObject(result);
                accessToken = json.getString("access_token");
                // token放入缓存
                this.shopinRedis.delete(Constants.ACCESS_TOKEN_KEY);
                this.shopinRedis.set(Constants.ACCESS_TOKEN_KEY, accessToken, 60 * 60 * 2);
            } catch (Exception e) {
                e.printStackTrace();
            }
            return accessToken;
        }
    

    (6)接获取签名中的Sha1方法

    public final static String Sha1(String s) {
    		char hexDigits[] = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
    				'a', 'b', 'c', 'd', 'e', 'f' };
    		try {
    			byte[] btInput = s.getBytes();
    			// 获得MD5摘要算法的 MessageDigest 对象
    			MessageDigest mdInst = MessageDigest.getInstance("sha-1");
    			// 使用指定的字节更新摘要
    			mdInst.update(btInput);
    			// 获得密文
    			byte[] md = mdInst.digest();
    			// 把密文转换成十六进制的字符串形式
    			int j = md.length;
    			char str[] = new char[j * 2];
    			int k = 0;
    			for (int i = 0; i < j; i++) {
    				byte byte0 = md[i];
    				str[k++] = hexDigits[byte0 >>> 4 & 0xf];
    				str[k++] = hexDigits[byte0 & 0xf];
    			}
    			return new String(str);
    		} catch (Exception e) {
    			e.printStackTrace();
    			return null;
    		}
    	}
    

    六、总结

    展开全文
  • 假设我用vue开发了一个web应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试. 假设我的web应用的访问入口是如下公众号菜单的"预约"按钮: 那么为了能够在微信开发者工具里调试,...

    假设我用vue开发了一个web应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试.

    假设我的web应用的访问入口是如下公众号菜单的"预约"按钮:

    那么为了能够在微信开发者工具里调试,需要首先进入该公众号的后台,在web开发者工具里,将我本人的微信号添加进去:

    点击"绑定开发者账号":

    输入待绑定的微信账号:

    点击绑定,该微信号会收到一条消息,询问是否绑定:

    点击同意操作完成绑定.

    接下来,把要调试的web应用的url放到微信开发者工具地址栏里,回车之后,微信开发者工具就会弹出一个询问窗口,点击Allow之后,就可以在微信开发者工具提供的类似Chrome开发者工具调试器一样的界面里进行单步调试了.

    这个粘贴到地址栏的url很有讲究。

    https://open.weixin.qq.com/connect/oauth2/authorize?appid=yyyy&redirect_uri=https%3a%2f%2fwww.xxx.com%2fsmart&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect
    其中appid=后面的值,是从微信公众号控制台里拷贝出来的appid:

    redirect_uri, 即为我们开发的web应用,部署到服务器之后生成的url,需要经过url encode处理:https://www.xxx.com/smart

    这个url准备好之后,将其粘贴到微信开发者工具地址栏里,回车,即可看到一个对话窗口,要求获得我们公开信息的许可:

    点击Allow之后,就可以像使用Chrome开发者工具的调试器一样,在微信开发者工具里进行单步调试了:

    要获取更多Jerry的原创文章,请关注公众号"汪子熙":

    展开全文
  • h5页面需要获取微信用户信息,参考微信开发者文档: 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新的界面设计 ,...

    微信开发者工具调试微信网页授权,点击‘登录’按钮无效

    问题描述

    h5页面需要获取微信用户信息,参考 微信开发者文档,一步步走到用开发者工具调试页面,却发现点击登录按钮没有反应!如下
    微信授权页面
    看日志信息
    在这里插入图片描述
    好吧,说这个图片路径是http,而应该是https,可是这是微信自己的页面啊,怎么改???
    然鹅不是这个原因,偶然发现点击按钮上边缘是有效的,点击之后重定向页面,跟文档描述的一模一样。为什么点击上边缘有效,而点击按钮无效?如果你也是这样,那么请打开电脑设置—字体大小–看看是不是125%???
    现在,把字体设置成100%,重新打开微信开发者工具,再去调试上面的页面,你会惊喜地发现,点按钮可以了。

    原因

    电脑设置的字体大小(非100%)的时候,会影响微信开发者工具dom节点事件绑定的位置,根据表现来看,并不影响渲染。

    补充一下

    过程中call_me_small_pure的博客 给了很大帮助,感谢!

    展开全文
  • 等着把代码从微信开发者工具导进去就好了 2、开发者工具初始化本地仓库 打开微信开发者工具想要共同开发的那个项目,点击版本管理,点击弹出的框中的确定,就可以初始化完毕了。 3、连接gitee仓库和微信开发者工具 ...
  • 最近几天没关电脑,发现微信开发者工具非常卡顿,于是重启了一下,这一重启不要紧,打开了好几次都打不开,查看任务管理器,发现有一大堆微信开发者工具的进程,所以程序是运行了,但是界面没打开..上网查了一下,重启系统,重...
  • 微信开发者工具(小程序)源码
  • 解决微信开发者工具”当前系统代理不是安全代理” . 故障1) 你有设置开启代理吗? 如果不需要,你点左上角的“代理”选项,关闭代理即可 故障2) 使用emedit工具,点击搜索,在文件中查找 在微信开发者工具的...
  • 微信开发者平台 1.移动应用的创建 (1)填写基本信息(应用的基本内容、应用的App图标等) (2)填写平台信息(应用的官网、应用的平台(ios、android、wp8应用))其中要有应用签名、应用报名填写 (3)...
  • 今天分享下 —— HBuilderX代替微信开发者工具 的一些基本知识,欢迎关注! ????分享 官方下载地址:https://www.dcloud.io/hbuilderx.html ????配置 解压运行 HBuilderX运行后,点击工具-设置-运行配置-小...
  • 1.微信开发者工具自行到网上下载即可 2.打开微信开发者工具,如图所示: 点击创建后,如下图所示:
  • 下载微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 下载好后界面如下: 二.在命令行运行项目,npm run dev 三.在上张图片的红框内输入项目URL地址,如:...
  • 相关文章微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小程序...
  • 微信开发者工具中 实现微信小程序之相机拍照功能的开发 包括相机拍照文件相册的打开 镜头的反转等
  • 微信开发者工具中前端调用微信JS-SDK,如上传图片,扫一扫等 原因:没在自己的公众号下调用,权限受限。 解决: 步骤一: 打开微信开发者工具,选择公众号,复制下面地址http://demo.open.weixin.qq.com/jssdk...
  • 今天分享下 —— 微信小程序(一):安装微信开发者工具(必先利其器) 的一些基本知识,欢迎关注! 根据自身操作系统下载所需版本:(建议下载稳定版本) 下载地址:...
  • 最近在使用微信开发者工具对开发的微信小程序进行调试,遇到过两次这种问题,查阅网上解决办法,做下记录。 1、重新启动微信开发者工具 2、等一段时间再试试 3、卸载重装。。。。。 这个问题好多人都有遇到,...
  • 微信小程序概述 小程序介绍 微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用。小程序和微信原生功能应用在本质上都是——Web App 小程序优势 微信有海量用户,依赖性很强,微信...
  • 如果直接打开官方的demo,微信开发者工具上是不显示云开发按钮的。 是因为默认appid是测试号。要换成一个正式appid就会显示云开发按钮了。 分享一个朋友的人工智能教程。零基础!通俗易懂!风趣幽默!大家可以...
  • 微信小程序开发工具登录时,有时会遇到提示...本人曾经也很困惑,后来知道这是微信小程序开发者工具,为了信息的安全性,检查了系统代理,至于为什么选择不使用代理同样不行,就不得而知了。不过没事,现在解决了,...
1 2 3 4 5 ... 20
收藏数 40,472
精华内容 16,188
关键字:

微信开发者分享