mustache.js html模板,js模板引擎Mustache将h5模板页面转化为小程序页面

研究目的

怎么让小程序页面可以通过后台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}}

{{province}},{{city}},{{area}}

{{/address}}';

var html = Mustache.render(tpl, data);

//输出：

zhejiang,hangzhou,xihu

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}}

{{.}}

{{/product}}';

var html = Mustache.render(tpl, data);

//枚举输出

Macbook iPhone iPod iPad

5.{{

var tpl = '

• {{>address}}

'

var partials = {address: "{{#address}}

{{province}}{{city}}{{area}}{{/address}}"}

var html = Mustache.render(tpl, data, partials);

//以>开始表示子模块,可以使用该语法将复杂的结构拆分成几个小的子模块

//输出：

• zhejiang
• hangzhou
• xihu

6.{{{keyName}}}： {{keyName}}输出会将等特殊字符转译，如果想保持内容原样输出可以使用{{{}}}

7.{{!comments}}：注释内容不输出

将h5模板输出到小程序页面

h5模板页面,简单的一个新闻列表页面为例

*{margin: 0;padding: 0;}

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='

• {{>list}}

';

var partials={list:"{{#list}}

{{title}}

{{des}}

{{/list}}"}

var html=Mustache.render(tpl, data,partials);

document.writeln(html)

h5效果图

image.png

将h5模板页面输出到小程序

我们用wxparse将html语言转化为wxml语言，在模板页面使用wxparse，

wxparse参考https://github.com/icindy/wxParse

小程序wxml

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 = '

• {{>list}}

';

var partials = { list: "{{#list}}

{{title}}

{{des}}

{{/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

感觉还是有点一言难尽。感觉只适合一些简单的静态页面或者比如文章新闻详情之类的。理想很丰满，现实很骨干。