微信小程序复习巩固 —— （wxml，wxss、js、wx:if、wx:for）
微信小程序复习巩固 —— （wxml，wxss、js、wx:if、wx:for）
Gorit
发布于 2021-12-09 13:47:51
发布于 2021-12-09 13:47:51
文章被收录于专栏：Gorit 带你学全栈系列
微信小程序基础预热
之前学了 vue2.5，并且做了一个模仿 去哪网界面，越是学的后面，越是发现 vue 的语法和微信小程序的语法是非常相似，这次把微信小程序基础重新捡起来，毕竟从去年暑假学完小程序到现在过去了挺长时间的，这次基础语法迅速过一遍，就开始做项目了，冲冲冲
一、学习记录
- view 标签 和 text 标签
- 插值表达式的使用，js 后端数据传值问题
- wx:if 基本使用
- wx:for 循环遍历显示数据
- 小案例，九九乘法表
在这里插入图片描述
二、案例整理
2.1 view 标签和 text 标签简单实用
- 直接在 wxml 文件中编写 code
wxml
<view>Hello Worldview>
<text>Hello Worldtext> 这一块官方文档记录的非常详细：传送门
2.2 插值表达式简单使用
- 简单的传值，使用插值表达式动态改变数据 js
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
info: "大家好，我是第一个界面",
isShow:false,
list: ["aaaa","bbbb","cccc"],
person: {
name:"Gorit",
age:18
},
arr : [1,2,3,4,5,6,7,8,9],
a:1,
b:2,
c:3,
}
})wxml： 静态数据的渲染
<view>{{info}}view>
<view>{{person.name}}view>
<view>{{person.age}}view>
<view>{{list}}view>
<view>{{list[0]}}view>
<swiper vertical="{{false}}" indicator-dots="true" autoplay="true" interval="3000" duration="500" circular="{{true}}">
<swiper-item>
1
swiper-item>
...
swiper>
<view>{{a + b + c}}view>
<view>{{"Hello " +a + b + c}}view>- js 修改数据
在 js 中，在 onLoad 方法中加上 this.setData({ }) ，通过对象的形式传数据到前端，很重要！！！
onLoad: function (options) {
// js 数据传值到前端
this.setData({
info:"数据改变了"
})
},2.3 wx:if 条件渲染 (类比 vue 中的 v-if v-show)
- 单度的标签判断 wxml
<view wx:if="{{isShow}}">{{info}}view>
<view wx:else>else 显示出来了view>多个标签的判断要如何处理呢？
- 使用 block 标签，一次性可以绑定多个标签
<view>xxxxview>
<view>xxxxview>
block>2.4 wx:for 循环迭代
- 单个标签的循环 wxml
我们通过 循环 list，通过 item 的到其值，index 得到下标
<text>使用 wx:for 循环数据text>
<view wx:for="{{list}}" wx:key="{{index}}">{{item}},{{index}}view>
<text>别名 数据渲染text>
<view wx:for="{{list}}" wx:key="{{index}}" wx:for-item="value" wx:for-index="idx">{{value}},{{idx}}view>- 循环多个标签，使用 block 即可，使用方式同 wx:if
2.5 综合小练习：九九乘法表
wxml
wx:if wx:for 结合使用
<text>九九乘法表显示text>
<view class="row" wx:for="{{arr}}" wx:for-item="x" wx:key="index">
<view class="col" wx:for="{{arr}}" wx:for-item="y" wx:key="index">
<view wx:if="{{x >= y}}">{{y}}x{{x}}={{x*y}} view>
view>
view>wxss
小程序比较特殊，需要我们指定样式，来保证样式的正常
.row {
display: flex;
flex-wrap: nowrap;
}
.col {
display: flex;
flex-wrap: nowrap;
}三、总结
3.1 完整代码
index.wxml
<!--pages/index/index.wxml-->
<text>小程序基础的学习（一）2020年2月17日21:13:51</text>
<view class="header">微信小程序基础学习</view>
<text>使用插值表达式</text>
<view>{{info}}</view>
<view></view>
<!-- 插值表达式显示对象中的数据 -->
<view>{{person.name}}</view>
<view>{{person.age}}</view>
<view>if 判断</view>
<view wx:if="{{isShow}}">{{info}}</view>
<view wx:else>else 显示出来了</view>
<text>显示数组中的元素</text>
<!-- 显示数组中元素 -->
<view>{{list}}</view>
<view>{{list[0]}}</view>
<text>使用 wx:for 循环数据</text>
<view wx:for="{{list}}" wx:key="{{index}}">{{item}},{{index}}</view>
<text>别名 数据渲染</text>
<view wx:for="{{list}}" wx:key="{{index}}" wx:for-item="value" wx:for-index="idx">{{value}},{{idx}}</view>
<text>九九乘法表显示</text>
<view class="row" wx:for="{{arr}}" wx:for-item="x" wx:key="index">
<view class="col" wx:for="{{arr}}" wx:for-item="y" wx:key="index">
<view wx:if="{{x >= y}}">{{y}}x{{x}}={{x*y}} </view>
</view>
</view>index.js
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
info: "大家好，我是第一个界面",
isShow:false,
list: ["aaaa","bbbb","cccc"],
person: {
name:"Gorit",
age:18
},
arr : [1,2,3,4,5,6,7,8,9]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// js 数据传值到前端
this.setData({
info:"数据改变了"
})
}
})index.wxss
.header {
text-align: center
}
.row {
display: flex;
flex-wrap: nowrap;
}
.col {
display: flex;
flex-wrap: nowrap;
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/02/18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
