用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    郁闷
    2017-6-29 17:34
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    76

    主题

    104

    帖子

    10万

    金钱

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    优秀版主

    2017-1-19 16:37:38 cyk 管理员 楼主 22533
    1. 背景和功能

    用于在小程序中渲染Markdown文本。

    众所周知,Markdown的渲染一般需要解析成HTML来渲染。然而小程序并没有提供HTML渲染的功能,甚至连利用JS动态创建UI元素都不可能。因此所有的Markdown渲染库全部无法在小程序下正常工作。

    本库可以实现在小程序下渲染Markdown内容,支持图片、表格在内的大部分Markdown特性。

    使用方式1. 准备工作:
    • 下载并拷贝wemark目录到小程序根目录
    • WXSS中引用样式:@import '../wemark/wemark.wxss'
    • WXML中引用结构:<import src="../wemark/wemark.wxml"/>
    • JS中引用wemark:var wemark = require('wemark')
    2. JS部分

    首先需要确定一个用于wemark渲染使用的数据名称(默认情况下为wemark),然后在页面的data中指定:

    page({    data:{        // 确定一个数据名称        wemark:{}    }});

    接下来在Page的生命周期函数(如onReady)中,调用wemark.parse(md, this, options)即可。

    具体的参数说明:

    • md,必填,需要渲染的Markdown字符串
    • this,必填,Page实例
    • options,其它的参数
      • imageWidth,图片的宽度,如包含图片,则为必填,以px为单位
      • name,对应上面指定的数据名称,默认为wemark
    3. WXML部分
    [AppleScript] 纯文本查看 复制代码
    // data中的参数和上方确定的数据名称保持一致
    <tempalte is="wemark" data="{{...wemark}}"></tempalte>

    实例
    [AppleScript] 纯文本查看 复制代码
    // 引入wemark
    var wemark = require('../wemark/wemark');
    // 需要渲染的Markdown文本
    var md = '# hello, world\n\nI love you, wemark!';
     
     
    Page({
        data: {
            // 确定一个数据名称
            wemark:{}
        },
        onReady: function(){
            wemark.parse(md, this, {
                imageWidth: wx.getSystemInfoSync().device.windowWidth - 40,
                name: 'wemark'
            })
        }
    });


    特性
    • 标题
    • 段落
    • 代码段
    • 引用
    • 无序列表
    • 有序列表
    • 粗体
    • 强调(斜体)
    • 行内代码
    • 图片
    • 表格



    附件下载:
    游客,如果您要查看本帖隐藏内容请回复

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    啥也不说了,感谢楼主分享哇!
    haoxianbucuo
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略