当前位置: 首页 > article >正文

微信小程序定义模板

微信小程序提供模板(template)功能,把一些可以共用的,复用的代码在模板中定义为代码片段,然后在不同的地方调用,可以实现一次编写,多次引用的效果。

首先我们看一下官网是如何操作的

一般的情况下,我们都是在Page/Template下进行操作。在不破坏原来的代码的情况下,进行测试

 我们现在就是在test定义一个模板,然后在header页面中去使用它

操作模板的第一步就是定义模板

这里我们需要使用name关键字,然后在<template/>内定义代码片段

第二步使用模板

使用is关键字,声明要使用的模板。

这里要注意的一点就是要使用import关键字,先引入模板,然后采用去使用它

小程序除了import关键字引入外,还有include引用

include就是将除了<template/>之外的所有代码引入

 在这里我们可以很清除的看到,import只能template内部的代码。而无法引入template外的代码

 而include却可以

这个模板的作用还是很大的,我们可以在项目中使用一下

 看一下这个小程序,如果我们想要去复用其中的一些结构到我们的headless页面,我们就可以使用template了

 定义一个template文件,这里我们发现需要传值。其实就是使用template中的data属性就可以使用了

<template is="msgItem" data="{{...item}}"/>

 

在这里我们是通过头条的data中的array给模板内部传值。但是我们发现很丑,没有样式

 那么我们就可以使用@import来引入模板中的样式。这样就使用了模板的复用了 

项目地址

Chicksqace/Wx-Menu: 微信小程序开发的菜谱小程序,用到的技术栈主要是template模板的使用 (github.com)


http://www.kler.cn/news/16683.html

相关文章:

  • 基于松鼠算法的极限学习机(ELM)回归预测-附代码
  • MySQL调优笔记——慢SQL优化记录(1)
  • 【热门框架】Maven分模块开发是什么意思?怎样操作?
  • 【Python百日进阶-Web开发-Feffery】Day613- 趣味Dash_13:PDF转换中心的项目优化
  • 马云任东京大学特聘客座教授,研究方向为可持续农业和粮食生产
  • 【Java笔试强训 22】
  • 后端要一次性返回我10万条数据
  • Linux内核面试知识总结
  • 网络计算模式复习(二)
  • 机器学习:基于朴素贝叶斯(Naive Bayes)的分类预测
  • 认识JSP
  • Vue3 : 实现Vue的跨端渲染
  • 爬虫(requsets)笔记
  • Contest3047 - 计科2101~2104算法设计与分析上机作业04
  • JavaScript 笔记
  • 如何安装Auto-GPT
  • Java+springboot开发的医院HIS信息管理系统实现,系统部署于云端,支持多租户SaaS模式
  • RK3588 lt16911uxc hdmi in
  • 【郭东白架构课 模块二:创造价值】22|节点三:什么样的风险才算是重大风险?
  • 《花雕学AI》解锁ChatGPT潜力!183个最佳提示语,助您充分利用人工智能技术
  • 数据埋点1
  • 设计模式:创建型设计模式、结构型设计模式
  • 香港服务器租用攻略:如何优化用户体验?
  • 基于海鸥算法的极限学习机(ELM)回归预测-附代码
  • Jenkins + Gitlab 实现项目自动化构建及部署
  • 你真的会跟 ChatGPT 聊天吗?(上)
  • 业务维度digest日志的记录与监控方案
  • 零入门kubernetes网络实战-30->基于bridge+veth pair+DNAT技术来实现外网可以访问内网的方案
  • Nginx—在linux的ubuntu系统上的安装使用
  • 协同过滤算法深入解析:构建智能推荐系统的核心技术