• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序入门(三)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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)
  }
})

随机结果:



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序|App抓包( 五)-Drony配合Burp实现App定向抓包发布时间:2022-07-18
下一篇:
《OD学微信开发》微信小程序入门示例发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap