尧图网站建设 
跨平台前端移动开发小程序构建工具【免费下载链接】chameleon 一套代码运行多端一端所见即多端所见项目地址https://gitcode.com/gh_mirrors/chamele/chameleon点击查看免费下载导读在 ChameleonCML多端框架中每个页面src/pages/xxx/xxx.cml的template都必须以内置组件page作为唯一根节点。本文以 page.md 为骨架完整讲解page组件的title属性与c-bind:back返回事件并结合 chameleon-linter、chameleon-template-parse 与官方项目模板源码说明该组件在 CML 模板解析、代码校验与多端编译中的真实行为。读完本文你将掌握page的正确写法、标题设置方式、返回事件监听方法以及内置组件属性校验的底层原理。一、page 组件是什么page是 Chameleon 的内置组件built-in component用作CML 页面文件的模板根节点。它不是一个普通的功能组件而是承载页面级语义页面标题、页面返回行为的容器标签。这一点在官方模板与测试中随处可见例如项目模板生成的首页 project/src/pages/index/index.cmltemplate page titlechameleon scroller height{{-1}} view classscroller-wrap demo-com title{{title}} image-src{{chameleonSrc}}/demo-com /view /scroller /page /template模板解析器的测试用例 test/index.js 同样以page titleChameleon包裹整个页面结构进行编译验证说明page是编译链路中约定成俗的页面容器。内置组件的定位Chameleon 把page与view、text、scroller、list、image、video、input、button等一起归类为内置组件。在代码校验阶段chameleon-linter 通过白名单明确认可这些标签见 config/white-list/cml-white-list.jspage位于 tags 列表第 17 项在 Vue 语法.vue模板下同样放行见 config/white-list/vue-white-list.js。此外样式校验配置 config/parser-config.js 在 stylelint 的selector-type-no-unknown规则中显式ignoreTypes: [page]即page作为选择器类型不会被误报为未知标签。二、page 组件属性与事件总览依据 page.mdpage组件对外暴露的属性与事件如下属性名类型说明titleString页面标题c-bind:backEventHandle事件未定义返回参数其中title是页面唯一的普通属性用于指定页面标题c-bind:back是页面唯一的事件监听点用于监听页面返回行为且不向回调传递返回参数事件未定义返回参数。三、title 属性设置页面标题title接收字符串通常直接写死或通过数据绑定传入。官方模板中的两处真实用法TodoMVC 演示项目首页 todo-demo/src/pages/index/index.cmltemplate page titleTodoMVC测试用例test/index.js中同样出现page titleChameleon。与各端导航栏配置的配合从源码结构看title属于页面级语义属性在编译为小程序各端时会与script cml-typejson中的导航栏配置共同决定页面标题表现。以 project/src/pages/index/index.cml 的 json 段为例wx: { navigationBarTitleText: index, backgroundTextStyle: dark, backgroundColor: #E2E2E2 }, alipay: { defaultTitle: index, pullRefresh: false, allowsBounceVertical: YES, titleBarColor: #ffffff }可以推断page上的title属性是面向 CML 统一语法的页面标题入口而各平台导航栏的细节背景色、文字样式等仍由各端 json 配置兜底两者互不冲突。这种“统一属性 平台差异化配置”的设计正是 Chameleon“一套代码运行多端”理念在页面层的最小体现。四、c-bind:back 事件监听页面返回c-bind:是 CML 的事件绑定前缀c-bind:back即在page根节点上监听“页面返回”这一系统行为。事件用法在页面模板中这样监听返回事件template page title首页 c-bind:backonBack view.../view /page /template script class Index { methods { onBack() { // 页面返回时执行自定义逻辑 console.log(page back triggered); } } } export default new Index(); /script事件返回参数说明根据 page.mdc-bind:back的说明为“事件未定义返回参数”。这意味着该事件触发时不会向开发者回调传递eventDetail对象方法签名无需接收任何参数。这一点与其他内置组件的“有参事件”形成对比例如 scroller.md 中c-bind:customscroll会返回{deltaX, deltaY, scrollHeight, scrollLeft, scrollTop, scrollWidth}而page的返回事件不携带任何数据开发者只关心“返回发生了”这一事实本身。使用注意从 CML 事件体系看c-bind:back的语义是“在返回行为发生时执行自定义逻辑”。若页面需要拦截或取消返回仍需依赖各端导航能力如路由配置或系统返回拦截 APIc-bind:back本身仅作为事件监听入口。建议在监听回调中处理需要同步的页面状态如提示保存、埋点统计等轻量逻辑避免在其中执行过于耗时或阻塞返回的操作。五、源码解读chameleon-linter 如何校验 page 的属性与事件page的title/c-bind:back不只是文档描述它们由 chameleon-linter 在代码校验阶段强制执行。理解这一机制能帮助开发者写出“一次通过 lint”的页面模板。1. 内置组件信息来自 chameleon-ui-builtinlinters/template.js 将内置组件属性表注入 lint 选项// built-in components configurations. options[component-allow-attr] builtinComponents.getCml(); if (params.lang cml) { options[component-event-regex] CML_METHODNAME_REGEX; options[component-prop-regex] false; }其中CML_METHODNAME_REGEX /(?:c-bind:|c-catch:)(\w)/linters/template.js负责识别c-bind:back这类事件写法。组件信息本身由 config/built-in-components/index.js 从node_modules/chameleon-ui-builtin/components目录动态解析而来let inDir config.getCurrentWorkspace() /node_modules/chameleon-ui-builtin/components; if (fs.existsSync(inDir)) { Parser.flatEntrance(inDir).forEach(filterFile { let content parser.resetPath(filterFile).getJsonResultsWithComponentName(); content (result[content.name] content.content); }); }也就是说page的props含title与events含back最终来源于内置组件库的组件定义文件本文对应的 buildin/page.md 即是对该定义的可读化文档。2. 属性检查规则 component-attr-check真正执行“属性是否合法”检查的是 cml-htmllinter 的 component-attr-check.js 规则。其核心逻辑为取出组件定义中的props名称列表与events名称列表对标签上的每个属性若匹配事件正则c-bind:xxx则提取事件名并与events比对不在列表内即报E064非法事件普通属性则做驼峰/短横线归一化后与props比对不在列表内即报E063非法属性。因此如果开发者在page上写了c-bind:click或background-color之类未定义的属性/事件lint 会直接报错只有文档列出的title与c-bind:back是被放行的合法成员。这也解释了本文属性表“少而精”的原因page刻意收敛了对外 API把页面内容的组织交给内部view/text等组件。3. 标签白名单兜底即便跳过组件属性表cml-white-list.js 的 tags 列表也仅放行template、view、text、scroller、list、page等内置标签非白名单标签只有在usingComponents中显式注册后才能使用。page无需注册即可直接使用这正是它“页面根节点”特殊地位的体现。六、实战一个使用 title 与 c-bind:back 的完整页面综合上述内容给出一个可直接落地的页面模板参考官方模板 project/src/pages/index/index.cml 的结构编写template page title{{pageTitle}} c-bind:backhandleBack scroller height{{-1}} view classcontent text classtitle{{pageTitle}}/text view classlist c-for{{items}} c-for-itemitem c-keyid text{{item.name}}/text /view /view /scroller /page /template script class Index { data { pageTitle: 我的页面, items: [{id: 1, name: 条目一}, {id: 2, name: 条目二}] } methods { handleBack() { // c-bind:back 无返回参数只关注返回时机 console.log(leave page); } } } export default new Index(); /script style scoped .content { display: flex; flex-direction: column; } .title { font-size: 32cpx; } /style script cml-typejson { base: { usingComponents: {} }, wx: { navigationBarTitleText: 我的页面 } } /script要点回顾页面模板只能有一个根节点根节点必须是pagetitle支持数据绑定也可写死字符串多端编译时与 json 中的导航栏配置协同c-bind:back回调不接收事件参数与scroller的c-bind:customscroll等有参事件区分开页面内容滚动容器、列表、文本应作为page的子节点嵌套书写。七、延伸阅读组件属性/事件定义文档buildin/page.md其他内置组件文档对比学习c-bind:customscroll等有参事件buildin/scroller.md、buildin/list.md内置组件白名单与校验config/white-list/cml-white-list.js、linters/template.js组件属性检查规则实现component-attr-check.js页面模板真实用例project/src/pages/index/index.cml、todo-demo/src/pages/index/index.cmlCML 文件与页面创建说明packages/chameleon-tool/README.mdcml init page生成页面赞分享跨平台前端移动开发小程序构建工具【免费下载链接】chameleon 一套代码运行多端一端所见即多端所见项目地址https://gitcode.com/gh_mirrors/chamele/chameleon点击查看免费下载相关推荐gh stack add完全指南为Stack新增层级的8种实用姿势gh stack add完全指南为Stack新增层级的8种实用姿势 gh stack add 是 gh stackGitHub Stacked PRs 命令跨平台前端移动开发小程序构建工具PaddleOCR 中的 PSENet 文本检测算法原理、配置解析与训练推理实战PaddleOCR 中的 PSENet 文本检测算法原理、配置解析与训练推理实战 导读 本文围绕 PaddleOCR 仓库中 PSENetProgressi跨平台前端移动开发小程序构建工具c-foot 组件详解Chameleon 内置底部布局组件与 footStyle 样式属性全解析c foot 组件详解Chameleon 内置底部布局组件与 footStyle 样式属性全解析 c foot 是 Chameleon 内置布局组件库 cha跨平台前端移动开发小程序构建工具上一篇FigmaCN把 Figma 网页版界面变中文4383 条人工校验词条下一篇ok-ww鸣潮自动化辅助从安装到刷声骸的完整新手教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Chameleon 内置组件 page：页面根节点的 title 属性与 c-bind:back 返回事件实战解析
跨平台前端移动开发小程序构建工具【免费下载链接】chameleon 一套代码运行多端一端所见即多端所见项目地址https://gitcode.com/gh_mirrors/chamele/chameleon点击查看免费下载导读在 ChameleonCML多端框架中每个页面src/pages/xxx/xxx.cml的template都必须以内置组件page作为唯一根节点。本文以 page.md 为骨架完整讲解page组件的title属性与c-bind:back返回事件并结合 chameleon-linter、chameleon-template-parse 与官方项目模板源码说明该组件在 CML 模板解析、代码校验与多端编译中的真实行为。读完本文你将掌握page的正确写法、标题设置方式、返回事件监听方法以及内置组件属性校验的底层原理。一、page 组件是什么page是 Chameleon 的内置组件built-in component用作CML 页面文件的模板根节点。它不是一个普通的功能组件而是承载页面级语义页面标题、页面返回行为的容器标签。这一点在官方模板与测试中随处可见例如项目模板生成的首页 project/src/pages/index/index.cmltemplate page titlechameleon scroller height{{-1}} view classscroller-wrap demo-com title{{title}} image-src{{chameleonSrc}}/demo-com /view /scroller /page /template模板解析器的测试用例 test/index.js 同样以page titleChameleon包裹整个页面结构进行编译验证说明page是编译链路中约定成俗的页面容器。内置组件的定位Chameleon 把page与view、text、scroller、list、image、video、input、button等一起归类为内置组件。在代码校验阶段chameleon-linter 通过白名单明确认可这些标签见 config/white-list/cml-white-list.jspage位于 tags 列表第 17 项在 Vue 语法.vue模板下同样放行见 config/white-list/vue-white-list.js。此外样式校验配置 config/parser-config.js 在 stylelint 的selector-type-no-unknown规则中显式ignoreTypes: [page]即page作为选择器类型不会被误报为未知标签。二、page 组件属性与事件总览依据 page.mdpage组件对外暴露的属性与事件如下属性名类型说明titleString页面标题c-bind:backEventHandle事件未定义返回参数其中title是页面唯一的普通属性用于指定页面标题c-bind:back是页面唯一的事件监听点用于监听页面返回行为且不向回调传递返回参数事件未定义返回参数。三、title 属性设置页面标题title接收字符串通常直接写死或通过数据绑定传入。官方模板中的两处真实用法TodoMVC 演示项目首页 todo-demo/src/pages/index/index.cmltemplate page titleTodoMVC测试用例test/index.js中同样出现page titleChameleon。与各端导航栏配置的配合从源码结构看title属于页面级语义属性在编译为小程序各端时会与script cml-typejson中的导航栏配置共同决定页面标题表现。以 project/src/pages/index/index.cml 的 json 段为例wx: { navigationBarTitleText: index, backgroundTextStyle: dark, backgroundColor: #E2E2E2 }, alipay: { defaultTitle: index, pullRefresh: false, allowsBounceVertical: YES, titleBarColor: #ffffff }可以推断page上的title属性是面向 CML 统一语法的页面标题入口而各平台导航栏的细节背景色、文字样式等仍由各端 json 配置兜底两者互不冲突。这种“统一属性 平台差异化配置”的设计正是 Chameleon“一套代码运行多端”理念在页面层的最小体现。四、c-bind:back 事件监听页面返回c-bind:是 CML 的事件绑定前缀c-bind:back即在page根节点上监听“页面返回”这一系统行为。事件用法在页面模板中这样监听返回事件template page title首页 c-bind:backonBack view.../view /page /template script class Index { methods { onBack() { // 页面返回时执行自定义逻辑 console.log(page back triggered); } } } export default new Index(); /script事件返回参数说明根据 page.mdc-bind:back的说明为“事件未定义返回参数”。这意味着该事件触发时不会向开发者回调传递eventDetail对象方法签名无需接收任何参数。这一点与其他内置组件的“有参事件”形成对比例如 scroller.md 中c-bind:customscroll会返回{deltaX, deltaY, scrollHeight, scrollLeft, scrollTop, scrollWidth}而page的返回事件不携带任何数据开发者只关心“返回发生了”这一事实本身。使用注意从 CML 事件体系看c-bind:back的语义是“在返回行为发生时执行自定义逻辑”。若页面需要拦截或取消返回仍需依赖各端导航能力如路由配置或系统返回拦截 APIc-bind:back本身仅作为事件监听入口。建议在监听回调中处理需要同步的页面状态如提示保存、埋点统计等轻量逻辑避免在其中执行过于耗时或阻塞返回的操作。五、源码解读chameleon-linter 如何校验 page 的属性与事件page的title/c-bind:back不只是文档描述它们由 chameleon-linter 在代码校验阶段强制执行。理解这一机制能帮助开发者写出“一次通过 lint”的页面模板。1. 内置组件信息来自 chameleon-ui-builtinlinters/template.js 将内置组件属性表注入 lint 选项// built-in components configurations. options[component-allow-attr] builtinComponents.getCml(); if (params.lang cml) { options[component-event-regex] CML_METHODNAME_REGEX; options[component-prop-regex] false; }其中CML_METHODNAME_REGEX /(?:c-bind:|c-catch:)(\w)/linters/template.js负责识别c-bind:back这类事件写法。组件信息本身由 config/built-in-components/index.js 从node_modules/chameleon-ui-builtin/components目录动态解析而来let inDir config.getCurrentWorkspace() /node_modules/chameleon-ui-builtin/components; if (fs.existsSync(inDir)) { Parser.flatEntrance(inDir).forEach(filterFile { let content parser.resetPath(filterFile).getJsonResultsWithComponentName(); content (result[content.name] content.content); }); }也就是说page的props含title与events含back最终来源于内置组件库的组件定义文件本文对应的 buildin/page.md 即是对该定义的可读化文档。2. 属性检查规则 component-attr-check真正执行“属性是否合法”检查的是 cml-htmllinter 的 component-attr-check.js 规则。其核心逻辑为取出组件定义中的props名称列表与events名称列表对标签上的每个属性若匹配事件正则c-bind:xxx则提取事件名并与events比对不在列表内即报E064非法事件普通属性则做驼峰/短横线归一化后与props比对不在列表内即报E063非法属性。因此如果开发者在page上写了c-bind:click或background-color之类未定义的属性/事件lint 会直接报错只有文档列出的title与c-bind:back是被放行的合法成员。这也解释了本文属性表“少而精”的原因page刻意收敛了对外 API把页面内容的组织交给内部view/text等组件。3. 标签白名单兜底即便跳过组件属性表cml-white-list.js 的 tags 列表也仅放行template、view、text、scroller、list、page等内置标签非白名单标签只有在usingComponents中显式注册后才能使用。page无需注册即可直接使用这正是它“页面根节点”特殊地位的体现。六、实战一个使用 title 与 c-bind:back 的完整页面综合上述内容给出一个可直接落地的页面模板参考官方模板 project/src/pages/index/index.cml 的结构编写template page title{{pageTitle}} c-bind:backhandleBack scroller height{{-1}} view classcontent text classtitle{{pageTitle}}/text view classlist c-for{{items}} c-for-itemitem c-keyid text{{item.name}}/text /view /view /scroller /page /template script class Index { data { pageTitle: 我的页面, items: [{id: 1, name: 条目一}, {id: 2, name: 条目二}] } methods { handleBack() { // c-bind:back 无返回参数只关注返回时机 console.log(leave page); } } } export default new Index(); /script style scoped .content { display: flex; flex-direction: column; } .title { font-size: 32cpx; } /style script cml-typejson { base: { usingComponents: {} }, wx: { navigationBarTitleText: 我的页面 } } /script要点回顾页面模板只能有一个根节点根节点必须是pagetitle支持数据绑定也可写死字符串多端编译时与 json 中的导航栏配置协同c-bind:back回调不接收事件参数与scroller的c-bind:customscroll等有参事件区分开页面内容滚动容器、列表、文本应作为page的子节点嵌套书写。七、延伸阅读组件属性/事件定义文档buildin/page.md其他内置组件文档对比学习c-bind:customscroll等有参事件buildin/scroller.md、buildin/list.md内置组件白名单与校验config/white-list/cml-white-list.js、linters/template.js组件属性检查规则实现component-attr-check.js页面模板真实用例project/src/pages/index/index.cml、todo-demo/src/pages/index/index.cmlCML 文件与页面创建说明packages/chameleon-tool/README.mdcml init page生成页面赞分享跨平台前端移动开发小程序构建工具【免费下载链接】chameleon 一套代码运行多端一端所见即多端所见项目地址https://gitcode.com/gh_mirrors/chamele/chameleon点击查看免费下载相关推荐gh stack add完全指南为Stack新增层级的8种实用姿势gh stack add完全指南为Stack新增层级的8种实用姿势 gh stack add 是 gh stackGitHub Stacked PRs 命令跨平台前端移动开发小程序构建工具PaddleOCR 中的 PSENet 文本检测算法原理、配置解析与训练推理实战PaddleOCR 中的 PSENet 文本检测算法原理、配置解析与训练推理实战 导读 本文围绕 PaddleOCR 仓库中 PSENetProgressi跨平台前端移动开发小程序构建工具c-foot 组件详解Chameleon 内置底部布局组件与 footStyle 样式属性全解析c foot 组件详解Chameleon 内置底部布局组件与 footStyle 样式属性全解析 c foot 是 Chameleon 内置布局组件库 cha跨平台前端移动开发小程序构建工具上一篇FigmaCN把 Figma 网页版界面变中文4383 条人工校验词条下一篇ok-ww鸣潮自动化辅助从安装到刷声骸的完整新手教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考