返回顶部
扩大
缩小

Gaidy's

微信小程序入门(三)

11.开发框架基本介绍

四个组成部分,其它三个前面介绍过了,主要WXS:
WXS:对wxml增强的一种脚本语言,可以对请求的数据进行filter或者做计算处理,帮助wxml快速构建出页面结构。

12.WXML之语法

概念

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合组件、WXS和时间系统,可以构建出页面的结构。

语法

<标签名 属性名=“属性名1” 属性名=“属性名2”...>    ...</标签名>

简单例子

<view>  Hello World!  <view>      hello china!  </view></view>

13.WXML特性之数据绑定

WXML四个特性

  • 数据绑定
  • 列表渲染
  • 条件渲染
  • 模板引用

简单实例

第一种
index.wxml

<view>  <text>{{message}}</text></view>

index.js

Page({  data:{    message:"Hello World"  }})

第二种
index.wxml

<view hidden='{{flag ? true : false}}'>    Hidden</view>
Page({  data:{    flag: false  }})

WXML属性

14.WXML特性之列表渲染

实例:

index.wxml

<view>  <block wx:for="{{items}}" wx:for-item="item" wx:key="index">    <view>{{index}}:{{item.name}}</view>  </block></view>

index.js

Page({  data:{    items: [      {name:"商品A"},      { name: "商品B" },      { name: "商品C" },      { name: "商品D" },      { name: "商品E" }    ]  }})

显示结果


说明

  • 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
  • 使用 wx:for-item 可以指定数组当前元素的变量名,
  • 使用 wx:for-index 可以指定数组当前下标的变量名:
  • wx:key 来指定列表中项目的唯一的标识符。

15.WXML特性之条件渲染

实例

index.wxml

<view>今天吃什么?</view><view wx:if="{{condition === 1}}">饺子</view><view wx:if="{{condition === 2}}">馒头</view><view wx:else>米饭</view>

index.js

Page({  data:{    condition:Math.floor(Math.random()*3+1)  }})

随机结果:


 
 
分类: Web
 

posted on   Gaidy  阅读(155)  评论(0编辑  收藏  举报

编辑推荐:
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
阅读排行:
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· .NET Core GC压缩(compact_phase)底层原理浅谈
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp

导航

< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示

目录导航