使用LinUI的Icon组件代替图片ICON

引入LinUI的icon库：

  "usingComponents": {"l-icon":"/miniprogram_npm/lin-ui/icon/index"}

使用：

LinUIIcon组件的颜色和大小设置

用l-icon修改之前编写的代码：

    <view class="post-like"><l-icon class="post-like-image"color="#666" size="32" name="favor"/><text class="post-like-font">92</text><l-icon class="post-like-image" color="#666" siz="32" name="eye"/><text class="post-like-font">104</text></view>

l-icon可以直接设置大小了，所以我们的css代码可以不用设置大小了。
实现效果：

小程序开发数据的流向

单向数据绑定和双向数据绑定

所有在js文件的data中定义的数据都可以在wxml中直接显示：

DOM优先VS数据优先

DOM：

理解Page.data与this.SetData的关系

有两种方式：

setdata是将数据添加到data里面

预先在data中定义绑定数据的初始值是值得推荐的做法

小程序的生命周期函数与特殊回调函数

生命周期函数加载顺序为 onLoad-> onShow()-> onReady

  /*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}

数据绑定的实战应用

实现的效果与之前写的静态页面一样。

Mustache语法解析

当我们的数据不止一级的时候：

修改wxml:

具体参考微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

条件渲染

用flag来判断是否渲染，为true时渲染，为false的时候不渲染

ifelse渲染（else可以不写条件）：

列表渲染

现在我们拥有两个元素的数组：

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名。类似 block wx:if ，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。

小程序事件

使用bind来捕捉事件执行回调函数

  <view bind:tap="onTap  " class="journey-container"><text class="journey">开启小程序之旅</text></view>

  onTap(params){//跳转页面}

微信小程序入门与实战之条件渲染、列表渲染与小程序事件相关推荐

微信小程序入门与实战(3)——阅读文章列表页面导入js模拟的数据
data/data.js var postLists = [{date: "Sep 18 2016",title: "正是虾肥蟹壮时",imgSrc: &quo ...
微信小程序入门与实战之更多电影列表与电影搜索
wx.request的更多参数详解在网络请求中我们可以采用下面这种形式: 如果我们可以不采用直接写在url的方式我们可以采用data的方式: 默认请求方式是GET我们可以通过设置method修改请求 ...
【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战文章目录微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
微信小程序入门与实战（七月）
微信小程序入门与实战(七月) 第1章初识微信小程序第2章小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
微信小程序入门与实战笔记
微信小程序目录微信小程序 1微信小程序介绍 1.1什么是微信小程序 1.2小程序特点 1.3对开发者的影响 1.4分辨率与rpx 1.4.1英寸 1.4.1分辨率(pt): 1.4.2分辨率(px ...
【DRF+Django】微信小程序入门到实战_day04(上)
(0)摘要 # 课程链接入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 微信开发者文档微信开放文档 # 课程内容 (1)P28_用户登录页面 ...
【DRF+Django】微信小程序入门到实战_day03(下)
(0)摘要 # 课程链接入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 微信开发者文档微信开放文档 # 课程内容 (1)P28_发送短信验证码 ...
【DRF+Django】微信小程序入门到实战_day01(下)
(0)摘要 # 课程链接入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 文档链接微信开放文档 # 课程内容 (1)flex 布局 (2)fle ...
微信小程序入门到实战(1)-基础知识
1.微信小程序介绍微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用. 1 ...

微信小程序入门与实战之条件渲染、列表渲染与小程序事件