微信公众号图卡片息发送【模拟发送一个小程序信息】

首先我们来看一下微信官方关于图文消息发送给出的文档说明

小程序卡片跳转小程序，代码示例：

<mp-miniprogram data-miniprogram-appid="wx123123123" data-miniprogram-path="pages/index/index" data-miniprogram-title="小程序示例" data-progarm-imageurl="http://mmbizqbic.cn/demo.jpg"></mp-miniprogram>

如上图所示，若要向微信同步图文消息发送小程序卡片，上面几个参数必须要按照固定的条件来获取到。

下面我来看下具体代码实现

// 获取到的小程序对象
    var smallCodeObj = linkTools.deepCopy(this.rotinueObj.selectedRotinueObj);
    var p = '';
    var appid = smallCodeObj.appId; // 小程序appid
    var nickName = smallCodeObj.mpName; // 小程序名字
    var path = 'pages/tabs/tabs'; // 待定 小程序的url
    var title= this.rotinueObj.innerFormData.title; // 卡片标题
    var imgUrl = this.rotinueObj.selectedImg.url; // 卡片的url
    var cdnpath = appCtx.cdnPath;

    p = `<iframe class=\"res_iframe weapp_app_iframe js_editor_weapp wxCard\" src=\"${cdnpath}/linkcrm/marketing/wx_small_code.html?appid=${appid}&&nickName=${nickName}&&path=${path}&&title=${title}&&imgUrl=${imgUrl}\" frameborder=\"0\" data-miniprogram-appid=\"${appid}\" data-miniprogram-nickname=\"${nickName}\" data-miniprogram-title=\"${title}\" data-miniprogram-imageUrl=\"${imgUrl}\" data-miniprogram-path=\"${path}\">
                 </iframe><p><mp-miniprogram data-miniprogram-appid=\"${appid}\" data-miniprogram-path=\"${path}\" data-miniprogram-title=\"${title}\" data-miniprogram-imageurl=\"${imgUrl}\"></mp-miniprogram></p >`;

然后就是请求后台的接口，将对应的内容给传递给后台在请求微信服务器把数据同步过去。具体请求后台方法就不贴代码了，之前在这个地方遇到一个坑，就是微信服务器那边接收我的文本编辑器里面的内容，可以是html，但我把对应的html片段传过去之后，会很诡异的报错45166;然后查询了一些资料，发现我的content里面的html代码格式有问题，错误的代码我就不展示了，我把没问题的代码格式与大家共勉。

{
	"articles": [{
		"thumb_media_id": "nLSuWIlNwk1BMQ6miOpRVyvYGsiXq7tKuorzOM2_gmk",
		"author": "123123",
		"digest": "啦啦啦啦",
		"show_cover_pic": "1",
		"title": "九福数据测试",
		"content": "<iframe class=\"res_iframe weapp_app_iframe js_editor_weapp wxCard\" src=\"${cdnpath}/linkcrm/marketing/wx_small_code.html?appid=${appid}&&nickName=${nickName}&&path=${path}&&title=${title}&&imgUrl=${imgUrl}\" frameborder=\"0\" data-miniprogram-appid=\"${appid}\" data-miniprogram-nickname=\"${nickName}\" data-miniprogram-title=\"${title}\" data-miniprogram-imageUrl=\"${imgUrl}\" data-miniprogram-path=\"${path}\">
                 </iframe><p><mp-miniprogram data-miniprogram-appid=\"wx31ccc23d0caff0bf\" data-miniprogram-path=\"pages/tabs/tabs\" data-miniprogram-title=\"小程序示例\" data-miniprogram-imageurl=\"https://mmbiz.qpic.cn/mmbiz_png/6bZBMcricibHHeSekWELdvz3CFSWtRzgLp3v5L1WDhUTxdzPicKrFr1BYhVeUcYMRh3Is7R7Cn8GpVdrHaWWsdibhA/0?wx_fmt=png\"></mp-miniprogram><p>222222</p ></p >"
	}]
}

主要看content里面的代码，传给微信时双引号必须为 \"  ;然后这样基本就完了，大家赶快去试试吧！下面贴上效果图：

 

这里我们就可以在微信公众号给客户发送消息，客户就可以通过点击小卡片直接跳转至对应的小程序。

以下是我做这个功能的一些心得。与大家共勉

1、你要发送的小程序必须和你发送消息的公众号关联在一起，具体怎么关联可自行百度；

2、发送小程序卡片的封面图片必须是已经上传至微信服务器的且必须是1080*864像素的

3、就是发送显示同步至微信富文本编辑器的html代码必须按照以上代码验样例一样的格式。