研究目的
怎么讓小程序頁面可以通過后臺h5模板進(jìn)行管理
Mustache 簡單語法示例
1.{{keyName}}
var data = {
"name": "zhang",
}
var tpl = '{{name}}';
var html = Mustache.render(tpl, data);
//輸出：
zhang
2.{{#keyName}} {{/keyName}}
var data = {
"address": {
"province": "zhejiang",
"city": "hangzhou",
"area": "xihu",
},
}
var tpl = '{{#address}} <p>{{province}},{{city}},{{area}}</p> {{/address}}';
var html = Mustache.render(tpl, data);
//輸出：
<p>zhejiang,hangzhou,xihu</p>
3.{{^keyName}} {{/keyName}}
var tpl = {{^nothing}}沒找到 nothing 鍵名就會渲染這段{{/nothing}};
var html = Mustache.render(tpl, data);
//輸出：
沒找到 nothing 鍵名就會渲染這段
4.{{.}}
var data={
"product": ["Macbook ","iPhone ","iPod ","iPad "]
}
var tpl = '{{#product}} <p>{{.}}</p> {{/product}}';
var html = Mustache.render(tpl, data);
//枚舉輸出
<p>Macbook iPhone iPod iPad</p>
5.{{<partials}}
var tpl = '<ul>{{>address}}</ul>'
var partials = {address: "{{#address}}<li>{{province}}</li><li>{{city}}</li><li>{{area}}</li>{{/address}}"}
var html = Mustache.render(tpl, data, partials);
//以>開始表示子模塊,可以使用該語法將復(fù)雜的結(jié)構(gòu)拆分成幾個(gè)小的子模塊
//輸出：
<ul><li>zhejiang</li><li>hangzhou</li><li>xihu</li></ul>
6.{{{keyName}}}： {{keyName}}輸出會將等特殊字符轉(zhuǎn)譯憾赁，如果想保持內(nèi)容原樣輸出可以使用{{{}}}
7.{{!comments}}：注釋內(nèi)容不輸出
將h5模板輸出到小程序頁面
h5模板頁面,簡單的一個(gè)新聞列表頁面為例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
</style>
<script src="js/mustache.js"></script>
</head>
<body>
<script>
var data={list:[
{img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1679456154,2493198454&fm=26&gp=0.jpg',title:'新聞列表一',des:'這里是描述內(nèi)容1'},
{img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1679456154,2493198454&fm=26&gp=0.jpg',title:'新聞列表二',des:'這里是描述內(nèi)容2'},
{img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1679456154,2493198454&fm=26&gp=0.jpg',title:'新聞列表三',des:'這里是描述內(nèi)容3'},
]}
var tpl='<ul class="ul" style="list-style:none;padding:10px;">{{>list}}</ul>';
var partials={list:"{{#list}}<li style='height:65px;border-bottom:1px dashed #CCCCCC;overflow:hidden;padding-top:10px;'><img style='float:left;margin-right:8px;width:90px;height: 60px;' src='{{img}}' /><a style='color:#000000;text-decoration:none;'>{{title}}</a><p style='color:#999999;'>{{des}}</p></li>{{/list}}"}
var html=Mustache.render(tpl, data,partials);
document.writeln(html)
</script>
</body>
</html>
h5效果圖
image.png
將h5模板頁面輸出到小程序
我們用wxparse將html語言轉(zhuǎn)化為wxml語言奏黑，在模板頁面使用wxparse，
wxparse參考https://github.com/icindy/wxParse
小程序wxml
<!--pages/mustache/mustache.wxml-->
<import src="../../libs/wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:template.nodes}}"/>
js
// pages/mustache/mustache.js
var Mustache = require('../../libs/mustache/mustache');
var WxParse = require('../../libs/wxParse/wxParse.js');
Page({
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
var data = {
list: [
{ img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1679456154,2493198454&fm=26&gp=0.jpg', title: '新聞列表一', des: '這里是描述內(nèi)容1' },
{ img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1679456154,2493198454&fm=26&gp=0.jpg', title: '新聞列表二', des: '這里是描述內(nèi)容2' },
{ img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1679456154,2493198454&fm=26&gp=0.jpg', title: '新聞列表三', des: '這里是描述內(nèi)容3' },
]
}
var tpl = '<ul class="ul" style="list-style:none;padding:10px;">{{>list}}</ul>';
var partials = { list: "{{#list}}<li style='height:65px;border-bottom:1px dashed #CCCCCC;overflow:hidden;padding-top:10px;'><img style='float:left;margin-right:8px;width:90px;height:60px;' src='{{{img}}}' /><a style='color:#000000;text-decoration:none;'>{{title}}</a><p style='color:#999999;'>{{des}}</p></li>{{/list}}" }
var html = Mustache.render(tpl, data, partials);
WxParse.wxParse('template', 'html', html, this, 5);
},
})
效果圖鹿寨，對wxparse.wxml稍作了一些樣式問題上的修改，效果圖基本一致
image.png
存在問題：
比較惡心的一點(diǎn)就是h5模板頁面所有樣式要寫在style里面瓢湃，嘗試了下用class,wxss渲染失敗村怪，因?yàn)樵趙xParse.wxml里存在如下問題，導(dǎo)致樣式混亂
image.png
感覺還是有點(diǎn)一言難盡盛末。感覺只適合一些簡單的靜態(tài)頁面或者比如文章新聞詳情之類的。理想很豐滿否淤，現(xiàn)實(shí)很骨干悄但。
