V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Jelen
V2EX  ›  程序员

微信上的这种对话框文章如何实现的?

  •  1
     
  •   Jelen · 2014-08-26 10:06:57 +08:00 · 35202 次点击
    这是一个创建于 3727 天前的主题,其中的信息可能已经有所发展或是发生改变。
    一直在运营一个微信账号,当然也订阅了好些账号,前两天看到一个账号有如下的这种文章推送

    文章内容中的这种对话框形式很吸引我,就想看看是怎么做出来的,网上查了好久没有找到,
    刚开始以为是图片,后来发现里面的字是可以复制的,因此可以知道对话框不是图片,只有头像是图片,到底怎么实现的呢,是第三方工具,还是自己写的代码??求大神指教
    19 条回复    2014-08-26 18:28:52 +08:00
    kutata
        1
    kutata  
       2014-08-26 10:11:19 +08:00
    搜“bubble 消息对话框”
    Jelen
        2
    Jelen  
    OP
       2014-08-26 10:17:33 +08:00
    @kutata 一般公众号推送文章应该都是后台编辑,不会有这个bubble代码编写的可能性吧?
    qiayue
        3
    qiayue  
       2014-08-26 10:21:40 +08:00
    楼主把文章地址发出来,我们帮你从技术角度看看
    binghe
        4
    binghe  
       2014-08-26 10:42:01 +08:00
    手机客户端自己修改的对话框样式吧
    Jelen
        5
    Jelen  
    OP
       2014-08-26 10:51:56 +08:00
    @qiayue 我担心说是广告,才隐掉的,地址在这里,这个是我关注的公众号,请忽略这些细节
    http://mp.weixin.qq.com/s?__biz=MjM5MjM5NDg3NA==&mid=201507608&idx=1&sn=ab53840635f18b0fae1b19cdad5a42fe&scene=3#rd
    Jelen
        6
    Jelen  
    OP
       2014-08-26 10:52:13 +08:00
    @binghe 不是的,就是在推送的文章里面的
    oott123
        7
    oott123  
       2014-08-26 11:01:53 +08:00
    1. 试着在 Word 里实现之后复制上公众平台
    2. 试着在公众平台 POST 发包时截取修改
    3. 试试这个高级接口 http://mp.weixin.qq.com/wiki/index.php?title=%E9%AB%98%E7%BA%A7%E7%BE%A4%E5%8F%91%E6%8E%A5%E5%8F%A3

    因为我手上木有可以折腾的公众号,我就不测试了 :) 祝楼主成功!成功了记得 at 我分享一下经验~
    qiayue
        8
    qiayue  
       2014-08-26 11:02:04 +08:00
    @Jelen 看了 html ,发现对话框内容是在 rich_media_content 这个 div 里边,然后我看了自己的公众号的文章也是在这个 div 里边的,所以,我觉得,这个效果是在发布文章的编辑器里边做的。
    iyaozhen
        9
    iyaozhen  
       2014-08-26 11:21:35 +08:00
    微信的文章同样支持一些html代码,这个估计是谁开发的工具做的,然后再复制到后台编辑框里面。
    foru17
        10
    foru17  
       2014-08-26 12:40:27 +08:00
    刚刚试了下,直接插入html是不行的。
    beordle
        11
    beordle  
       2014-08-26 12:52:46 +08:00
    事实是素材管理->图文消息 这里可以插入 HTML

    这个网页的效果也是4个头像+4个角的图片+ 4个圆角div做成的
    kutata
        12
    kutata  
       2014-08-26 12:56:19 +08:00
    @Jelen 呃,对哦,我光从技术的角度出发没有考虑昰基于微信平台。。。。
    foru17
        13
    foru17  
       2014-08-26 13:02:44 +08:00
    找到方法了。直接用其他的编辑器生成,然后复制进去就好了
    Jelen
        14
    Jelen  
    OP
       2014-08-26 14:47:41 +08:00
    @qiayue
    @oott123
    我觉得最大的可能性就是外部编辑器编辑好然后直接复制进去的,运营微信平台的不一定就是写代码的,所以写代码的可能性不是很大
    Jelen
        15
    Jelen  
    OP
       2014-08-26 14:48:20 +08:00
    @beordle
    可以写吗,我还没测试,但是这个效果应该不是几句代码就能写出来的吧
    Jelen
        16
    Jelen  
    OP
       2014-08-26 14:48:38 +08:00
    @foru17 好吧,比较偏向于你的方法啦
    eb5mj
        17
    eb5mj  
       2014-08-26 17:09:16 +08:00
    @Jelen 文字可以复制出来,不代表背景就不可以是图片。
    以android原生开发为例,使用listview,定义行模板,在行模板中可以使用相对布局,让imageview和textview重叠达到效果,或者干脆直接设置textview的背景为该图片。其中背景图片要使用.9格式的。

    如果是网页实现,那就更简单了,CSS3一切搞定。
    beordle
        18
    beordle  
       2014-08-26 17:16:00 +08:00
    @Jelen 我没说确切,就是复制的 你直接复制网页就行了 他这个是 contentEditable 实现的
    jingwentian
        19
    jingwentian  
       2014-08-26 18:28:52 +08:00 via Android
    微信公众号发文章不是富文本编辑器么。做成网页,然后直接复制过去。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1126 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 18:53 · PVG 02:53 · LAX 10:53 · JFK 13:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.