美文网首页小程序猿的专题
微信小程序支持markdown语法

微信小程序支持markdown语法

作者: ___大鱼___ | 来源:发表于2019-01-08 14:47 被阅读39次

1.下载
https://github.com/StanleyLe/Utils 里面的 towxml.zip文件解压缩
2.TOWXML文件夹放到小程序根目录
3.在小程序app.js中引入库

//app.js
const Towxml = require('/towxml/main');     //引入towxml库
App({
    onLaunch: function () {
    },
    towxml:new Towxml()                     //创建towxml对象,供小程序页面使用
})

4.在小程序页面文件中引入模版

<!--pages/index.wxml-->

<!--引入towxml模版入口文件,并使用模版-->
<import src="/towxml/entry.wxml"/>
<template is="entry" data="{{...article}}"/>   // 三个小数点一定要带上

5.在小程序对应的js中请求数据

// 获取帮助手册列表
    get_guide_list: function () {
        let self_ = this
        wx.request({
            url: globalUrl + '/wxapp/client_helper_list',
            success(res) {
                console.log(res.data)
                // 获取到的数据 必须是字符串格式res.data.data[0].Content
                let data = app.towxml.toJson(res.data.data[0].Content, 'markdown')
                //设置文档显示主题,背景颜色,默认'light'
                data.theme = 'dark';  
                console.log(data, 6666666666)

                self_.setData({
                    helper_obj_list: res.data.data,
                    article: data
                })
            },
            fail: function (res) {

            }

        })
    },

6.引入对应的WXSS

/**pages/index.wxss**/

/**基础风格样式**/
@import '/towxml/style/main.wxss';


/**如果页面有动态主题切换,则需要将使用到的样式全部引入**/

/**主题配色(浅色样式)**/
@import '/towxml/style/theme/light.wxss';

/**主题配色(深色样式)**/
@import '/towxml/style/theme/dark.wxss';
  1. 完成!!!!

相关文章

网友评论

    本文标题:微信小程序支持markdown语法

    本文链接:https://www.haomeiwen.com/subject/hvovrqtx.html