×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：开发.swan文件

开发 .swan 文件

这部分是每个智能小程序页面的展现模板，类似于 Web 开发中的 HTML，SWAN 模板中使用的标签均为 SWAN 组件规定的标签。

创新互联专注于古浪网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供古浪营销型网站建设，古浪网站制作、古浪网页设计、古浪网站官网定制、小程序定制开发服务，打造古浪网络公司原创品牌,更为您提供古浪网站排名全网营销落地服务。

代码示例

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.  {{item.title}}
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.  {{tag.content}}
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12.  
    13. 
  
  
  
    14. 
  
  
  
    15. 
  
  
  
  15.  点击加载更多
    16. 
  
  
  
    17.

标签可以拥有属性，需要注意的是，swan 中的属性是大小写敏感的，也就是说 class 和 Class 在 swan 中是不同的属性。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
    
  
  
  
  1. hello world
    2. 
  
  
  
  2. hello world
    3.

一个文件夹可以有两个 swan 文件。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

基础数据绑定

代码示例

 
 
 
    
  
  
  
    2. 
  
  
  
    3. 
  
  
  
  3.  Hello My {{ name }}
    4. 
  
  
  
    5. 
 
 
 
 
 
 
    
  
  
  
  1. // xxx.js
    2. 
  
  
  
  2. Page({
    3. 
  
  
  
  3.  data: {
    4. 
  
  
  
  4.  name: 'SWAN'
    5. 
  
  
  
  5.  }
    6. 
  
  
  
  6. });
    7.

循环

开发者可以通过在元素上添加s-for指令，来渲染一个列表。

代码示例

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  {{p.name}}
    4. 
  
  
  
  4.  
    5. 
  
  
  
    6. 
 
 
 
 
 
 
    
  
  
  
  1. Page({
    2. 
  
  
  
  2.  data: {
    3. 
  
  
  
  3.  persons: [
    4. 
  
  
  
  4.  {name: 'superman'},
    5. 
  
  
  
  5.  {name: 'spiderman'}
    6. 
  
  
  
  6.  ]
    7. 
  
  
  
  7.  }
    8. 
  
  
  
  8. });
    9.

条件

开发者可以通过在元素上添加s-if指令，来在视图层进行逻辑判断：

代码示例

 
 
 
    
  
  
  
  1. 4G
    2. 
  
  
  
  2. Wifi
    3. 
  
  
  
  3. Other
    4. 
 
 
 
 
 
 
    
  
  
  
  1. Page({
    2. 
  
  
  
  2.  data: {
    3. 
  
  
  
  3.  is4G: true,
    4. 
  
  
  
  4.  isWifi: false
    5. 
  
  
  
  5.  }
    6. 
  
  
  
  6. });
    7.

事件

详情请参考事件处理。

事件处理

开发者可以使用bind: + 事件名来进行事件绑定

代码示例

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  点击加载更多
    3. 
  
  
  
    4. 
 
 
 
 
 
 
    
  
  
  
  1. Page({
    2. 
  
  
  
  2.  loadMore: function () {
    3. 
  
  
  
  3.  console.log('加载更多被点击');
    4. 
  
  
  
  4.  }
    5. 
  
  
  
  5. });
    6.

目前支持的事件类型有：

类型 触发条件
touchstart手指触摸开始
touchmove手指触摸后进行移动
touchend手指触摸结束
touchcancel手指触摸动作被打断，如来电提醒等
tap手指触摸后马上离开动作

事件对象

当开发者绑定方法到事件，事件触发时，SWAN 会给触发的方法传递事件对象，事件对象因事件不同而不同，目前基础的事件对象结构为：

 
 
 
    
  
  
  
  1. {
    2. 
  
  
  
  2.  "changedTouches": [{
    3. 
  
  
  
  3.  "clientX": 194,
    4. 
  
  
  
  4.  "clientY": 401,
    5. 
  
  
  
  5.  "force": 0,
    6. 
  
  
  
  6.  "identifier": 0,
    7. 
  
  
  
  7.  "pageX": 194,
    8. 
  
  
  
  8.  "pageY": 401,
    9. 
  
  
  
  9.  "x": null,
    10. 
  
  
  
  10.  "y": null
    11. 
  
  
  
  11.  }],
    12. 
  
  
  
  12.  // 事件触发的属性集合
    13. 
  
  
  
  13.  "currentTarget": {
    14. 
  
  
  
  14.  "dataset": {},
    15. 
  
  
  
  15.  "id": "_9be18",
    16. 
  
  
  
  16.  "offsetLeft": 31,
    17. 
  
  
  
  17.  "offsetTop": 377
    18. 
  
  
  
  18.  },
    19. 
  
  
  
  19.  "detail": {
    20. 
  
  
  
  20.  "x": 194,
    21. 
  
  
  
  21.  "y": 401
    22. 
  
  
  
  22.  },
    23. 
  
  
  
  23.  "target": {
    24. 
  
  
  
  24.  "dataset": {},
    25. 
  
  
  
  25.  "id": "_9be18",
    26. 
  
  
  
  26.  "offsetLeft": 31,
    27. 
  
  
  
  27.  "offsetTop": 377
    28. 
  
  
  
  28.  },
    29. 
  
  
  
  29.  "timeStamp": 10303373,
    30. 
  
  
  
  30.  "touches": [],
    31. 
  
  
  
  31.  // 事件类型
    32. 
  
  
  
  32.  "type": "tap"
    33. 
  
  
  
  33. }
    34.

dataset

开发者可以在组件中自定义数据，并在事件发生时，由 SWAN 所在事件对象中，传递给绑定函数。

代码示例

 
 
 
    
  
  
  
  1. dataset-test
    2. 
 
 
 
 
 
 
    
  
  
  
  1. Page({
    2. 
  
  
  
  2.  viewtap: function (event) {
    3. 
  
  
  
  3.  // 输出1
    4. 
  
  
  
  4.  console.log('value is:', event.currentTarget.dataset.swan);
    5. 
  
  
  
  5.  }
    6. 
  
  
  
  6. });
    7.

属性值也可以动态的去改变，有所不同的是，属性值必须被包裹在双引号中, 且引号可加可不加

代码示例

 
 
 
    
  
  
  
  1. dataset-test
    2. 
  
  
  
  2. // 同dataset-test
    3. 
 
 
 
 
 
 
    
  
  
  
  1. Page({
    2. 
  
  
  
  2.  data: {
    3. 
  
  
  
  3.  test: 1
    4. 
  
  
  
  4.  },
    5. 
  
  
  
  5.  viewtap: function (event) {
    6. 
  
  
  
  6.  // 输出1
    7. 
  
  
  
  7.  console.log('value is:', event.currentTarget.dataset.swan);
    8. 
  
  
  
  8.  }
    9. 
  
  
  
  9. });
    10.

需要注意的是变量名是大小写敏感的，也就是说 test 和 Test 是两个不同的变量。

代码示例

 
 
 
    
  
  
  
  1. dataset-test
    2. 
 
 
 
 
 
 
    
  
  
  
  1. Page({
    2. 
  
  
  
  2.  data: {
    3. 
  
  
  
  3.  test: 1,
    4. 
  
  
  
  4.  Test: 2
    5. 
  
  
  
  5.  },
    6. 
  
  
  
  6.  viewtap: function (event) {
    7. 
  
  
  
  7.  // 输出1
    8. 
  
  
  
  8.  console.log('value is:', event.currentTarget.dataset.swan);
    9. 
  
  
  
  9.  }
    10. 
  
  
  
  10. });
    11.

touches

开发者在接收到触摸类事件后，在事件对象上，可以接收到当前停留在屏幕上的触摸点。

Touch 对象

属性 类型 描述
pageX , pageYNumber距离文档左上角的距离，横向为 X，纵向为 Y
clientX , clientYNumber距离屏幕视口左上角距离，横向为 X，纵向为 Y

代码示例

 
 
 
    
  
  
  
  1.  viewtouchstart
    2. 
 
 
 
 
 
 
    
  
  
  
  1. Page({
    2. 
  
  
  
  2.  viewtouchstart: function (event) {
    3. 
  
  
  
  3.  console.log('value is:', event.touches);
    4. 
  
  
  
  4.  // 输出 clientX: 44，clientX: 47，pageX: 44, pageY: 47
    5. 
  
  
  
  5.  }
    6. 
  
  
  
  6. });
    7.

分享名称：创新互联百度小程序教程：开发.swan文件
网站URL：http://cdbrznjsb.com/article/dhsccjp.html

其他资讯

让你的专属顾问为你服务