二、uni-app模板块常用写法以及注意事项

Posted 2023-03-19

参考技术A v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
第一个参数 item 则是被迭代的数组元素的别名。
第二个参数，即当前项的索引 index ，是可选的。

结果

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

显示效果

此时把Y的 switch 进行打开，显示效果

随后更改数据源为 datList2 ，显示效果为

此时发现本来是Y打开，顶部新增一个元素后变成是X打开，这就是所谓的就地更新每个元素，每个索引位置进行正确渲染，而 switch 是没有被重新渲染的（因为数据源没有控制 switch 开关状态的保存），所以显示的位置就不对了。

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容， switch 的选中状态），需要使用 :key 来指定列表中项目的唯一的标识符。

重复如上操作，显示为正确

如不提供 :key ，会报一个 warning ， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

#注意# 当同一个页面同时存在两个或两个以上的 v-for 遍历的时候， key 值不能重复否则 H5 报错

移动端开发基础16使用代码块直接创建组件模板

为提升开发效率，HBuilderX将 uni-app 常用代码封装成了以 u 开头的代码块，如在 template 标签内输入 ulist 回车，会自动生成如下代码：

注意需保障uni-list组件在项目的components目录下。比较简单的方式，是新建项目时，选 uni ui项目模板，在里面即可随便敲所有u开头的代码块。如果不是 uni ui项目模板，那么需要去插件市场手动把uni ui组件下载到项目中。

代码块分为Tag代码块、JS代码块，如在 script 标签内输入 uShowToast 回车，会自动生成如下代码：

 

uni-app已支持的Tag代码块：

(1) uButton：按钮

(2) uCheckbox：复选框

(3) uGrid：宫格，需引用uni ui

(4) uList：列表，需引用uni ui

(5) uRadio：单选框

(6) uSwiper：滑块视图

(7) uCard:卡片

(8) uImage:图片

(9) uIcons:图标

(10)uMap:地图

……

几乎各种组件不管是内置组件还是uni ui的组件，均已封装为代码块，在HBuilderX的vue代码template区域中敲u，代码助手会提示所有可见列表。也可在HBuilderX菜单工具-代码块设置-vue代码块的左侧列表查阅所有。

除组件外，其他常用代码块包括：

viewfor：生成一段带有v-for循环结构的视图代码块

vbase：生成一段基本的vue代码结构

uniapp支持的JS代码块

(1)  uRequest：发起网络请求

(2)  uGetLocation：获取当前的地理位置、速度

(3)  uShowToast：显示提示框

(4)  uShowLoading：显示加载提示框

(5)  uHideLoading：隐藏提示框

(6)   uShowModal：显示模态弹窗

(7)   uShowActionSheet：显示菜单列表

(8)   uNavigateTo：打开新页面

(9)   uNavigateBack：页面返回

(10) uRedirectTo：页面重定向

(11) uStartPullDownRefresh：触发下拉刷新

(12) uStopPullDownRefresh：停止当前页面下拉刷新

(13) uLogin：登录

(14) uShare：分享

(15) uPay：支付

......

几乎各种常用js api，均已封装为代码块，在HBuilderX的js代码中敲u，代码助手会提示所有可见列表。也可在HBuilderX菜单工具-代码块设置-js代码块的左侧列表查阅所有。

uniapp支持的vue js代码块

(1) vImport：导入文件

(2) ed：export default

(3) vData：输出 data(){return{}}

(4) vMethod：输出 methods:{}

(5) vComponents：输出 components: {}

uniapp支持的其他常用js代码块

(1) iff：简单if

(2) forr：for循环结构体

(3) fori：for循环结构体并包含i

(4) funn：函数

(5) funa：匿名函数

(6) rt：return true

(7) clog：输出："console.log()"

(8) clogvar：增强的日志输出，可同时把变量的名字打印出来

(9) varcw：输出："var currentWebview = this.$mp.page.$getAppWebview()"

(10) ifios：iOS的平台判断

(11) ifAndroid：Android的平台判断

预置代码块不满足需求的话，可以自定义代码块