关闭

微信分享图标设置,以及wx.config配置

时间: 2018-05-09阅读: 2977标签: 图标作者: 转载

最近公司要求我做一个关于页面分享微信显示小图和描述的功能,由于之前没有做过,所以说是从零开始,看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) {}
    });
});


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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/746

关闭

reactnative 自定义项目的图标库

github比较火的有如react - native -vector- icons等图标库,为什么提到这些第三方库。首先明确一个点,你是否需要现成的第三方图标库?

使用 node.js 从 iconfont.svg 文件中恢复单图标文件

阿里巴巴矢量图标库 (以下称iconfont)提供了方便的图标分享和管理功能。但是由于其图标项目独立于代码仓库,往往导致同一项目更换开发人员之后

HTML中title前面小图标的实现_如何给网页标题添加icon小图标

今天给大家分享的是如何在网页标题中加入小图标,你的图标格式最好是.ico格式的,为了兼容性考虑,使用的颜色不要超过16色,这里这个图标的命名要求必须为favicon.ico

Web 前端矢量小图标的使用方法

在写前端页面时,我们经常会用到一些小图标之类的图片,如果使用图片的话代码写起来比较麻烦,最近发现一个方便实用的方法,直接引用就可以了。

ReactNative中如何使用自定义的Iconfont图标

在App包的构成中图片资源是比较占大小的,所以我们可以利用Iconfont来替代原来的png或者jpg单色图标,iconfont的优点是占Size小、支持任意大小不失真、支持任意颜色设置、平台化管理icon等等。

font-awesome图标转为图片

font-awesome图标是字体,专业术语叫 Icon Font,本质上是使用 PUA ( Private Unicode Area )码位 Unicode 编码的字符,所以font-awesome图标、Bootstrap 的图标和 Wingdings 字体都是一样的,不一样的无非是编码。

图标使用新姿势- react 按需引用 svg 的实现

图标是前端在业务开发中不得不写的一个东西,以我司的几个部门为例,每个组在写图标上都有不一样的方式:用户平台:单色图标用 iconfont 上提供的字体文件,彩色图标用 img 引入代替或者使用iconfont 上提供的 symbol.js 。

网页中favicon.ico图标的作用、尺寸、制作

网站favicon.ico文件的用途很简单,就是在浏览器标签里,最前面显示的那个logo,对于网站 favicon.ico 图标的大小,建议大家选择 16x16 或者 32x32,再大也是完全没有必要的。favicon.ico

在Vue.JS中使用图标组件

本文对原文进行一次翻译,并从React开发者的角度简单地做了一些解读。此文不包含字体图标和SVG sprite。仅在此讨论允许用户按需导入的图标系统

字体图标的使用步骤

字体图标的优点:体积小,本质是字体,可以改变颜色,大小,背景等。UI人员设置svg格式交给前端人员;前端上传svg格式生成兼容性字体文件包;下载兼容性字体文件包到本地

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!