基本构成:

  

数据绑定:

例:

<!--index.hxml-->
<view>
<text data-name="{{theName}}"></text>
</view>
--------------------------------------------------------------------
// index.js 文件
Page({
data:{
theName:"Jack"
}
})

结果:

<page>
<view>
<text data-naem="Jack"></text>
</view>
<page>

例:

<!--index.hxml-->
<view hidden="{{flag ? true : false}}">
HI
</view>
--------------------------------------------------------------------
// index.js 文件
Page({
data:{
flag : false
}
})

属性:

  id  String  组件的唯一标识  保持整个页面唯一

  class  String  组件的样式表  在对应的 wxss 中定义的样式类

  style  String  组件的内联样式  可以动态设置的内联样式

  hidden  Boolean  组件是否显示  所有组件默认显示

  data-*  Any   自定义属性  组件上触发的事件时,会发送给事件处理函数

  bind* / catch*  EventHandler  组件的事件  

列表渲染: 

<!--index.hxml-->
<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"}
]
}
})

条件渲染: 

<!--index.wxml-->
<view>今天吃什么?</view>
<view wx:if="{{condition == 1}}">米粉</view>
<view wx:elif="{{condition == 2}}">粉</view>
<view wx:else>饭</view> // index.js
Page({
data:{
condition:Math.floor(Math.random()*3+1)
}
})

模版引用:

<!--index.wxml-->
<template name="tempItem">
<view>
<view>姓名:{{name}}</view>
<view>电话:{{phone}}</view>
<view>地址:{{address}}</view>
</view>
</template>
<template is="tempItem" data="{{...item}}"></tempItem> // index.js
Page({
data:{
item:{
name:"小贤",
phone:"13838385438",
address:"中国旮旯省旮旯市旮旯区旮旯镇旮旯村旮旯街191号"
}
}
})

<!--index.wxml-->
<import str="a.wxml"></import>
<template is="a"></template> <!--a.wxml-->
<view>Hello</view>
<template name="a">Hello</template>

(已经避免模版引用死循环。)

区别:

<!--index.wxml-->
<include str="a.wxml"></import>
<template is="a"></template> <!--a.wxml-->
<template name="a">
<view>This is a.wxml</view>
</template>
<view>Hello</view> <!-- 结果: Hello -->

微信小程序(三)开发框架的更多相关文章

  1. 微信小程序(三)--小程序UI开发

    一.UI介绍 所谓的UI(user Interface)开发指的就是小程序应用界面的开发,在小程序开发框架中会为我们提供一系列的基础组件,例如HTML开发中为我们所提供的一些最基础的标签.需要注意的是 ...

  2. 微信小程序云开发框架

    概述 一直做后端服务器开发,最近看了一篇文章介绍小程序的云开发模式,觉得挺有意思,就尝试了一下,由本文做个记录. 因为不是专业的小程序开发人员,也没有做过网页开发,所以论述中出现错误难以避免,请多谅解 ...

  3. 微信小程序的开发框架

    wxss:是一套样式语言,用来描述wxml的组件样式:小程序在css基础上做的修改和扩充的版本 css:是一套样式语言,样式表,用来描述xml和html文件样式的呈现: 设备像素:是图片在设备上显示的 ...

  4. 微信小程序(三)-事件绑定

    小程序事件绑定 https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html 1.数据 / ...

  5. 微信小程序一:微信小程序UI组件、开发框架、实用库

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/8079095.html 内容持续更新,维护中 邮箱 ...

  6. 微信小程序UI组件、开发框架、实用库...

    UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...

  7. 史诗手册!微信小程序新手自学入门宝典!

    一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...

  8. 微信小程序个人心得

    尊重原创:http://blog.csdn.net/qq_28832135/article/details/52796048 昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得. 首先从官方文 ...

  9. 微信小程序心得

    首先从官方文档给的框架说起,微信小程序官方文档给出了app.js, app.json, app.wxss. 先从这三个文件说起. - app.js 这个文件是整个小程序的入口文件,开发者的逻辑代码在这 ...

  10. 微信小程序资源整理

    微信小程序相关的文档.教程.开源项目等资源的整理,以便于开发学习使用. —— —— 收录仅作个人学习使用,涉及侵权行为及时联系: maple_6392@163.com 项目地址:GitHub | 码云 ...

随机推荐

  1. 《手把手教你》系列技巧篇(二十八)-java+ selenium自动化测试-处理模态对话框弹窗(详解教程)

    1.简介 在前边的文章中窗口句柄切换宏哥介绍了switchTo方法,这篇继续介绍switchTo中关于处理alert弹窗的问题.很多时候,我们进入一个网站,就会弹窗一个alert框,有些我们直接关闭, ...

  2. 解决 Asp.Net5 在视频文件下载预览时无法快进的问题

    前情提要 https://www.cnblogs.com/puzhiwei/p/15265005.html 在解决.Net5 如何修改Content-Disposition实现在线预览的功能后,我又遇 ...

  3. 你需要知道的MySQL&InnoDB锁都在这里

    目录 一.前言 二.锁的类型 2.1 全局锁 2.2 表级锁 2.2.1 表锁 2.2.2 元数据锁(Meta Data Locks) 2.2.3 自增列锁(AUTO-INC Locks) 2.2.4 ...

  4. Java-爬虫-小项目

    爬取数据:(获取请求返回的页面信息,筛选出我们想要的数据就可以了!) 项目地址:https://gitee.com/zwtgit/java-reptile 导入依赖,写一个工具类 <depend ...

  5. 数据库MySQL主从-GTID

    1.第一步在主服务器上/etc/my.cnf/下添加 log-bin=log-bin server-id=1 gtid_mode=ON enforce_gtid_consistency 2.第二步:重 ...

  6. React Native之新架构中的Turbo Module实现原理分析

    有段时间没更新博客了,之前计划由浅到深.从应用到原理,更新一些RN的相关博客.之前陆续的更新了6篇RN应用的相关博客(传送门),后边因时间问题没有继续更新.主要是平时空余时间都用来帮着带娃了,不过还是 ...

  7. 试题 算法训练 区间k大数查询 java题解

    资源限制 时间限制:1.0s   内存限制:256.0MB 问题描述 给定一个序列,每次询问序列中第l个数到第r个数中第K大的数是哪个. 输入格式 第一行包含一个数n,表示序列长度. 第二行包含n个正 ...

  8. python中return的返回和执行

    1 打印函数名和打印函数的执行过程的区别 例子1.1 def a(): print(111) print(a) # 打印a函数的内存地址,不会对a函数有影响,a函数不会执行 print(a()) # ...

  9. 【UE4】GAMES101 图形学作业5:光线与物体相交(球、三角面)

    总览 在这部分的课程中,我们将专注于使用光线追踪来渲染图像.在光线追踪中最重要的操作之一就是找到光线与物体的交点.一旦找到光线与物体的交点,就可以执行着色并返回像素颜色. 在这次作业中,我们要实现两个 ...

  10. MySQL复习(一)MySQL架构

    MySQL架构 MySQL采用的是C/S架构,我们在使用MySQL的时候,都是以客户端的身份,发送请求连接到运行服务端的MySQL守护进程,而MySQL服务器端则根据我们的请求进行处理并把处理后的结果 ...