前言

需求：用户关注公众号后，如何在微信推送的多图文消息中，直接打开第三方链接，而不是站内文章？

事先说明该需求作者已经解决，但只是关注后推送。如果要求主动发送图文消息，该文章无法实现。

如果你是运营人员，请联系开发查看该文章，因为单纯通过公众号后台无法实现。

如果你的需求是单图文消息，使用客服消息，或者公众号后台配置都可以实现，该篇文章对你无效。

假设你的后台程序并没有 接管公众号消息后台配置，那么该篇文章对你无效。

一、解决思路

1.公众号后台设置

登录微信公众号后台，打开草稿箱菜单，点击新的创作。设置其图文消息，但是在此处并没有设置外链的位置，只有设置跳转至站内文章，找了一圈也没有找到设置的地方，固然当前思路无效。无法达到效果。此方案不可取 PASS。

2.客服消息

当用户关注后，调用客服消息给用户发送图文消息。客服消息推送相关 微信文档

但是看后续公众号文章说明，客服消息已经不能推送多条图文消息了，
如果你硬要推送多条消息，微信只能给你返回 45008 article size out of limit 相关code 错误提示了。

具体微信描述如下：
从2018-10-12日20时起，微信接口规则调整，除公众号规定的素材群发外，不再支持多图文格式（单图文依然保留，但图文数超过1的多图文格式不再支持）。

3.google & baidu 寻找答案

建议大家千千万万不要盲目的去搜索，搜到的东西，全部都是第三方平台的水文，全是在介绍推广自己平台的，实际的作用一点也没有。

举两个栗子：

还有些文章排版布局，看的头皮发麻，可能是文章太久远了对我一点用处没有起到，类似于： https://blog.csdn.net/qq_29162769/article/details/73432440

但是通过他们发的这些回答，更确定了 一定是有接口实现的，只不过还没有找到，如何实现而已。

4.关注后自动推送（正解）

当用户关注公众号，可以根据事件推送相关的内容，推送的消息内容类型比较多。
详细参考 消息模块微信文档

如果你是 Java 后台开发的话，建议使用 25k Star wxJava 相关代码实现该需求。当然你也可以 微信公众号开发者文档 实现该功能。

可能会有人问，因为一个功能引入一个 pom 包并不恰当，其实当你了解过该项目后，你会了解到 开发微信相关功能会如此简单。

项目文档：项目文档
项目示例地址： 示例项目地址

假设你已经下载示例项目 并且已经在 yml中 配置好了公众号配置。这个时候可以启动项目了。

启动项目后，你可以去接管公众号服务器配置。如下图：配置好一定要点击 红框中启动配置。

配置的服务器地址(URL)应该是 https://本机地址/app/wx/portal/{appid}，该地址外网一定是可以访问的，具体映射方式此文章不在介绍。

配置的服务器地后。打开微信打开你配置的公众号，取消后再次关注，你可以在idea 日志中接收到 关注/取消关注的通知。

接下来打开 builder 目录，新建文件名字为 NewsBuilder.java ，具体内容如下：

import 你的文件地址;

import com.github.binarywang.demo.wx.mp.builder;

import me.chanjar.weixin.mp.api.WxMpService;
import me.chanjar.weixin.mp.bean.message.WxMpXmlMessage;
import me.chanjar.weixin.mp.bean.message.WxMpXmlOutMessage;
import me.chanjar.weixin.mp.bean.message.WxMpXmlOutNewsMessage;

/**
 * @author Binary Wang(https://github.com/binarywang)
 */
public class NewsBuilder extends AbstractBuilder {

    @Override
    public WxMpXmlOutMessage build(String content, WxMpXmlMessage wxMessage,
                                   WxMpService service) {
        WxMpXmlOutNewsMessage.Item item1 = new WxMpXmlOutNewsMessage.Item();
        item1.setUrl("填写真实跳转地址");
        item1.setPicUrl("填写真实图片地址");
        item1.setDescription("我是介绍，虽然我没有用到");
        item1.setTitle("我是标题");

        WxMpXmlOutNewsMessage.Item item2 = new WxMpXmlOutNewsMessage.Item();
        item2.setUrl("填写真实跳转地址");
        item2.setPicUrl("填写真实图片地址");
        item2.setDescription("我是介绍，虽然我没有用到");
        item2.setTitle("我是标题");

        WxMpXmlOutNewsMessage.Item item3 = new WxMpXmlOutNewsMessage.Item();
        item3.setUrl("填写真实跳转地址");
        item3.setPicUrl("填写真实图片地址");
        item3.setDescription("我是介绍，虽然我没有用到");
        item3.setTitle("我是标题");

        return WxMpXmlOutMessage.NEWS().addArticle(item1, item2, item3).fromUser(wxMessage.getToUser()).toUser(wxMessage.getFromUser()).build();
    }
}

打开：handler 目录，找到 SubscribeHandler.java 相关类，配置后你要推送的内容即可。
如下图代码所示

@Component
public class SubscribeHandler extends AbstractHandler {

    @Override
    public WxMpXmlOutMessage handle(WxMpXmlMessage wxMessage,
                                    Map<String, Object> context, WxMpService wxMpService,
                                    WxSessionManager sessionManager) throws WxErrorException {

        return new NewsBuilder().build("", wxMessage, wxMpService);
    }
}

重新启动项目，再次点击关注后，尝试下是否可以推送图文信息。

总结

弊端：无法在图文中直接打开小程序，找寻了多种方式并没有找到合适的方式，如果找到会更新此文章。

至此，跳转三方链接的问题，已经解决完毕了。当然实现方法不止当前一种，如果你有好的建议，或者当前文章有什么问题，可以在评论区告知，并提出你的意见。

联系方式：微信 (Base64)：eWN3MTQ5OTg=

多读多写多记录，多学多练多思考。----------- Banana • Banuit Gang(BUG香柚帮)

前边已经说了利用融云小程序的demo发起单聊，这次说说怎么实现在聊天的时候发送图文消息。其实这个和它demo里边的发送音乐是类似的，只需要在聊天框里添加一个发送图文消息的点击按钮，然后添加一个发送图文消息的方法就行了。

上一篇地址：https://blog.csdn.net/likun_li/article/details/89331080

1.首先添加一下发送图文的按钮和图文组件，直接复制发送音乐的就行。

chat.wxml

//部分代码
<view class='rong-editor-modules'>
     <view class='rong-editor-module rong-editor-module-image' bindtap='sendImage'></view>
</view>
<!-- <view class='rong-editor-modules'>
     <view class='rong-editor-module rong-editor-module-music' bindtap='sendMusic'></view>
</view> -->
//新增的发送图文按钮，可以自己修改样式，绑定sendImgtxt
<view class='rong-editor-modules'>
    <view class='rong-editor-module rong-editor-module-imgtxt' bindtap='sendImgtxt'></view>
</view>

components/message/下添加图文组件imgtxt.*，直接复制music.*

imgtxt.wxml

//绑定skip,skip中写了你图文消息要跳转的地址
<view class='rong-music' bindtap='skip'>
  <view class='rong-music-player' style='background-image:url("{{message.content.imageUri}}")'></view>
  <view class='rong-music-basic'>
    <view class='rong-music-basic-name'>{{message.content.title}}</view>
    <view class='rong-music-basic-author'>{{message.content.content}}</view>
  </view>
</view>

imgtxt.js

 /**
   * 组件的方法列表
   */
  methods: {
    skip: function(){
      var url = this.properties.message.content.url;
      console.log(url);
      this.triggerEvent('onskip', url);
      wx.navigateTo({
        url: url,
      })
    }
  }

2,在components文件夹下的message.*中添加imgtxt组件

message.json

{
  "component": true,
  "usingComponents": {
    "TextMessage": "./message/text",
    "ImageMessage": "./message/image",
    "VoiceMessage": "./message/voice",
    "MusicMessage": "./message/music",
    "RichContentMessage": "./message/imgtxt"//新增组件名字是RichContentMessage
  }
}

message.wxml

<view wx:else class='rong-message-content rong-message-content-{{message.direction}}'>
    <TextMessage wx:if =  '{{message.name == "TextMessage"}}'   message='{{message}}'></TextMessage>
    <VoiceMessage wx:if = '{{message.name == "VoiceMessage"}}'  message='{{message}}' bindonplay='onPlayVoice'></VoiceMessage> 
    <MusicMessage wx:if = '{{message.name == "MusicMessage"}}'  message='{{message}}' bindonplaymusic='onPlayMusic' bindonstopmusic='onMusicStop'></MusicMessage> 
//新增的图文消息组件，绑定了onSkip
    <RichContentMessage wx:if = '{{message.name == "RichContentMessage"}}'  message='{{message}}' bindonskip ='onSkip'></RichContentMessage> 
</view>

message.js

// pages/conversation/components/message.js
Component({
  options: {
    multipleSlots: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
    message: Object
  },
  relations: {
    './message/image': {
      type: 'child'
    },
    './message/text': {
      type: 'child'
    },
    './message/voice': {
      type: 'child'
    },
    './message/imgtxt': {//新增图文
      type: 'child'
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onPlayVoice: function (event) {
      this.triggerEvent('onplay', event.detail)
    },
    onPlayMusic: function(event){
      this.triggerEvent('onplaymusic', event.detail)
    },
    onMusicStop: function (event){
      this.triggerEvent('onmusicstop', event.detail)
    },
    onPreviewImage: function(event){
      let {detail} = event;
      this.triggerEvent('onpreviewimage', detail);
    },
    onSkip: function (event) {//新增
      let { detail } = event;
      this.triggerEvent('onskip', detail);
    }
  }
})

组件配置好了，接下来就是写发送图文消息的方法了，首先去services.js里边添加图文相关的方法，直接复制音乐的就行

services.js

//services.js 中需要修改添加的内容
//发送消息
let sendMessage = (type, targetId, message) => {
  let bindUser = (_msg, next) => {
    bindSender(_msg);
    next(_msg);
  };

  return new Promise((resolve, reject) => {
    let { name, avatar } = currentUser;
    let user = {
      name,
      avatar
    };

    let messageMap = {
      text: () => {
        let {content} = message;
        return new RongIMLib.TextMessage({ content, user });
      },
      image: () => {
        let { content, imageUri, extra } = message;
        return new RongIMLib.ImageMessage({ content, imageUri, user, extra });
      },
      voice: () => {
        let { content, duration } = message;
        return new RongIMLib.VoiceMessage({ content, duration, user });
      },
      music: () => {
        let {name, url, author, poster} = message;
        return new RongIMClient.RegisterMessage.MusicMessage({ name, url, author, poster, user});
      },
//图文消息构造方法，RongIMLib.RichContent({标题，内容，图片，跳转url}),注意RongIMLib别写成了RongIMClient否则会报错说not a constructor
      imgtxt: () => {
        let { title, content, imageUri, url } = message;
        return new RongIMLib.RichContentMessage({ title, content, imageUri, url, user,});
      }
    };

    let msg = messageMap[message.type]();
    imInstance.sendMessage(+type, targetId, msg, {
      onSuccess: result => {
        console.warn('service promise sendmessage success: ', msg);//服务承诺发送消息成功
        bindUser(result, resolve);
      },
      onError: (error, result) => {
        console.warn('service promise sendmessage error: ', error);
        //bindUser(message, reject);
      }
    });
  });
};
//获取图文消息参数，这里我写在了mock.js假数据中，取最后一项
let getImgtxt = () => {
  let len = ImgtxtList.length;
  let index = len-1;
  return ImgtxtList[index];
};
//发送图文消息
Message.sendImgtxt = (params) => {
  let { type, targetId } = params;
  let content = utils.extend({ type: 'imgtxt' }, getImgtxt());
  return sendMessage(type, targetId, content);
};
let bindUserInfo = (list) => {
  let unknowUser = {
    name: '火星人',
    avatar: 'https://rongcloud-image.cn.ronghub.com/FjGxbmdZ7wyIqMHvaa3SqOgSZGk_?e=2147483647&token=CddrKW5AbOMQaDRwc3ReDNvo3-sL_SO1fSUBKV3H:OCCilgLZtkK8G9AmayjUzP9J66w='
  };
  let unknowGroup = {
    name: '火星群组',
    avatar: 'https://rongcloud-image.cn.ronghub.com/FjGxbmdZ7wyIqMHvaa3SqOgSZGk_?e=2147483647&token=CddrKW5AbOMQaDRwc3ReDNvo3-sL_SO1fSUBKV3H:OCCilgLZtkK8G9AmayjUzP9J66w='
  };
  if (!utils.isArray(list)){
    list = [list];
  }

  let infoMap = {
      1: (conversation) => {
        conversation.target = utils.find(UserList, (user) => {
          return user.id == conversation.targetId
        }) || unknowUser;
      },
      2: (conversation) => {
        conversation.target = unknowUser;
      },
      3: (conversation) => {
        conversation.target = utils.find(GroupList, (group) => {
          return group.id == conversation.targetId
        }) || unknowGroup;
      },
      10: (conversation) => {
        conversation.target = unknowUser;
      }
  };
  let formatMsg = (msg) => {
    let {messageType} = msg;
    let content = '[此消息类型未解析]';
    if (messageType == 'TextMessage'){
      content = msg.content.content;
    }
    if (messageType == 'VoiceMessage') {
      content = '[语音]';
    }
    if (messageType == 'ImageMessage') {
      content = '[图片]';
    }
    if (messageType == 'FileMessage') {
      content = '[文件]';
    }
    if (messageType == 'MusicMessage') {
      content = '[音乐]';
    }
//添加会话列表显示内容
    if (messageType == 'RichContentMessage') {
      content = '[图文]';
    }
    return content;
  };
  utils.map(list, (conversation) => {
    let {sentTime} = conversation;
    conversation._sentTime = utils.getTime(sentTime);
    conversation.unReadCount = conversation.unreadMessageCount;
    let { latestMessage } = conversation;
    conversation.content = formatMsg(latestMessage);
    let _type = conversation.conversationType;
    _type = _type > 3 ? 10 : _type;
    infoMap[_type](conversation);
  });

};

mock.js

ImgtxtList: [{
    title: "确认函",
    content: "点击查看",
    imageUri: "http://xxxxx/1.png",
    url: "../pay/pay"
  
  }],

接下来就是写图文按钮的逻辑

chat.js

//发送图文消息
const sendImgtxt = (context) => {
  let { content, type, targetId, messageList } = context.data;
  Message.sendImgtxt({
    type,
    targetId
  }).then(message => {
    messageList.push(message);
    context.setData({
      messageList,
      toView: message.uId
    });
  });
};
Page({
  data: {
    content: '',
    messageList: [],
    bottom: 0,
    adapterHeight: 0,
    display: {
      emoji: 'none',
      more: 'none'
    },
    emojis: formatEmojis(),
    isShowEmojiSent: false,
    isRecording: false,
    isShowKeyboard: false,
    hasMore: true,
    toView: '',
    playingVoice: null,
    playingMusicComponent: null,
    isAllowScroll: true,
    scrollTop: 0,
    isAdmin:true
  },
  hideKeyboard: function () {
    hideKeyboard(this);
  },
  selectEmoji: function (event) {
    selectEmoji(this, event);
  },
  sendText: function () {
    sendText(this);
  },
  getMoreMessages: function (event) {
    getMoreMessages(this);
  },
  sendImage: function () {
    sendImage(this);
  },
  sendImgtxt: function () {//点击图文按钮之后，找到此方法
    sendImgtxt(this);
  },
  sendMusic: function () {
    sendMusic(this);
  },
  showVoice: function(){
    showVoice(this);
  },
  showKeyboard: function(){
    showKeyboard(this);
  },
  startRecording: function(){
    startRecording(this);
  },
  stopRecording: function(){
    stopRecording(this);
  },
  showEmojis: function(){
    showEmojis(this);
  },
  showMore: function(){
    showMore(this);
  },
  // 以下是事件
  onLoad: function (query) {
    
  },
  onUnload: function () {
    onUnload(this);
  },
  onInput: function(event){
    this.setData({
      content: event.detail.value
    });
  },
  onFocus: function(event){
    let { height} = event.detail;
    let adapterHeight = 0;
    setKeyboardPos(this, height, adapterHeight);
    hideSoftKeyboard(this);
  },
  onPlayVoice: function(event){
    playVoice(this, event);
  },
  onPlayMusic: function (event){
    playMusic(this, event);
  },
  onMusicStop: function(event){
    stopMusic(this, event);
  },
  onPreviewImage: function(event){
    previewImage(this, event);
  },
  onHide: function(){
    hideKeyboard(this);
    stopPlayMusic(this);
  }
})

修改成功之后的样子就是这样了

  在使用Markdown语言编辑器编辑微信公众号文章完毕后，将其复制到公众号文章编辑器，点击保存，出现请勿插入不合法的图文消息链接错误提示。

  随后检查文章，发现在文中出现了一处指向其它公众号文章的链接。

  随后，将鼠标放在上图中蓝色链接处（也就是打了马赛克那里），点击“修改”，发现需要设置一下具体的链接信息——也就是需要将蓝色部分的链接作为“超链接”进行设置（只有插入其它微信公众号文章的链接，也就是https://mp.weixin.qq.com开头的链接才需要额外设置成超链接；除公众号文章以外的链接就可以不设置）：

  选择好公众号与对应的文章后，重新保存，发现依然具有上述请勿插入不合法的图文消息链接错误提示。
  进一步发现，由于原本是在Markdown语言编辑器中编辑的文章，因此其具有[]()语句，例如：

  在Markdown语言编辑器中使用了这句语句后，在公众号文章编辑器中的样子是这样的：

  由此可知，除了刚刚我们修改的蓝色链接部分（上图打马赛克部分）需要重新设置为超链接外，前面红色的“网址”两个字那里其实也带有链接，因此也需要将其设置为超链接，或直接将“网址”两个字对应的链接删除。我这里选择直接删除，因为后面蓝色链接部分已经设置成为相同的超链接了。删除方法如下：

  综上，将“网址”两个字对应的链接删除，再将后面蓝色的实际链接部分设置为超链接，整篇公众号文章就可以正常保存。