微信小程序模板使用总结
来源:互联网 发布:乐玩编程助手 编辑:程序博客网 时间:2024/06/06 19:45
最近负责公司的微信小程序项目的开发,项目主要以文章展示为主,由于页面上有较多的重复的组件,所以将部分公用整理成模板以便多次利用,现做一整理。
定义模板
wxml <template name="search-template"> <view class="search-container"> <image src="/images/search.png" mode="scaleToFill" class="search-image"></image> <input type="text" confirm-type="search" class="search-input" placeholder="请输入要搜索的内容" /> </view></template>
上面代码中生成了一个搜索框的模板,搜索框置于页面顶部。
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
使用name属性,作为模板的名字。然后在内定义代码片段,如:
我们的模板代码需要写在标签中,并且用name属性给模板设置名字。
wxss.search-container { display: flex; width: 100%; height: 80rpx; flex-direction: row; flex-wrap: nowrap; justify-content: center; border-bottom: 1rpx solid #ccc; align-items: center; box-shadow: 0rpx 1rpx 2rpx #ccc;}.search-image { width: 52.5rpx; height: 52.5rpx; border: 1rpx solid #ccc; border-right: none; background: #fff;}.search-input { width: 90%; border: 1rpx solid #ccc; border-left: none; background: #ffffff; flex-shrink: 0; padding-left: 10rpx;}
调整搜索板块的样式
至此,模板的定义就完成了。我们可以在项目根目录下新建一个叫template的文件夹保存模板。
模板的引入
模板引入的方式有两种,import和include。
import
import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。
在页面中需要的位置引入定义的search-template:
index.wxml <import src="/templates/search-template/search-template.wxml" /> <template is="search-template"></template>
is属性用来声明需要使用的模板,is的值即是标签的name的值
模板使用参数
模板的参数由data传入,使用方法如下:
“`
index.js
data:{
someData:..,
moreData:..,
}
“`
在引用模板的页面的js中设置data或者使用setData向页面传入someData,然后在页面中的标签中使用data获取数据.数据之间用”逗号”分隔。
index.wxml <view class="container"> <import src="/templates/comment-template/comment-template.wxml" /> <template is="comment-template" data="{{someData,moreData}}"></template> </view>
这样就可以获取到需要的数据了,对数据的具体操作在定义template的时候设置。
template.wxml <view wx:if="{{someData}}"> </view> <view wx:for="{{moreData}}" wx:for-item="foo"> <view>{{foo.subData}}</view> </view>
前端新司机,有不妥之处,欢迎指出。
- 微信小程序模板使用总结
- 微信小程序模板消息总结
- 微信小程序-template模板使用
- [Wondgirl] 微信小程序(三)模板的使用
- 微信小程序的模板使用详解
- 微信小程序 template模板的使用
- 微信小程序模板template的使用
- 微信小程序中template模板使用
- 微信小程序模板中使用循环
- 小程序模板使用
- gcc模板使用总结
- MasterPageFile 模板页使用总结
- Aspose Word模板使用总结
- Aspose Word模板使用总结
- MasterPageFile 模板页使用总结
- blade模板使用总结1
- Aspose Word模板使用总结
- 微信小程序学习:使用picker封装省市区三级联动模板
- MYSQL主从配置
- C++设计模式——单例模式
- 利用CarrierWave上传文件
- poj-2718-Smallest Difference(dfs)
- 经典Spring面试题和答案
- 微信小程序模板使用总结
- 什么是IOU
- 计算机视觉中对训练数据处理以提高分类器性能的技巧
- 堆排序
- Select 语句执行顺序以及如何提高Oracle 基本查询效率
- 专业的HTML操作API Aspose.Html 上架 | 附试用版下载
- linux3.* 内核的__setup函数
- 富文本编辑器ueditor的使用实践
- Anaconda 安装程序网址