微信小程序使用云存储和Markdown开发页面

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

Towxml

Towxml是一个可将HTMLMarkdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中MarkdownHTML不能直接渲染的问题。

特色

Towxml 3.0 完整支持以下功能。当然在构建时可仅保留需要功能以减少体积大小和代码依赖。

  • 支持echarts图表(3.0+)✨
  • 支持LaTex数学公式(3.0+)✨
  • 支持yuml流程图(3.0+)✨
  • 支持按需构建(3.0+)✨
  • 支持代码语法高亮、代码块行号显示
  • 支持emoji表情😉
  • 支持上标、下标、下划线、删除线、表格、视频、图片(几乎绝大部分html元素)……
  • 支持typographer字符替换
  • 支持多主题切换
  • 支持Markdown TodoList
  • 支持事件绑定(这样允许自行扩展功能哟,例如:点击页面中的某个元素,更新当前页面内容等...)
  • 极致的中文排版优化
  • 支持前后解析数据

使用方法

1. 将构建出来的towxml并解压至小程序项目根目录下,即(小程序/towxml

2. 引入库/app.js

//app.js
App({// 引入`towxml3.0`解析方法towxml:require('/towxml/index')
})

3. 在页面配置文件中引入towxml组件 /pages/index/index.json

{"usingComponents": {"towxml":"/towxml/towxml"}
}

4. 在页面中插入组件/pages/index/index.wxml

<!--index.wxml-->
<view class="container"><towxml nodes="{{article}}"/>
</view>

5. 解析内容并使用/pages/index/index.js

//获取应用实例
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});}
})

云开发

我们需要将写好的Markdown文件拖入云存储,并且在同一级目录添加一个images文件夹。把Markdown中用到的图片拖入其中。然后在需要渲染的页面先下载Markdown文件:

wx.cloud.downloadFile({fileID: 'cloud://demo-dev-lnhec.6675-demo-dev-lnhec-1302677061/ads/markdown.md'}).then(res => {console.log(res.tempFilePath)let fs = wx.getFileSystemManager()let result = fs.readFileSync(res.tempFilePath,"utf-8")this.renderMarkdown(result)})

然后在renderMarkdown需要给towxml指定图片文件夹所在的父目录作为base地址,base地址是所有静态相对资源的base路径,这个地址不仅适用于http地址,也适用于云存储地址。

renderMarkdown(markdown){let result = app.towxml(markdown,'markdown',{base:'cloud://demo-dev-lnhec.6675-demo-dev-lnhec-1302677061/ads',				// 相对资源的base路径theme:'light',					// 主题,默认`light`events:{					// 为元素绑定的事件方法tap:(e)=>{console.log('tap',e);}}})// 更新解析数据this.setData({article:result,isLoading: false});},

最后我们来看看渲染结果:

可以看到Markdown里的图片链接成功渲染出来了。

总结

本文介绍通过将Towxml与云存储结合,在微信小程序中渲染Markdown文件,快速开发容易维护的QA、教程页面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/47270.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一体全栈、开箱即用!麒麟信安与灵雀云携手打造“操作系统+云平台”联合解决方案

近日麒麟信安与北京凌云雀科技有限公司&#xff08;以下简称“灵雀云”&#xff09;开展生态合作&#xff0c;共同完成了灵雀云企业级全栈云原生平台ACPV3与麒麟信安操作系统V3等系列产品的兼容性认证测试。基于双方产品兼容性良好、稳定运行、性能表现卓越&#xff0c;麒麟信安…

Java实现钉钉企业内部应用机器和自定义机器人发送消息

前言 公司让写一个服务监控的功能,当监测到服务停止时,向钉钉群里推送报警信息。之前大概看到钉钉的开放平台的API文档,好像能群发消息的只有机器人。 钉钉开放平台目前提供三种机器人: 企业内部应用机器人 群模板机器人 自定义机器人 本来向用自己比较熟悉的自定义机器人…

PHP自己的框架实现操作成功失败跳转(完善篇四)

1、实现效果&#xff0c;操作成功后失败成功自动跳转 2、创建操作成功失败跳转方法CrlBase.php /**成功后跳转*跳转地址$url* 跳转显示信息$msg* 等待时间$wait* 是否自动跳转$jump*/protected function ok($urlNULL,$msg操作成功,$wait3,$jump1){$code1;include KJ_CORE./tp…

【快速解决方案】浏览器的安全策略不允许通过 file:// 协议直接加载外部文件(最省事的方法)

目录 问题摘要 解决办法 检验结果 问题摘要 Failed to load resource: net::ERR_FILE_NOT_FOUND&#x1f308; Cute Code Editor &#x1f308;.html:162 Fetch API cannot load file:///D:/%E6%A1%8C%E9%9D%A2/%E4%B8%83%E5%A4%95%E5%BF%AB%E4%B9%90/index.txt. URL scheme …

Java基础知识题(五)

系列文章目录 Java基础知识题(一) Java基础知识题(二) Java基础知识题(三) Java基础知识题(四) Java基础知识题(五) 文章目录 系列文章目录 前言 一 Java的数据连接——JDBC 1. 简述什么是JDBC&#xff1f;重点 2. JDBC PreparedStatement比Statement有什么优势&…

Spring Boot

前言 什么是Spring Boot&#xff1f;为什么要学Spring Boot&#xff1f; Spring 的诞⽣是为了简化Java 程序的开发的&#xff0c;⽽Spring Boot 的诞⽣是为了简化Spring 程序开发 的。Spring就像汽车&#xff0c;相比以前人只能其自行车走路&#xff0c;汽车可以帮助人们更快…

git获取远端分支和merge

将远程分支拉取到本地 你可以使用以下命令&#xff1a; 1. 首先&#xff0c;使用git fetch命令从远程仓库获取最新的分支信息&#xff1a; git fetch origin 这个命令将会将远程仓库origin的分支信息下载到本地。 2. 接下来&#xff0c;可以使用git checkout命令切换到你想…

C# WPF ListBox 动态显示图片

前言 最近在和其他软件联合做一个本地图片选择传输功能&#xff0c;为此希望图片能够有序的呈现在客户端&#xff0c;简单的实现了一下功能&#xff0c;通过Mvvm模式进行呈现&#xff0c;过程简单通俗&#xff0c;话不多说直接上图。 处理过程 前台代码 你只需要粘贴到你的前台…

生物识别技术与身份认证:探讨生物识别技术在强化身份认证和访问控制方面的应用

第一章&#xff1a;引言 在数字化时代&#xff0c;随着信息技术的飞速发展&#xff0c;身份认证和访问控制变得越来越重要。传统的用户名和密码方式逐渐暴露出安全性不足的问题&#xff0c;为此&#xff0c;生物识别技术应运而生。生物识别技术利用人体生物特征来识别个体身份…

字符串哈希(线段树维护)

例题&#xff1a;https://acm.sdut.edu.cn/onlinejudge3/problems/4928ui​​​​​​ 第一种方式&#xff1a; 这一种做法就和正常的字符串哈希基本思想一样&#xff0c;都是h[r]h[l-1]*p[r-l1]; 我们这里是左高右低&#xff0c;故是hash[ l ]hash[ l ]*p[ r.len ]hash[ r …

第9步---MySQL的索引和存储引擎

第9步---MySQL的索引和存储引擎 1.索引 1.1分类 索引可以快速的找出具有特定值的行。不用从头开始进行寻找了。 类别 hash和btree hash 根据字段值生生成一个hash的值 快速的进行定位到对应的行的值 可能会出现相同的值&#xff0c;找到对应的空间会出现对应的值 btree树…

LTMC S/4HANA 2022 – 迁移您的数据

翻译一篇&#xff0c;估计很少人用过这个LTMC功能&#xff0c;更不用说&#xff0c;LTMOM了。一个还没开始用已经被弃用的事务代码&#xff1a; 在这篇博文中&#xff0c;我将解释如何在 S/4HANA 2022 版本中通过“迁移您的数据”应用程序逐步执行数据迁移。如您所知&#xff0…

5.7.webrtc线程的启动与运行

那在上一节课中呢&#xff1f;我向你介绍了web rtc的三大线程&#xff0c;包括了信令线程&#xff0c;工作线程以及网络线程。那同时呢&#xff0c;我们知道了web rtc 3大线程创建的位置以及运行的时机。 对吧&#xff0c;那么今天呢&#xff1f;我们再继续深入了解一下&#…

Redis分布式缓存

分布式缓存 -- 基于Redis集群解决单机Redis存在的问题 单机的Redis存在四大问题&#xff1a; 1.Redis持久化 Redis有两种持久化方案&#xff1a; RDB持久化 AOF持久化 1.1.RDB持久化 RDB全称Redis Database Backup file&#xff08;Redis数据备份文件&#xff09;&#x…

Certify The Web (IIS)

一、简介 Certify The Web 适用于 Windows的SSL 证书管理器用户界面&#xff0c;与所有 ACME v2 CA 兼容&#xff0c;为您的 IIS/Windows 服务器轻松地安装和自动更新来自 Letencrypt.org 和其他 ACME 证书授权机构的免费 SSL/TLS 证书&#xff0c;设置 https 从未如此简单。 …

【实用工具】磁盘被写保护怎么解除

磁盘被写保护怎么解除 我的是磁盘3无法写只能读&#xff0c;具体的执行步骤看下面 C:\Users\wsw>diskpartMicrosoft DiskPart 版本 10.0.19041.964Copyright (C) Microsoft Corporation. 在计算机上: SH-DB751B3DISKPART> list disk磁盘 ### 状态 大小 可…

JSON的处理

1、JSON JSON(JavaScript Object Notation)&#xff1a;是一种轻量级的数据交换格式。 它是基于 ECMAScript 规范的一个子集&#xff0c;采用完全独立于编程语言的文本格式来存储和表示数据。 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写&#…

保研之旅1:西北工业大学电子信息学院夏令营

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; 本人持续分享更多关于电子通信专业内容以及嵌入式和单片机的知识&#xff0c;如果大家喜欢&#xff0c;别忘点个赞加个关注哦&#xff0c;让我们一起共同进步~ &#x…

[PyTorch][chapter 49][创建自己的数据集 1]

前言&#xff1a; 后面几章主要利用DataSet 创建自己的数据集&#xff0c;实现建模&#xff0c; 训练&#xff0c;迁移等功能。 目录: pokemon 数据集深度学习工程步骤 一 pokemon 数据集介绍 1.1 pokemon: 数据集地址&#xff1a; 百度网盘路径: https://pan.baidu.com/s/1…

二、8.系统调用、可变参数和堆内存管理

系统调用&#xff1a;让用户进程申请操作系统的帮助 一个系统功能调用分为两部分&#xff0c; 一部分是暴露给用户进程的接口函数&#xff0c;它属于用户空间&#xff0c;此部分只是用户进程使用系统调用的途径&#xff0c;只负责发需求。另一部分是与之对应的内核具体实现&am…