• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >微信小程序 > 微信小程序Markdown渲染库

微信小程序Markdown渲染库

作者:git 字体:[增加 减小] 来源:互联网

git通过本文主要向大家介绍了小程序 markdown,markdown 微信,markdown微信编辑器,markdown here 微信,markdown 中文版等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
</div>

背景和功能

用于在小程序中渲染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部分

// data中的参数和上方确定的数据名称保持一致

<template is="wemark" data="{{...wemark}}"></template>

实例

// 引入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().windowWidth - 40,

            name: 'wemark'

        })

    }

});

特性

标题

段落

代码段

引用

无序列表

有序列表

粗体

强调(斜体)

删除线

行内代码

图片

表格

HTML标记

视频

测试

npm install

npm test


开源协议

MIT


版本记录

v1.1.0 2017-01-22

添加删除线渲染(~~deleted~~)

添加HTML视频解析(需求&初始实现 by @littledu)

解析功能补齐自动测试

v1.0.0 2016-12-12


项目地址:https://github.com/TooBug/wemark

下载地址:https://github.com/TooBug/wemark/archive/master.zip


</div> GIT </div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 微信小程序Markdown渲染库

相关文章

  • 微信小程序实现动态设置页面标题方法分享
  • 微信小程序开发入门教程
  • 详解微信小程序合法域名校验出错的解决方法
  • DVA框架统一处理所有页面的loading状态
  • 关于微信小程序解析网页内容的介绍
  • 微信小程序 后台https域名绑定和免费的https证书申请详解
  • 原生js怎么封装插件
  • 微信小程序 progress组件详细介绍
  • 微信小程序的SocketIO客户端 demo代码
  • 详解微信小程序如何实现登录获取unionid的图文详解

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 微信小程序:view(视图容器 )组件解读和分析
    • 微信小程序开发组件
    • 小程序实例:如何自定义下拉刷新
    • 微信小程序 基础类库
    • 利用Node.js进行文件编码格式转换
    • 小程序配置的实例详解
    • 多个页面传参通信在微信小程序中的实现
    • 小程序开发教程文档
    • 微信小程序开发遇到的问题汇总
    • 微信小程序label组件详解实例代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有