1. 名称:
    html-to-wxml
  2. 作者:
    站长老左
  3. 来源:
  4. 浏览:
    23896
  5. 下载:
    3461
  6. 最新更新:
    2016-11-17
  7. 收藏4

插件地址:https://github.com/kevenfeng/html-to-wxml

如果前端技术比较牛,可以直接看github上面的demo。可以更好的理解用法。

使用方法:
1.引用插件
var R_htmlToWxml = require(‘../../util/htmlToWxml.js’);//引入公共方法
2.将html内容转成json数据
R_htmlToWxml.html2json(“html内容”);
转换后的json格式类型大概如下:

3.吐到页面中显示

<block wx:for="{{content}}"  wx:for-index="idy"  wx:for-item="cellData">
        <block  wx:if="{{cellData.type == 'view'}}">
            <view class="p">
                <block  wx:for="{{cellData.child}}" wx:key="text">
                    <block  wx:if="{{item.type == 'a'}}">
                        <text class="a" data-seccode="{{item.attr['data-seccode']}}" data-secname="{{item.attr['data-secname']}}" bindtap="stockClick">{{item.text}}</text>
                    </block>
                    <block  wx:else>
                        <text>{{item.text}}</text>
                    </block>
                </block>
            </view>
        </block>
        <block wx:if="{{cellData.type == 'img'}}">
            <image class="img" data-index="{{idy}}" style="height: {{cellData.attr.height?cellData.attr.height:0}}px"  mode="aspectFit" src="{{cellData.attr.src}}" bindload="imageLoad"></image>
        </block>
    </block>

demo效果:

blob.png


由于小程序图片的高度没法自适应,需要给图片设置高度,所以需要在图片加载完以后,获取图片高度,等比算出显示图片高度,赋值给对应图片

通常我们抓取的内容是html页面,特别是像资讯这一类的,如果在小程序里面显示文章内容,此插件提供了一种解决方案,希望对大家有用。

在客户端中用native显示html页面体验上面没有native的好,htmlToWxml插件给客户端中用native的方式显示html内容提供了一种解决方案



共0 条评论
  1. 加载评论

评论内容:

发表评论
  1. 全部组件分类
  2. 瀑布流
  3. 示例
  4. 提示组件(ToolTip)
  5. 下拉刷新、上拉加载
  6. Toast
  7. 选项卡(tab)
  8. 图表
  9. 卡片切换
  10. 菜单
  11. 筛选
  12. 星级评分
  13. 选择器
  14. 滑动删除
  15. 手势密码
  16. Switch
  17. 搜索
  18. 游戏
  19. 弹幕
  20. 懒加载
  21. 布局
  22. 应用模仿
  23. Emoji
  24. 转盘抽奖
  25. 插件
  26. UI库
  27. 动画
  28. 下拉列表
  29. SnackBar
  30. HTML解析
  31. 日历
  32. 点餐小程序
  33. 购物效果
  34. 框架
  35. 渲染引擎
  36. 商城
  37. 吸顶停留
  38. 会议
  39. 分享
  40. 其他
最新评论