• 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 字体:[增加 减小] 来源:互联网 时间:2017-06-20

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渲染库

相关文章

  • 2018-11-30微信小程序form组件详细介绍
  • 2018-11-30关于微信小程序解析网页内容的介绍
  • 2018-11-30微信小程序入门知识
  • 2018-11-30微信小程序中页面间通信的方式
  • 2018-11-30小程序自定义组件的实现方法(代码)
  • 2018-11-30微信小程序 循环及嵌套循环的使用
  • 2018-11-30Oracle程序开发小技巧
  • 2018-11-30微信小程序开发之详解Nginx的环境配置
  • 2018-11-30小程序中image控件可以如何设置图片
  • 2018-08-20微信小程序框架视图层(View)

文章分类

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

最近更新的内容

    • 微信小程序云开发API 获取集合的引用
    • 微信小程序地图定位demo代码示例
    • 微信小程序仿美团城市选择的实现
    • 微信小程序 使用canvas制作K线实例详解
    • 微信小程序java实现AES解密并获取unionId
    • 微信小程序 地图map详解及简单实例
    • 一篇文章让你看懂哪些领域适合开发微信小程序
    • 微信小程序中图片预加载组件 wxapp-img-loader的使用介绍
    • 详解微信小程序组件:picker滚动选择器
    • js的自定义trim函数使用方法

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

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