微信小程序支持Markdown教程

Posted 2023-04-03 韭菜盖饭

文章目录

• • Towxml 介绍
  • 特色
  • 使用教程
  • • 1、克隆项目到本地
    • 2、引入库到 /app.js
    • 3、在具体页面的配置文件中引入twoxml组件
    • 4、在页面中插入组件
    • 5、在js中解析内容
    • 6、显示效果

Towxml 介绍

Towxml 官网 https://github.com/sbfkcel/towxml

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

特色

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

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

使用教程

1、克隆项目到本地

git clone https://github.com/sbfkcel/towxml.git
复制代码

将红框的文件夹复制到你的根目录，并改名称为towxml

改名称为towxml

2、引入库到 /app.js

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

3、在具体页面的配置文件中引入twoxml组件

  "usingComponents": 
    "towxml":"/towxml/towxml"
  

4、在页面中插入组件

<view class="content-info">
  <towxml nodes="article"/>
</view>

5、在js中解析内容

在js中封装一个数据请求，也可以直接写在App.js中

App(
  // 引入`towxml3.0`解析方法
  towxml:require('/towxml/index'),
    //声明一个数据请求方法
  getText: (url, callback) => 
    wx.request(
      url: url,
      header: 
        'content-type': 'application/x-www-form-urlencoded'
      ,
      success: (res) => 
        if (typeof callback === 'function') 
          callback(res);
        ;
      
    );
  
  )

然后在具体页面的js文件中处理解析内容
方式一：通过数据请求的方式

const app = getApp();
Page(
​
  /**
   * 页面的初始数据
   */
  data: 
   article:
  ,
​
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) 
    app.getText('https://www.vvadd.com/wxml_demo/demo.txt?v=2',res => 
      let obj = app.towxml(res.data,'markdown',
        theme:'light', //主题 dark 黑色，light白色，不填默认是light
        base:"www.xxx.com",
        events:      //为元素绑定的事件方法
          tap:e => 
            console.log('tap',e);
          ,
          change:e => 
            console.log('todo',e);
          
        
      );
      //更新解析数据
      this.setData(
        article:obj,
      );
    );
  ,
)

方式二：不使用数据请求

// pages/content-detail/content-detail.js
const app = getApp();
Page(
​
  /**
   * 页面的初始数据
   */
  data: 
   article:
  ,
​
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) 
    //markdown数据源
      let content= "<h1>h1h1h1h1h1h1</h1><h2>h2h2h2h2</h2><h3>123456</h3>"
    let result = app.towxml(content,'markdown',
       base:'www.xxx.com',             // 相对资源的base路径
       theme:'light',                   // 主题，默认`light`
      events:                    // 为元素绑定的事件方法
           tap:(e)=>
               console.log('h4',e);
           
       
   );
   // 更新解析数据
   this.setData(
      article:result
   );
  ,
)

这里我是请求一个网址https://www.vvadd.com/wxml_demo/demo.txt?v=2
网址内容是一些MarkDown文本

6、显示效果

微信小程序详细图文教程-10分钟完成微信小程序开发部署发布（3元获取腾讯云服务器带小程序支持系统）

很多朋友都认为微信小程序申请、部署、发布很难，需要很长时间。

实际上，微信和腾讯云同是腾讯产品，已经提供了10分钟（根据准备资源情况，已完成小程序申请认证）完成小程序开发、部署、发布的方式。当然，实现的是基础功能。但是，可以给学习者很便捷的体验和很好的启发。

不过，随着微信平台和云服务的发展，真担心，程序猿会失业！

案例下载：

https://pan.baidu.com/s/1BQSb0B38C03XIwRC3LBmvQ

 

目录

 

一.微信小程序申请

二.服务器设置（申请、部署、域名）  

1.申请服务器
2.部署服务器
3.域名申请和配置

三.小程序发布

1.下载DEMO

2.下载开发工具并安装

3.配置参数

4.发布

四.小程序体验

1.微信（版本：6.5.3及以上支持小程序）-发现-小程序

   下载

 

2.DEMO下载

    微信小程序 实例汇总 完整项目源代码下载

 微信小程序教程资料和开发工具大全，文档、代码、例子、工具  下载

 

3.微信小程序体验

五.已发布小程序

在小程序的搜索中输入小程序全名（目前只有很少支持模糊查找，建议全名查找），即可体验。

 

 

完整说明

 

一.微信小程序申请

申请，并认证（未认证不能发布，认证需要300元，目前只支持企业认证）详细见官网说明。

https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN

 

申请后登陆

https://mp.weixin.qq.com/

 

二.服务器设置（申请、部署、域名）  

c#、java、php等多语言解决方案源代码

Wafer - 快速构建具备弹性能力的微信小程序 https://github.com/tencentyun/wafer

重要：

1.第二步，可以在5分钟内实现；

2.成本3元（腾讯云支持微信小程序2017年推广期间，3元腾讯云提供整套服务器和系统）

3.腾讯云默认分配：1.云服务器；2.云数据库；3.域名；4.小程序支持系统；

4.只要微信小程序认证过即可，云服务器不需要认证，域名不需要审核备案（省时间，方便！）

 

3元购买腾讯云小程序服务器

 

https://www.qcloud.com/?utm_source=bdppzq&utm_medium=line&utm_campaign=baidu

 

 

https://console.qcloud.com/la

 

1.申请服务器
2.部署服务器
3.域名申请和配置

 

三.小程序发布

1.下载DEMO

2.下载开发工具并安装

下图，开发者工具

 

下载页面

 

 

 

 

 

 

AppID和秘钥获取

 

3.配置参数

4.发布

 

 

 

 

 

四.小程序体验

微信（版本：6.5.3及以上支持小程序）-发现-小程序

 

DEMO下载

 

微信小程序体验

 

   

五.已发布小程序

 

在小程序的搜索中输入小程序全名（目前只有很少支持模糊查找，建议全名查找），即可体验。

 

 

　　1、【高频使用】

　　美团外卖

　　滴滴公交查询

　　车来了

　　大众点评+

　　京东购物

　　摩拜单车

　　滴滴出行DiDi

　　携程酒店机票火车票

　　2、【旅行】

　　驴妈妈门票预订

　　飞常准查航班

　　海南航空微应用

　　南航e行

　　去哪儿出行

　　朋友家精选民宿

　　熊猫签证

　　去哪儿酒店预订

　　3、【购物】

　　国际品牌价格

　　小小包麻麻好物

　　好药师优选

　　汽车之家Autohome

　　手机查报价

　　有赞精选

　　什么车好

　　微店轻便版

　　Coolbuy玩物志

　　美的官方商城

　　腾讯周边

　　订蛋糕元祖黑天鹅诺心21cake

　　新品有戏应用

　　4、【交通】

　　滴滴公交查询

　　车来了

　　租租车出国去哪玩

　　巴士管家

　　知了交通

　　5、【健康医疗】

　　姨妈日历

　　美柚APP

　　经期月月记

　　好药师优选

　　孕期提醒APP

　　柚宝宝App

　　药顾问

　　丁香医生

　　6、【图片】

　　嗨图

　　MOTIF米田图案壁纸小工具

　　名画滤镜APP

　　今日名画

　　小蚁AI艺术

　　Miatou

　　藏识相册

　　7、【工具】

　　我的计算器

　　朝夕日历Pro

　　印象笔记微清单

　　亲戚关系

　　100房贷助手

　　查地铁

　　Coolbuy玩物志

　　看剧小助手

　　约会来也

　　老板管账

　　掌上探路者生活

　　序列号查查

　　小程序示例

　　解忧室

　　股票灯塔

　　艺术签名助手

　　延迟退休计算器

　　汽车报价库

　　签到打卡

　　实时空气质量

　　自选股

　　高校图书馆查询

　　小小房贷计算器

　　新股申购宝

　　最新汇率查询

　　汇率e

　　二手车e

　　记账e

　　翻译e

　　通勤助手

　　留学公寓助手

　　云梦助眠引导

　　蚂蚁待办

　　蚂蚁微日记

　　窝牛App

　　8、【教育培训】

　　小D词典

　　词汇量查询

　　分答快问

　　钢琴优课

　　天天练口语

　　词汇量测试

　　有钱兔择校

　　宝宝微空间

　　一首一首诗

　　人人词典

　　有可能微课

　　蚯蚓课+

　　桔子创投内参

　　感恩笔记本

　　爱弹唱

　　9、【快递查询】

　　快递100小助手

　　10、【天气查询】

　　智慧气象服务

　　精准天气预报

　　30天天气预报

　　11、【投资理财】

　　自选股

　　富途牛牛股票

　　微众银行

　　南方基金微理财

　　BP助手

　　FellowPlus创投数据库

　　12、【票务】

　　猫眼电影

　　小小票儿

　　电影演出赛事

　　13、【阅读】

　　今日头条lite

　　轻芒杂志

　　Qdaily

　　桔子创投内参

　　QQ阅读

　　壹点调查

　　快看漫画

　　段掌柜

　　西窗诗词

　　网易灰评

　　换阅空间

　　360好书推荐

　　历史上的今时

　　心邮

　　口袋书架

　　14、【视频】

　　腾讯视频

　　开眼视频Eyepetizer

　　15、【美食】

　　下厨房+

　　探城美食APP

　　16、【美妆】

　　化妆品点评

　　17、【体育】

　　酷竞

　　18、【表情包】

　　表情家园

　　斗图表情包神器

　　19、【游戏】

　　王者荣耀赛事

　　炉石相册

　　20、【求职】

　　实习委员

　　21、【音频】

　　青蜻蜓

　　浴音阁

　　荔枝FM播客

　　22、【自媒体】

　　吴晓波频道会员

　　23、【社区】

　　小密圈+

　　We重邮

　　一起Up

　　分答快问

　　第二空间创作中心

　　社交名片