ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

小程序开发的语法

2021-01-28 10:34:21  阅读:124  来源: 互联网

标签:绑定 num1 num2 sjs 程序开发 语法 冒泡 模板


这里写目录标题

模板语法

1.数据绑定

单向绑定{{}}
双向绑定:{= =}
css属性绑定:class = “c-{{}}”
控制属性: s-if = "flag"不需要大括号
基础的运算符:

<!-- operation-demo.swan -->

<!-- 普通变量 -->
<text>{{name}}</text>

<!-- 属性访问 -->
<text>{{person.name}}</text>
<text>{{persons[1]}}</text>

<!-- 一元否定 -->
<text>{{!isOK}}</text>
<text>{{!!isOK}}</text>

<!-- 二元运算 -->
<text>{{num1 + num2}}</text>
<text>{{num1 - num2}}</text>
<text>{{num1 * num2}}</text>
<text>{{num1 / num2}}</text>
<text>{{num1 + num2 * num3}}</text>

<!-- 二元关系 -->
<text>{{num1 > num2}}</text>
<text>{{num1 !== num2}}</text>

<!-- 三元条件 -->
<text>{{num1 > num2 ? num1 : num2}}</text>

<!-- 括号 -->
<text>{{a * (b + c)}}</text>

<!-- 数值 -->
<text>{{num1 + 200}}</text>

<!-- 字符串 + 三元条件 -->
<text>{{item ? ',' + item : ''}}</text>

<!-- 三元运算 -->
<checkbox checked="{{flag ? true : false}}"></checkbox>

<!-- 数组字面量 -->
<text>{{ ['john', 'tony', 'lbj'] }}</text>


循环

s-for
在这里插入图片描述

默认不写情况下,下标索引是为 index,数组当前变量名默认为 item。
在这里插入图片描述
下面这种个人感觉更麻烦
在这里插入图片描述
trackBy
如果列表中的项目会动态地增加、删除,并且希望列表中的项目保持自己的特征和状态(例如 input 中的输入内容),需要在 s-for 指令声明中指定 trackBy。trackBy 后跟的值可以是 s-for 的 array 中 item 本身或者其属性(如 item.id),该值需要是列表中唯一的字符串或数字,且不能动态改变。当数据更新触发重新渲染时,将自动跟踪项的变更,原先列表内的项位置会移动,新添加的项会被渲染,以确保组件保持自身的状态,并且省去一部分重新渲染带来的消耗。
在这里插入图片描述

条件s-if

通过 s-if 指令我们可以实现以下操作:

  • 为元素指定条件:当条件成立时元素可见,当条件不成立时元素不存在;
  • 为 s-if 增加一个额外条件分支块;
  • 为 s-if 增加一个不满足条件的分支块, s-else 指令没有值。

注意:s-if 与 s-for 不可在同一标签下同时使用。
s-if 与 s-else 之间加入多余标签会报错。

模板template

SWAN 提供模板 template 的用法,旨在提高工程化和代码可维护性,可以在模板中定义代码片段,并被外界注入值,然后在合适的时机调用。
定义模板
在这里插入图片描述

注意:模板之间不可嵌套。

使用模板
在这里插入图片描述
在这里插入图片描述

事件处理

事件提供了一种可以将用户的行为从视图层反馈到逻辑层进行处理的通讯方式。触发绑定在组件上的事件的时候,就会执行逻辑层中对应的事件处理函数,同时也可以传递数据,例如 id、dataset 等。
例如点击事件的处理:bindtap
在这里插入图片描述
bind 与 catch 的区别是 bind 事件绑定不会阻止冒泡事件向上冒泡,catch 事件绑定可以阻止冒泡事件向上冒泡;如下例所示
在这里插入图片描述
捕获阶段是位于冒泡阶段之前,在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。
在捕获阶段监听的方式是采用capture-bind、capture-catch关键字,后者将中断捕获阶段和取消冒泡阶段。
在这里插入图片描述
事件对象
在这里插入图片描述

Tips 请不要在组件中绑定 onClick、onAnimationstart、onDrag 等 HTML
原生事件,这会导致小程序的事件绑定不生效。

SJS语法

SJS是小程序一套自定义脚本语言,可以在SWAN中使用其辅助构建页面结构。

SJS代码可以编写在swan文件中的标签内,或以sjs为后缀名的文件内,然后在SWAN模板中进行引用。
编写sjs文件
在这里插入图片描述
导入并使用jsj文件
在这里插入图片描述
在这里插入图片描述

引用 sjs 模块时务必使用.sjs文件后缀。
sjs 只能定义在 .sjs 文件中,然后在 swan 文件中使用<import-sjs>标签引入。
sjs 可以调用其他 sjs 文件中定义的函数。
sjs 的运行环境和其它 JavaScript 代码是相互隔离的, 即 sjs 中不能调用其他 JavaScript 文件中定义的函数与 API。
sjs 函数不能作为组件事件回调。

标签:绑定,num1,num2,sjs,程序开发,语法,冒泡,模板
来源: https://blog.csdn.net/qq_39748940/article/details/113307531

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有