template-engine for mpx runtime render
npm install @mpxjs/template-engine小程序运行时渲染基础模板生成引擎。
> Fork from @tarojs/shared for generating template.
``sh`
npm install @mpxjs/template-engineor
yarn add @mpxjs/template-engineor
pnpm add @mpxjs/template-engine
1. 生成模板代码
`js
const { createTemplateEngine } = require('@mpxjs/template-engine')
const templateEngine = createTemplateEngine('wx') // 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'dd' | 'web' | 'tenon'
const templateCode = templateEngine.buildTemplate({
baseComponents: ['view', 'button'] // 需要使用的小程序基础组件
})
`
将会输出
`html`
2. 写入文件
`js`
const fs = require('fs')
fs.writeFile('base.wxml', code)
3. 引入基础模板，使用vnode渲染页面
`html`
`js`
Component({
data: {
r: {
// 描述节点的vnode
nt: 'view', // 节点类型
d: {
class: "view-class" // 节点属性值
},
c: [ // 子节点
{
nt: 'button',
d: {},
c: [
{
nt: '#text',
ct: '运行时渲染'
}
]
}
]
}
}
})
4. 模板引擎将会在渲染出正确的组件
除了基础组件外，模板引擎还支持自定义组件的渲染
`js`
const templateCode = templateEngine.buildTemplate({
normalComponents: [ 'custom-dialog' , 'custom-popup'], // 需要使用的自定义组件
})
如果需要自定义某个模板组件的属性，例如生成的组件需要一个class属性。可以通过传入对象配置。
`js`
const templateCode = templateEngine.buildTemplate({
baseComponents: [
{
view: ['class']
}
] // 需要使用的小程序基础组件
})
如果想自定义class从data的取值。
`js``
const templateCode = templateEngine.buildTemplate({
baseComponents: [
{
view: {
class: 'c'
}
}
] // 需要使用的小程序基础组件
})