uniapp_003_微信小程序入门

onHide - 切后台

页面的onHide，入口页的onHide。

第一个onHide表示的是我们的页面隐藏；

最后一个onHide表示我们的页面进入了后台；

onUnload是在我们的页面返回，也就是我们的A页面打开B页面，这个时候从B页面返回A页面的时候，表示B页面已经关闭了，关闭说的就是页面卸载了，B页面就是onUnload了。

写一个onUnload的示例

新建一个目录，并且新建一个文件叫做detail，就会出现如上图所示的四个文件；

我们这样操作了之后，看app.json，就会自动生成了一个配置：

---

我们要在index页面，访问detail页面，就是下面的写法：

<navigator url="/pages/detail/detail">打开详情页面</navigator>

这里有两个需要注意的地方，第一是url的路径要写：/pages/detail/detail。

这里pages前面要放置/，这是表示，这是一个绝对路径，我们访问是不会有问题的。

navigator是小程序提供我们的组件，是用来页面跳转的组件。

---

然后我们在detail页面的js当中，监听onUnload生命周期函数，如下所示：

---

我们从index页面跳转到detail页面：

点击打开后，就是下面的样子：

然后我们从detail页面返回到index页面，控制台出现下面的效果：

这说明detail页面被卸载了，就是onUnload，这就是onUnload的意思。

详细解释index跳转到detail页面

从index页面跳转到detail页面，会依次触发下面的生命周期函数：

• index页面的onHide，就是页面隐藏；
• detail页面的onLoad，就是页面加载；
• detail页面的onShow，就是页面显示；
• detail页面的onReady，就是页面渲染完成；

然后从detail页面返回到index页面，会依次触发下面的生命周期函数：

• detail页面的onUnload
• index页面的onShow

看页面布局和样式

上面是写了一个页面元素；

写了样式之后，左边都显示出来的。

注意点

div标签 -> view标签

img标签 -> image标签

span标签 -> text标签

讲解什么？

• 数据绑定
• 条件判断
• 列表渲染

主要就讲解这三个；

数据绑定 - 简单数据

先准备数据：

然后把name字段，在页面当中渲染：

这就是简单的数据绑定；

数据绑定 - 动态数据

页面初始加载的name是张三，两秒钟之后，变成李四；

setTimeout(()=>{
    this.setData({
        name: "李四"
    })
}, 2000)

这就是动态绑定数据的方法，通过使用this.setData(接收的是Obj)，this代表的是page实例；

条件判断

判断我们的内容，是否显示；

所谓的条件判断，就是通过布尔值来控制页面元素是否显示；

所谓的条件判断，就是wx:if；

列表渲染

给一个数组或对象，显示到页面当中；

wx:for当中有默认的item，是当前遍历对象元素的值；

index，是当前遍历对象的下标值；

如果不想要使用wx:for默认的item和index名字，可以使用如上所示的代码。

<view wx:for="{{age}}" wx:for-item="age" wx:for-index="ids">{{age}} - {{ids}}</view>

总结

初步了解微信小程序的开发；

方便学uniapp；