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() //創(chuàng)建towxml對象,供小程序頁面使用
})
4.在小程序頁面文件中引入模版
<!--pages/index.wxml-->
<!--引入towxml模版入口文件,并使用模版-->
<import src="/towxml/entry.wxml"/>
<template is="entry" data="{{...article}}"/> // 三個小數(shù)點一定要帶上
5.在小程序對應的js中請求數(shù)據
// 獲取幫助手冊列表
get_guide_list: function () {
let self_ = this
wx.request({
url: globalUrl + '/wxapp/client_helper_list',
success(res) {
console.log(res.data)
// 獲取到的數(shù)據 必須是字符串格式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';
/**如果頁面有動態(tài)主題切換,則需要將使用到的樣式全部引入**/
/**主題配色(淺色樣式)**/
@import '/towxml/style/theme/light.wxss';
/**主題配色(深色樣式)**/
@import '/towxml/style/theme/dark.wxss';
- 完成?。。。?/li>