微信小程序支持Markdown教程

Posted 韭菜盖饭

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序支持Markdown教程相关的知识,希望对你有一定的参考价值。

文章目录

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

  分答快问

  第二空间创作中心

  社交名片

 

 

 

以上是关于微信小程序支持Markdown教程的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序解析HTML和MARKDOWN

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

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

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

微信小程序 教程之条件渲染

小程序echarts