一位微信小程序萌新的学渣笔记(二）基础语法之模板语法

---

模板语法

数据绑定

//page Object
Page({
	data:{
		msg:"hello mina",
		num:10000,
		isGirl:false,
		person:{
			age:74,
			height:145,
			weight:200,
			name:"富婆"
      		},
        isChecked:false
		}
	});

 <!-- 
 1. text 相当于以前web中的span标签 行内元素 不会换行
 2. view 相当于以前web中的 div标签 块级元素 会换行
 3. js文件中输入page 选择第二个可以获取最初始化的js文件代码格式
 4. 在vscode中安装小程序开发插件 写代码是 属性也会自动输入好 
 5. checkbox 以前的复选框标签
 ->
<!-- 1 字符串 -->
<view>{{msg}}</view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 bool类型 -->
<view>是否是伪娘：{{isGirl}}</view>
<!-- 4 object类型  -->
<!-- 这样打印出来只是person的类型 -->
<view>{{person}}</view>  
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>

<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}">自定义属性</view>

<!-- 6 使用bool类型充当属性  checked属性 
      1 字符串和{}之间一定不要存在空格 否则是导致识别失败的
        以下的写法就是错误的示范
          <checkbox checked="      {{isChecked}}"></checkbox>
-->
<view>
  <checkbox checked="{{isChecked}}"></checkbox>
</view>

运算表达式

<!-- 
  7 运算 => 表达式
    1 可以在花括号中加入表达式 -- "语句"
    2 表达式
      指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算..
      1 数字的加减
      2 字符串拼接
      3 三元表达式
    3 语句
      1 复杂的代码段
        1 if else
        2 switch
        3 do while///
        4 for///
 -->
<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<view>{{ 11 % 2 === 0 ? '偶数' : '奇数' }}</view>

列表渲染

列表循环

Page({
  data: {
      list:[
        {
          id:0,
          name:"猪八戒"
        },
        {
          id:1,
          name:"天蓬元帅"
        },
        {
          id:2,
          name:"悟能"
        }
      ]
  },

<!-- 
  8 列表循环
    1 wx:for="{{数组或对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引"
    2 wx:key="唯一的值" 用来提高列表渲染的性能
      1 wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的 唯一属性
        例如 id的值是0 1 2 3
      2 wx:key="*this" 就表示 你的数组 是一个普通的数组  *this 表示是 循环项
        [1,2,3,44,5]
        ["1","222","adfh"]
    3 当出现 数组的嵌套循环的时候 尤其要注意 一下绑定的名称 不要重名
      wx:for-item="item" wx:for-index="index"
    4 默认情况下 我们 不写
      wx:for-item="item" wx:for-index="index"
      小程序也会把 循环项的名称 和索引的名称 item 和 index
      只有一层循环的话 (wx:for-item="item" wx:for-index="index") 可以省略
 -->
 <view>
   <view 
   wx:for="{{list}}" 
   wx:key="id"
   >
     索引：{{index}}
     --
     值:{{item.name}}
   </view>
 </view>

对象循环

<!-- 
  9 对象循环
   1 wx ：for="{{数组或对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"
   2 循环对象的时候 最好把item和index的名称都修改一下
    wx:for-item="value" wx:for-index="key"
 -->
 <view>
   <view>对象循环</view>
   <view 
   wx:for="{{person}}" 
   wx:for-item="value" 
   wx:for-index="key"
   wx:key="age"
   >
    属性：{{key}}
    --
    值：{{value}}
   </view>
 </view>

block标签的使用

<!-- 
   10 block 
    1 占位符的标签
    2 写代码的时候 可以看到这标签存在
    3 页面渲染的时候 小程序会把它移除掉
  -->

  <view>
   <block 
   wx:for="{{list}}" 
   wx:key="id"
   class="my_list"
   >
     索引：{{index}}
     --
     值:{{item.name}}
  </block>
 </view>

变成👇

条件渲染

 <!-- 
    11 条件渲染
     1 wx:if="{{true/false}}"
        1 if ,else, if else 
          wx:if
          wx:elif
          wx:else
    2 hidden
      1 在标签上直接加入属性hidden
      2 hidden="{{true}}"
    
    3 什么场景下用哪个
      1 当标签不是频繁的切换显示 优先使用 wx:if
        直接把标签从 页面结构移除掉 查看调试器的时候看不到
      2 当标签频繁的切换显示的时候 优先使用hidden
        通过添加样式的方式来切换显示
        hidden 属性不要和样式display一起使用
  -->
<view>
  <view>条件渲染</view>
  <view wx:if="{{true}}">显示</view>
  <view wx:if="{{flase}}">隐藏</view>

  <view wx:if="{{flase}}">1</view>
  <view wx:elif="{{flase}}">2</view>
  <view wx:else>3</view>

  <view>-----------------</view>
  <view hidden="{{true}}"> hidden1</view>
  <view hidden="{{false}}"> hidden2</view>

  <view>-------0000-----------</view>
  <view wx:if="{{false}}">xw:if</view>
  <view hidden style="display:flex;">hidden</view>
</view>

小程序事件绑定

// pages/demo01/demo01.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      num:0
  },
  // 输入框的input事件的执行逻辑
  handleInput(e){
    //console.log(e.detail.value)
    this.setData({
      num: e.detail.value
    })
  },
  //加减按钮的事件
  handletap(e)
  {
    //console.log(e);
    // 1 获取自定义属性 operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({
        num: this.data.num + operation
      })
  }
})

<!--pages/demo01/demo01.wxml-->
<!-- 
  1 需要给input标签绑定 input事件
    绑定关键字 bindinput
  2 如何获取 输入框的值
    通过事件源对象来获取
    e.detail.value值来获取
  3 把输入框的值 赋值到 data 当中
    1 不能直接 this.data.num= e.detail.value
    2 也不能 this.num= e.detail.value
    正确的写法
    this.setDate({
      num:e.detail.value
    })
  4 需要加入一个点击事件
    1 bindtap
    2 无法在小程序当中的 事件中 直接传参 handletap(-1) x
    3 通过自定义属性的方式来传递参数
    4 事件源中获取我们的事件源属性
 -->
 <input type="text" bindinput="handleInput"/>
 <button bindtap="handletap" data-operation="{{1}}">+</button>
 <button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>
  {{num}}
</view>

样式wxss

样式-rpx

/* 
 1 小程序中 不需要主动来引入样式文件
 2 需要把页面中某些元素的的单位 由 px 改成 rpx //否则不会进行自定义
  1 设计稿 750px
    750 px = 750 rpx
    1px = 1 rpx
  2 把屏幕宽度 改成 375px
    375 px = 750 rpx
    1 px = 2 rpx
    1 rpx = 0.5 px
  3 存在一个设计稿 宽度是414 或者 未知 page
   1 设计稿 page 存在一个元素 宽度 100px
   2 拿以上的需求 去实现 不同宽度的页面适配

   page px = 750 rpx
   1 px = 750 rpx / page
   100 px = 750 rpx * 100 / page 
   假设 page = 375 px
  4 利用 一个属性 calc属性 css 和 wxss 都支持 一个属性
   1 750 和 rpx 中间不要留空格
   2 运算符的两边也不要留空格
*/
view{
  width:200rpx;
  height: 200rpx;
  background-color: aqua;
  font-size: 40rpx;
  /* 以下代码的写法是错误 */
  /* width: 750 rpx * 100 / 375 ;*/
  width: calc(750 rpx * 100 / 375);
}

<view>
  rpx
</view>

样式-导入

/* miniprogram\style */
view{
  color: aqua;
  font-size: 100px;
}

/* 
miniprogram\pages\demo03\demo03.wxss
1 引入的 代码 是通过 @import 来引入
2 路径 只能写相对路径

*/
@import "../../style/common.wxss"

样式-选择器和使用less

选择器

样例 样例描述

• .intro 支持拥有 class=“intro” 的组件
• #firstname 拥有 id=“firstname” 的组件
• view 支持所有view组件
• view, checkbox 所有文档的 view 组件和所有的 checkbox 组件
• view::after 在 view 组件后边插入内容
• view::before 在 view 组件前边插入内容

less

1. 使用编辑器vscode

2. 安装插件easy less
   

3. 在vscode的设置中加入如下配置
   
   
   

"less.compile": {
        "outExt": ".wxss"
    }

5. 在要编写样式的地方，新建less文件，如demo05.less，然后正常编辑即可

/* miniprogram/style */
view{
  color: aqua;
  font-size: 100px;
}

/* 
miniprogram\pages\demo05\demo05.less
1 定义less变量
*/
@color:yellow;
text{
    // 2 使用变量
    color:@color;
}

view{
    .vie1{
        text{
            color: red;
        }
    }
}

// 导入
@import "../../style/reset.less";
view{
    color: @themeColor;
}

这时候选择保存会自动生成demo05.wxss文件

/* 
miniprogram\pages\demo05\demo05.wxss
1 定义less变量
*/
text {
  color: yellow;
}
view .vie1 text {
  color: red;
}
view {
  color: green;
}