学习小程序第二天

最新推荐文章于 2024-02-26 10:34:34 发布

K--kkkkk

最新推荐文章于 2024-02-26 10:34:34 发布

阅读量251

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/weixin_50889870/article/details/118099202

版权

本文详细介绍了小程序的模板语法，包括数据绑定、运算、列表渲染和条件渲染。同时，讲解了事件的绑定，如input事件和click事件的处理，并探讨了样式的相关知识，如尺寸单位、样式导入和选择器的使用。

摘要由CSDN通过智能技术生成

1.模板语法

WXML 是框架设计的一套标签语言,结合基础组件、事件系统，可以构建出页面的结构
1.1数据绑定

1 text 相当于以前web中的 span标签行内元素不会换行
2 view 相当于以前web中的 div标签块级元素会换行
3 checkbox 以前的复选框标签

首先在app.json里创建一个demo03
这是创建之后的文件
字符串类型

先打开demo03.js 把里面的内容全部删掉重新写成这样

在这里插入图片描述

然后再把demo03.wxml写成

 <!-- 1. 字符串 -->
  <view>{
   {
   msg}}</view>

效果图

数字类型
步骤和上面一样直接看代码
```
 demo03.js
```

Page({
   
  data:{
   
    msg:"hello mina",
    num:10000,
   

  }
})

demo03.wxml

 <!-- 1. 字符串 -->
  <view>{
   {
   msg}}</view>
<!-- 2. 数字类型 -->
  <view>{
   {
   num}}</view>

效果图

在这里插入图片描述

bool类型
```
 demo03.js
```

Page({
   
  data:{
   
    msg:"hello mina",
    num:10000,
    isGirl:false,

  }
})

demo03.wxml

 <!-- 1. 字符串 -->
  <view>{
   {
   msg}}</view>
<!-- 2. 数字类型 -->
  <view>{
   {
   num}}</view>
<!-- 3. bool类型 -->
  <view>是否是伪娘</view

效果图

在这里插入图片描述
6.object类型

demo03.js

Page({
   
  data:{
   
    msg:"hello mina",
    num:10000,
    isGirl:false,
    person:{
   
      age:74,
      height:145,
      weight:200,
      nema:"富婆"
    }
  }
})

demo03.wxml

在 <!-- 1. 字符串 -->
  <view>{
   {
   msg}}</view>
<!-- 2. 数字类型 -->
  <view>{
   {
   num}}</view>
<!-- 3. bool类型 -->
  <view>是否是伪娘</view>

最低0.47元/天解锁文章

K--kkkkk

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习小程序第二天

1.模板语法WXML 是框架设计的一套标签语言,结合基础组件、事件系统，可以构建出页面的结构1.1数据绑定1 text 相当于以前web中的 span标签行内元素不会换行2 view 相当于以前web中的 div标签块级元素会换行3 checkbox 以前的复选框标签首先在app.json里创建一个demo03这是创建之后的文件字符串类型先打开demo03.js 把里面的内容全部删掉重新写成这样然后再把demo03.wxml写成 <!-
复制链接

扫一扫