微信小程序基本用法1(二)

1、模板语法

        WXML（WeiXin Markup Language）是框架设计的⼀套标签语言，结合基础组件、事件系统，可以构 建出页面的结构。

1.1 小案例

        1.1.1 先打开 app.json 文件,新建一个页面

        1.1.2 点击刚才创建的页面,打开 XXX.wxml 文件,编译

图1

图2

1.2 数据绑定

        1.2.1 打开新建页面的 XXX.js文件

1. 在里面会看到 page 方法. 全部选中删除,打出 page 回车,就会自动补全它的方法
2. data 里面是存放所有要显示的数据
3. 我们这里暂时用不到除了 data 之外的声明周期函数,可以先将其删除

        1.2.2 编写 XXX.js 中的 data 数据

Page({
   
		/**
			* 页面的初始数据
		* */
		data: {
   
			msg:"Hello MiNa",
    		num:100,
    		flag:false,
   			person:{
   
      			name:'张三',
      			age:20,
      			sex:'男',
      			hobby:'sing songs'
    		},
    		isChecked:false,
    	}
    })

        1.2.3 在 XXX.wxml 文件中绑定data 数据

<!-- 1.字符串 string -->
	<view>{
   {
   msg}}</view>
	
<!-- 2.数值 number -->
	<view>{
   {
   num}}</view>
	
<!-- 3.布尔 boolean -->
	<view>是个猛男 : {
   {
   flag}}</view>
	
<!-- 4.对象 object -->
		<!-- 直接输入绑定对象名字,只能判断类型 -->
	<view>{
   {
   person}}</view>
		<!-- 想要输出,只能对象.属性 -->
	<view>{
   {
   person.name}}</view>
	<view>{
   {
   person.age}}</view>
	<view>{
   {
   person.sex}}</view>
	<view>{
   {
   person.hobby}}</view>
	
<!-- 5.在标签中使用 -->
		<!-- 
    		在标签中使用时,花括符外面必须添加 单引号 或者 双引号 
    		在终端中可以查看标签中定义的属性  
    	-->
    <view data-num="{
   {num}}">自定义属性</view>
    
<!-- 6.使用布尔值充当属性 -->
  
  	 	<!-- 
    		在绑定数据时,字符串 和 花括符 之间一定不要存在空格,否则会导致识别失败

    		以下写法就是错误写法 : 
    		<checkbox checked="        {
   {isChecked}}"></checkbox>
    	-->
    <view>
    	<checkbox checked="{
   {isChecked}}"></checkbox>
    </view>

        1.2.4 看最终小程序显示效果

1.3 运算

        1.3.1 编写 XXX.wxml 文件

<!-- 
		7.运算 => 表达式
    		一. 可以在花括符中 加入 表达式  --  语句

    		二. 表达式 指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算...
      			1. 数字的加减乘除
      			2. 字符串拼接
      			3. 三元表达式

    		三. 语句 指的是复杂的代码段 不能直接在模板中使用
      			1. if else
     		    2. switch
      			3. do while...
      			4. for
-->
    <view>{
   {
    1 + 1}}</view>
    <view>{
   {
    "1" + "1"}}</view>
    <view>{
   {
    10%2===0 ? '偶数' : '奇数' }