研究目的
怎么让小程序页面可以通过后台h5模板进行管理
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);
//以>开始表示子模块,可以使用该语法将复杂的结构拆分成几个小的子模块
//输出：
<ul><li>zhejiang</li><li>hangzhou</li><li>xihu</li></ul>
6.{{{keyName}}}： {{keyName}}输出会将等特殊字符转译，如果想保持内容原样输出可以使用{{{}}}
7.{{!comments}}：注释内容不输出
将h5模板输出到小程序页面
h5模板页面,简单的一个新闻列表页面为例
<!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:'这里是描述内容1'},
{img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1679456154,2493198454&fm=26&gp=0.jpg',title:'新闻列表二',des:'这里是描述内容2'},
{img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1679456154,2493198454&fm=26&gp=0.jpg',title:'新闻列表三',des:'这里是描述内容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语言转化为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({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var data = {
list: [
{ img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1679456154,2493198454&fm=26&gp=0.jpg', title: '新闻列表一', des: '这里是描述内容1' },
{ img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1679456154,2493198454&fm=26&gp=0.jpg', title: '新闻列表二', des: '这里是描述内容2' },
{ img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1679456154,2493198454&fm=26&gp=0.jpg', title: '新闻列表三', des: '这里是描述内容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
存在问题：
比较恶心的一点就是h5模板页面所有样式要写在style里面，尝试了下用class,wxss渲染失败，因为在wxParse.wxml里存在如下问题，导致样式混乱
image.png
感觉还是有点一言难尽。感觉只适合一些简单的静态页面或者比如文章新闻详情之类的。理想很丰满，现实很骨干。
