towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本

这篇具有很好参考价值的文章主要介绍了towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Towxml概述

towxml3.0 支持以下功能:

● echarts图表,默认禁用,需自行构建以开启此功能
● LaTeX数学公式,默认禁用,需搭建解析服务并自行构建以开启此功能
● yuml图表,默认禁用,需要搭建解析服务并自行构建以开启此功能
● highlight代码高亮,默认开启(默认仅开启bash、javascript、json、python、html、css、php、scss、shell),其它语言高亮支持需自行构建以开启

安装下载 Towxml

  1. 先使用命令克隆到本地中(使用git进行安装)
git clone https://github.com/sbfkcel/towxml.git
  1. 对克隆的下的文件进行依赖安装和npm重构
npm install  # 安装依赖
npm run build # npm 重构

towxml,微信小程序,微信小程序,小程序

构建完成后,会在当前的目录中生成一个dist目录(按照提示找到对应的文件夹),然后将其拷贝到微信小程序项目中(根下),重命名为towxml即可。

towxml,微信小程序,微信小程序,小程序

在小程序中使用 towxml

  1. 引入towxml库到 App.js中
// app.js
App({
  towxml: require('./towxml/index'),
  onLaunch() {
  },
})

  1. 在具体页面的配置文件中引入towxml组件

注意:这里的组件路径根据自己的页面去找相对路径。

{
    "usingComponents": {
        "towxml": "../../towxml/towxml"
    }
}
  1. 在wxml页面中使用towxml组件
<view class="content-info">
  <towxml nodes="{{article}}"/>
</view>
  1. 在具体页面的js中对需要进行markdown转换wxml的业务进行处理解析

下面是官方给出的例子:

//获取应用实例
const app = getApp();
Page({
  data: {
    isLoading: true,					// 判断是否尚在加载中
    article: {}						// 内容数据
  },
  onLoad: function () {
    let result = app.towxml(`# Markdown`,'markdown',{
      base:'https://xxx.com',				// 相对资源的base路径
      theme:'dark',					// 主题,默认`light`
      events:{					// 为元素绑定的事件方法
        tap:(e)=>{
          console.log('tap',e);
        }
      }
    });

    // 更新解析数据
    this.setData({
      article:result,
      isLoading: false
    });

  }
})

其实就是调用app.towxml(str,type,options)函数

const app = getApp(); // 应用实例
Page({
  // ....
   onLoad:function(){
     // 这是一个伪代码
     let 解析的结果 = app.towxml('想要被解析的数据','markdown',[options])
   } 
})

其中的options选项都是可选的,可以一个都不加,选项说明如下:
app.towxml(str,type,options)有三个参数
str 必选,html或markdown字符串
type 必选需要解析的内容类型html或markdown
options [object] 可选,可以该选项设置主题、绑定事件、设置base等
base [string] 可选,用于指定静态相对资源的base路径。例如:https://xx.com/static/
theme [string] 可选,默认:light,用于指定主题’light’或’dark’,或其它自定义
events [object] 可选,用于为元素绑定事件。key为事件名称,value则必须为一个函数。例如:{tap:e=>{console.log(e)}}
5. 页面显示效果

towxml,微信小程序,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-859222.html

到了这里,关于towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在微信小程序中使用leafletwx加载自制手绘地图

    leafletwx是基于leaflet,使用微信原生组件开发的一套开源地图组件,目的是替换小程序内的原生map组件,项目开源地址:leatletwx。 加载自制手绘地图效果:  本示例开源地址在leafletwx的mymap页面。 可以使用gdal,安装成功后,使用命令 切分瓦片(使用gdal): gdal2tiles-l.py -l -p

    2024年01月24日
    浏览(44)
  • 使用百度地图坐标在微信小程序中定位显示

    一.需求描述:设备在上线时需要在上线点记录所在地点的坐标和位置描述信息 分别需要实现三个功能 1. 根据坐标点显示位置信息 , 图1 中的红色坐标点跳转到 图2 时,在腾讯地图上标出所在坐标点,并显示地点信息; 2. 定位当前所在位置 :点击蓝色图标,会定位当前所在位

    2024年02月09日
    浏览(76)
  • 在微信小程序中如何使用Loading组件显示载入动画

    Loading组件是微信小程序中常用的一种UI组件,用于在数据加载过程中显示载入动画,提高用户体验。本文将详细介绍如何在微信小程序中使用Loading组件,并提供相应的源代码示例。 创建Loading组件 首先,在小程序的组件文件夹中创建一个名为\\\"loading\\\"的文件夹,并在该文件夹下

    2024年02月03日
    浏览(53)
  • 微信小程序3D,使用Three.js在微信小程序中展示gltf模型,使用VisionKit展示AR能力

    本仓库只开源gltf模型展示技术,技术好的朋友有这些代码就能帮助你解决很多问题了 如需要完整项目(基于若依框架开发的后端,AR能力前端)需另外付费赞助, 联系方式:QQ 790002517 微信公众号:时不待我 https://github.com/zzy-life/Wechat3D Three.js Three.js is a JavaScript 3D library. thr

    2024年02月09日
    浏览(44)
  • 使用web-view在微信小程序中显示网页

    比如要在小程序中显示《用户协议》《隐私政策》等网页内容,可以直接用web-view显示 如下代码所示 打开的页面标题显示的是网页的标题,也就是title标题/title标签中的内容 最后,记得在小程序后台开发管理中添加业务域名,把要访问的网址添加到业务域名中,否则小程序发

    2024年02月15日
    浏览(64)
  • 五分钟学会在微信小程序中使用 vantUI 组件库

    我们在开发微信小程序时,设计和实现好用的用户界面无疑是至关重要的一步。但是微信小程序官方自带的 UI 组件库无法满足很多使用场景,这个时候就需要我们使用一些第三方的 UI 组件库。而 vant Weapp 作为一款优秀的前端 UI 组件库,可以帮助我们快速地构建漂亮而且易用

    2023年04月24日
    浏览(70)
  • 如何在微信小程序中使用less来编写css

    在微信小程序中使用 Less 需要一些额外的配置步骤,因为小程序本身不支持直接引用 Less 文件。我们可以借助 Webpack 进行构建,使用一些 loader 来编译 Less 文件。以下是具体步骤: 初始化项目 使用微信开发者工具新建一个小程序项目,或在已有项目的基础上操作。 安装依赖 使用

    2024年04月09日
    浏览(60)
  • uniapp使用threejs-miniprogram在微信小程序加载模型

    1.通过 npm 安装 2.导入小程序版本的 Three.js并创建一个与 canvas 绑定的 three.js  3.创建渲染器 4.创建场景,创建相机,渲染 5.注册GLTF加载器,加载模型添加到场景 threejs-miniprogram/example/loaders/gltf-loader.js at master · wechat-miniprogram/threejs-miniprogram · GitHub 下载 gltf-loader.js 注册gltf-loader 加

    2024年02月08日
    浏览(45)
  • 微信小程序使用云存储和Markdown开发页面

    最近想在一个小程序里加入一个使用指南的页面,考虑到数据存储和减少页面的开发工作量,决定尝试在云存储里上传Markdown文件,微信小程序端负责解析和渲染。小程序端使用到一个库Towxml。 Towxml是一个可将 HTML 、 Markdown 转为微信小程序 WXML (WeiXin Markup Language)的渲染库。用

    2024年02月10日
    浏览(38)
  • uniapp中使用canvas,在微信小程序中实现图片缩放移动涂鸦文字

    最近需要一个功能,在微信中编辑图片,实现对图片的涂鸦、加文字、缩放、移动,以下基本能实现该功能。 uniapp中使用画布,实现图片的编辑-批量批改图片 1.初始化画布图片,图片是网络图片,非本地图片,所以需要先获取图片信息,直接使用uni.getImageInfo(如果是本地图

    2024年04月14日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包