模板
- 作用:早期版本,用模板作为公共部分的复用;
复用: - 组件;
- 模板-了解
基本语法:
- 1.创建模板:在wxml下面创建 template,必须有个name属性;(公共模板,让其他页面用);
-
.使用:其他页面wxml文件 进行
import
标签导入(src); -
.注入数据:
意义 简单的模板的展示,没有业务逻辑,大家可以用模板;
总结:
- 新建post 文件夹 下 创建 post-item.wxss 和 post-item-wxml
- template 模板相关内容必须包裹 template 标签内 使用 name 属性指定 template 模板名 这个模板名将在引用时使用
- template 模板 is 是指定要使用那个模板
- template 模板 data属性 可以向template 传入数据 wx:for="" =>传递 data ="{{item}}"
<template name="postItemId">
<view class="my-templat"> 我是模板</view>
</template>
// 模板的引用 例如 index.wxml
<import src="post/post-item.wxml">
<template is="" data="{{}}">
</template>
注意:post/post-item.wxml 扩展名 可以加 也可以不加 官方是加了
模板问题
* 模板好处在于 在任何地方都可以调用 但是存在一个问题 template 对外部变量名是有依赖的 如果在内面中 调用模板 并且在多个 页面中有使用 并且传入的item 参数名item相同就会 发生冲突
* 要解决这个问题 就必须消除template 对于外部变量的依赖 可以使用扩展运算符 ...展开对象变量 来消除问题
<template is="postItemId" data="{{...item}}"></template>
//{...item}} 可以将item 展开 展开之后传入到 template 里 就可以保证template不在依赖item这个变量名
include与import引用模板的区别
- import 需要先引入template 然后再使用template 然后再使用template 但是include 不需要预先引入 直接在需要的地方引入模板即可
- include 模式非常简单 就是简单的代码替换 不存在作用域 也不像import一样使用data传递变量
- import 有作用域的概念 即只会import目标文件中定义的template
<block wx:for="{{}}" >
<include src="post/post-item.wxml" data="{{...item}}" />
</block>
-
include 原理 他仅仅是一个占位符 当小程序运行时 会用include的src属性所指向的文件替换include自身
注意: 上面结果并没有显示 因为 include引入的文件是不能向模板内传递 参数的 模板内不能有 template标签包裹如何使用选用
如果模板仅仅是静态wxl 不涉及数据的传递 可以使用include 但如果模板涉及数据的绑定 还是建议使用import
css 的模块化
- 创建一个 .wxss 文件
- 引入 @import
缓存
- 小程序bending缓存容量不允许超过 10M
- 小程序缓存API提供了两种 异步和同步
- 同步方法 wx.setStorageSync 是在异步方法名 wx.setStorage后加了一个后缀 Sync
- 传递一个Object 参数 包含 key data success fail complete 这3个通用的方法
- 同步方法和异步方法的选择 如果选择异步会大大增加代码的调试风险 和调试难度 如果没有必要(通常是处于性能和体验的考虑)建议优先考虑同步方法
- 同步的错误的捕获 需要用 try …cacth
注意:
真机上没有类似于开发工具这样的强制清理缓存的按钮 调试自己写一个清除缓存的按钮