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

  • 开发 .swan 文件
    • 基础数据绑定
    • 循环
    • 条件
    • 事件
      • 事件处理
      • 事件对象
      • dataset
      • touches

    开发 .swan 文件

    这部分是每个智能小程序页面的展现模板，类似于 Web 开发中的 HTML，SWAN 模板中使用的标签均为 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 中打开

    • SWAN
     
 
 
      
  
  
  
    1. hello world
      2. 
  
  
  
    2. hello world
      3.

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

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    基础数据绑定

    代码示例

    • SWAN
    • JS
     
 
 
      
  
  
  
      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指令，来渲染一个列表。

    代码示例

    • SWAN
    • JS
     
 
 
      
  
  
  
      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指令，来在视图层进行逻辑判断：

    代码示例

    • SWAN
    • JS
     
 
 
      
  
  
  
    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: + 事件名来进行事件绑定

    代码示例

    • SWAN
    • JS
     
 
 
      
  
  
  
      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 会给触发的方法传递事件对象，事件对象因事件不同而不同，目前基础的事件对象结构为：

    • JSON
     
 
 
      
  
  
  
    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 所在事件对象中，传递给绑定函数。

    代码示例

    • SWAN
    • JS
     
 
 
      
  
  
  
    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.

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

    代码示例

    • SWAN
    • JS
     
 
 
      
  
  
  
    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 是两个不同的变量。

    代码示例

    • SWAN
    • JS
     
 
 
      
  
  
  
    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

    代码示例

    • SWAN
    • JS
     
 
 
      
  
  
  
    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文件
    本文网址：http://www.36103.cn/qtweb/news21/11371.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    电子商务知识

    分类信息网

    草坪音箱　　 　成都名片印刷厂　　 　关键词优化排名　　 　网站制作　　 　支点广告　　 　成都标志设计　　 　轻质隔墙板　　 　西信中心　　 　简阳网站建设　　 　绵阳机房托管　　 　微信公众号开发　　 　做网站　　 　租用服务器　　 　绵阳科技城电信IDC机房　　 　主机租用　　 　成都虚拟主机　　 　主机租用　　 　江油网站建设　　 　路面机械及配件　　 　雕琢时光