《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件(5)

简介: 《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件(5)

《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件(4): https://developer.aliyun.com/article/1228014?groupCode=tech_library  


5.引用


在 wxml 文件中,开发者除直接编写组件本身的代码外,还 可以引用其他页面文件。这样,我们就可以将一些常用的 WXML 代码放在一个公共的文件中,当某个页面需要的时候,直接导入 即可。小程序提供了两种导入 wxml 文件的方式。


首先,我们使用第一种方法。如果被引用的文件中定义了模板 代码,则需要使用导入(import)方式进行引用。我们在 item.wxml 中定义了一个叫 item 的 template,导入方法如代码清单 2-46 所示。


代码清单 2-46


<!-- item.wxml --><templatename="item"><text>{{text}}</text></template>


然后,我们在 index.wxml 中引用 item.wxml,并将模板需要使用的数据传入,即可使用定 义的 item 模板,如代码清单 2-47 所示。


代码清单 2-47


<importsrc="item.wxml"/><templateis="item"data="{{text: 'forbar'}}"/>


注意,导入涉及作用域的概念,即只会导入目标文件中定义的 template,而不会导入目标 文件又使用导入方式引用的文件模板。


接下来,我们使用第二种方式,即通过 include 方式引用。该方式可用于将目标文件 除模板定义之外的其他代码全部导入,相当于复制到 include 的位置。我们分别定义了 3 个 wxml 文件—index.wxml、header.wxml 和 footer.wxml,它们分别如代码清单 2-48、 代码清单 2-49、代码清单 2-50 所示。


代码清单 2-48


<!-- index.wxml --><includesrc="header.wxml"/><view> body </view><includesrc="footer.wxml"/>


代码清单 2-49


<!-- header.wxml --><view> header </view>


代码清单 2-50


<!-- footer.wxml --><view> footer </view>


上述 3 段代码的运行结果如下所示。


<view> header </view><view> body </view><view> footer </view>


最后,介绍 WXML 中常用的几个组件。


view 组件为微信小程序的视图容器,代码清单 2-51 即为 wxml 文件中的代码。


代码清单 2-51


<viewclass="container"><viewclass="title"><text>作者介绍(石璞东)</text></view><viewclass="content"><view>1. hahaWebsite 网站站长;</view><view>2. hahaCoder 微信公众号号主;</view><view>3. hahaAI 微信小程序开发者;</view><view>4. hahaOCR 插件开发者;</view></view></view>

代码清单 2-52 即为 wxss 文件中的代码。


代码清单 2-52


/**app.wxss**/.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx0;
box-sizing: border-box;
}
.title{
font-size: 50rpx;
font-weight: bold;
}
.content{
margin-top: 20rpx;
}
.contentview{
margin-top: 10rpx;
}


代码清单 2-51 和代码清单 2-52 的运行结果如图 2-44 所示。


image.png



mage 组件属于微信小程序的媒体组件。image 组件可用于在微信小程序页面中嵌入一张 图片,支持 JPG、PNG、SVG、WEBP、GIF 等格式,从基础库 2.3.0 起开始支持云文件 ID。 该组件的常用属性如表 2-10 所示。


image.png



示例代码如代码清单 2-53 所示。


代码清单 2-53


<viewclass="container"><viewclass="title"><text>作者介绍(石璞东)</text></view><viewclass="content"><view>1. hahaWebsite 网站站长;</view><view>2. hahaCoder 微信公众号号主;</view><view>3. hahaAI 微信小程序开发者;</view><view>4. hahaOCR 插件开发者;</view></view><viewclass="img"><imagesrc="../../image/author.jpg"></image></view></view>


运行结果如图 2-45 所示。


image.png



《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件(6): https://developer.aliyun.com/article/1227991?groupCode=tech_library


相关文章
|
30天前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
28天前
|
移动开发 前端开发 JavaScript
前端高效开发JavaScript库!
前端高效开发JavaScript库!
|
1天前
|
JavaScript 前端开发 Java
【Vue实战项目】学完前端基础后,可能你还需要掌握这些才能接手开发项目
【Vue实战项目】学完前端基础后,可能你还需要掌握这些才能接手开发项目
12 0
|
2天前
|
前端开发 JavaScript 安全
微前端架构采用 TypeScript 提升开发效率和代码可靠性
【6月更文挑战第12天】微前端架构采用 TypeScript 提升开发效率和代码可靠性。TypeScript 的类型安全防止了微前端间的类型错误,智能提示与自动补全加速开发,重构支持简化代码更新。通过定义公共接口和使用 TypeScript 编写微前端,确保通信一致性与代码质量。在构建流程中集成 TypeScript,保证构建正确性。总之,TypeScript 在微前端架构中扮演关键角色,推荐用于大型前端项目。
21 4
|
14天前
|
资源调度 JavaScript 前端开发
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
|
20天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的大学生智能消费记账系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的大学生智能消费记账系统的详细设计和实现
|
20天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的智能学习平台系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的智能学习平台系统的详细设计和实现
|
20天前
|
前端开发 网络架构
1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter(进行组件切换)
1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter(进行组件切换)
|
21天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的智能无人仓库管理的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的智能无人仓库管理的详细设计和实现
|
21天前
|
小程序 JavaScript Java
基于微信小程序的智能招聘小程序设计的设计与实现(源码+lw+部署文档+讲解等)
基于微信小程序的智能招聘小程序设计的设计与实现(源码+lw+部署文档+讲解等)