2

零、需求

十几个图文编排的介绍文章,每个页面的结构、内容都不相同,
因此没有办法通过WXML代码把文章结构固定下来。

因此笔者想到的解决方案包括:

  1. 全部转成长截图,好处是代码超级简单,坏处是:即使只改一个字,也要重新生成、上传截图
  2. 全部用原生小程序硬编码出来,每个介绍文章写一个组件。虽然后期修改灵活,但过于低效且麻烦。

考虑到对于图文编排来说,markdown的效率远高于HTML,如果有办法把markdown文档渲染成小程序页面,以上的需求就能很好的解决。

查了一下,还真有,仓库地址:Towxml
image.png

一、构建

名字非常简单粗暴:to wxml,就是把markdown或HTML转换成WXML。

作者说这个包不建议从NPM上获取,而应该自己使用源码构建:

// clone仓库
git clone https://github.com/sbfkcel/towxml.git
// 进入文件夹
cd towxml
// 安装依赖
npm install
// 构建
npm run build

构建完成后,把dist文件夹复制到小程序的/miniprogram/路径下(和app.ts、pages等目录同级):

image.png

在小程序的app.ts中添加towxml:require('/towxml/index')

/**
 * app.ts
 * TS小程序的App泛型可能和引入的组件不兼容,可以改成any
 */
App<any>({ 
  globalData: {},
  towxml:require('/towxml/index'),
  onLaunch() {
  },
})

在需要使用的页面json中添加组件引用:

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

页面V层(wxml文件):

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

页面C层(ts文件):

//获取应用实例
const app = getApp();
// data中添加两个变量
Page({
  data: {
    isLoading: true,                // 判断是否尚在加载中
    article: {}                        // 内容数据
  },
})

二、使用

官方文档链接:链接

文档中写到,在onload方法中初始化,就可以渲染markdown文本了,最终作用在上文写的towxml标签上:

  onLoad: function () {
    let result = app.towxml('# Markdown', 'markdown',{
      base:'https://xxx.com',                // 相对资源的base路径
      theme:'light',                    // 主题,默认`light`
      events:{                    // 为元素绑定的事件方法
        tap:(e)=>{
          console.log('tap',e);
        }
      }
    });

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

towxml方法的三个参数:

  1. 文本型,必填。就是实际需要渲染的文本,上述代码的#Markdown渲染出来就是一级标题
  2. 文本型,必填。表示类型,本文只用到markdown所以写'markdown'即可
  3. 对象,必填。表示渲染时的参数,具体可以看文档,比如,主题可以改成亮色或暗色。

image.png

image.png

接下来需要解决一个问题:

上述代码的markdown文本是直接写在代码里的,实际应用肯定需要从后端获取

因此先写一个获取文本的方法:

  // 获取markdown文本
  getText: (url, callback) => {
    wx.request({
      url: url,
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: (res) => {
        if (typeof callback === 'function') {
          callback(res);
        };
      }
    });
  },

然后改写一下原来的onload:

onLoad: function () {
    // 获取文本,第一个参数指向后端的文件地址(你需要起一个后端)
    this.getText('http://127.0.0.1:8080/test.md', res => {
      // 回调函数中完成更新数据的逻辑
      let result = app.towxml(res.data, 'markdown',{
        base:'https://xxx.com',            
        theme:'light',                    
        events:{                    
          tap:(e)=>{
            console.log('tap',e);
          }
        }
      });
      // 更新解析数据
      this.setData({
        article:result,
        isLoading: false
      });
    })
  }

此时就可以渲染来自HTTP的markdown文件了:
image.png

image.png

最后通过参数修改请求地址就可以灵活控制页面中的文本了。

三、总结

如果用传统方式,真的把十几篇二十几篇文章做成页面,没个一两天写不完。用markdown渲染的方式一个小时应该就能结束战斗,效率起飞。

作为程序员,能动脑子的事情,绝对不用重复劳动,能用自动化解决的问题,绝对不动手。

感谢开源项目。


LYX6666
1.6k 声望73 粉丝

一个正在茁壮成长的零基础小白