zoukankan      html  css  js  c++  java
  • 微信分享图标设置,以及wx.config配置

    最近公司要求我做一个关于页面分享微信显示小图和描述的功能,由于之前没有做过,所以说是从零开始,看jssdk说明文档,网上搜索各种资料,甚至连三四年前的内容都搜索出来了,也试过以前的简单方法,包括在页面设置一个隐藏的图片,宽高都是300像素,微信就会抓取这张图片做为分享图片,但经本人测试无法使用,后来查到了原因,是微信对自定义分享内容作了限制,于是最终还是得回到配置wx.config上来。

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

      测试的时候最好将debug设置为true,这样可以在手机微信测试页面的时候查看到出错的地方,有四个参数,appId,timestame,nonceStr,signature是由后台给你提供,具体的后台怎样实现这里不多做解释,百度搜索和微信官方都有提供,

    var link = location.href;
    $.ajax({
    		url:"your_url",//后台给你提供的接口
    		type:"GET",
    		data:{"url":link},
    		async:true,
    		dataType:"json",
    		success:function (data){
    			wx.config({
    			    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
    			    appId: data.configMap.appId, // 必填,公众号的唯一标识
    			    timestamp: data.configMap.timestamp, // 必填,生成签名的时间戳
    			    nonceStr: data.configMap.nonceStr, // 必填,生成签名的随机串
    			    signature: data.configMap.signature,// 必填,签名,见附录1
    			    jsApiList: [
    			   		"onMenuShareTimeline",
    			    	"onMenuShareAppMessage"
    			    ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    			});
    			wx.error(function (res) {
                    alert(res);
                });
    		},
    		error:function (error){
    			alert(error)
    		}
    	});
    

      注意,在这里请求四个参数的时候,需要将页面的url(不包括#以及后面的内容)传给后台,这一步比较重要。

    在这里之前犯了个错误,async,请求是否异步的时候,我写的是false,也就是同步,结果导致页面在ios系统分享不了,有时候能分享但没有图片显示,但是在安卓系统就可以正常显示和分享,后来改为true之后就ok了。

    这是后台返回的参数,

    jsApiList里面的参数是调用的接口列表数组,分享到朋友圈和分享给朋友时必须写上以上两个参数,onMenuShareTimeline 和 onMenuShareAppMessage,

    测试的时候如果有哪个参数不正确,就会弹出对应的错误信息,之前没有传url的时候,报的是signature错误,也就是签名错误。

    当参数都正确的时候,打开了调试时在微信客户端打开会弹出:errMsg:config:ok!

    当wx.config()成功之后,wx.ready()方法就可以调用了,这时候就是设置一些分享时的图片,标题,以及描述信息了,这个都很简单,根据需要填写。

    wx.ready(function(res) {
        	wx.onMenuShareAppMessage({
    			title: document.title,
    			desc:document.title,
    			link: link,
    			imgUrl: Imgurl,
    			trigger: function(res) {},
    			success: function(res) {},
    			cancel: function(res) {},
    			fail: function(res) {}
    		});
    		wx.onMenuShareTimeline({
    			title: document.title,
    			link: link,
    			imgUrl: Imgurl,
    			trigger: function(res) {},
    			success: function(res) {},
    			cancel: function(res) {},
    			fail: function(res) {}
    		});
    	});
    

      这时候基本上就大功告成了,其实这块原理不是很复杂,但稍有一个地方出错就不能成功,所以如果不成功的时候不要心急,耐心寻找哪个地方写的不对,多上网搜索总会找到答案的。

  • 相关阅读:
    配置类Configuration怎样使用
    MVC三和,你能辨别它?
    杭州电 1372 Knight Moves(全站搜索模板称号)
    Verilog之i2c合约
    android requestDisallowInterceptTouchEvent用途
    其简单的通用适配器的定义
    开发专题指南: JEECG高速微云开发平台前言
    (1)QlikView概要
    HDU2841 Visible Trees (容斥原理)
    每天进步一点点——Linux系统时间来处理
  • 原文地址:https://www.cnblogs.com/lxlin/p/6829893.html
Copyright © 2011-2022 走看看