微信小程序Taro开发(2)：生命周期及开发中注意点

morgan 发布于2019-08-23 14:09 / 2253人阅读

摘要：入口文件继承自组件基类，它同样拥有组件生命周期，但因为入口文件的特殊性，他的生命周期并不完整，如。支持组件化开发，组件代码可以放在任意位置，不过建议放在下的目录中。

生命周期 componentWillMount

在微信小程序中这一生命周期方法对应页面的onLoad或入口文件app中的onLaunch

componentDidMount

在微信小程序中这一生命周期方法对应页面的onReady或入口文件app中的onLaunch，在 componentWillMount后执行

componentDidShow

在微信小程序中这一生命周期方法对应 onShow

componentDidHide

在微信小程序中这一生命周期方法对应 onHide

componentDidCatchError

错误监听函数，在微信小程序中这一生命周期方法对应 onError

componentDidNotFound

页面不存在监听函数，在微信小程序中这一生命周期方法对应 onPageNotFound

shouldComponentUpdate

页面是否需要更新

componentWillUpdate

页面即将更新

componentDidUpdate

页面更新完毕

componentWillUnmount

页面退出，在微信小程序中这一生命周期方法对应 onUnload

在小程序中，页面还有一些专属的方法成员，如下：

1. onPullDownRefresh： 页面相关事件处理函数--监听用户下拉动作

2. onReachBottom： 页面上拉触底事件的处理函数

3. onShareAppMessage： 用户点击右上角转发

4. onPageScroll： 页面滚动触发事件的处理函数

5. onTabItemTap： 当前是 tab 页时，点击 tab 时触发

6. componentWillPreload： 预加载，只在微信小程序中可用

注意

1.通常入口文件会包含一个 config 配置项，这里的配置主要参考微信小程序的全局配置而来，在编译成小程序时，这一部分配置将会被抽离成 app.json，而编译成其他端，亦会有其他作用。

2.入口文件继承自 Component 组件基类，它同样拥有组件生命周期，但因为入口文件的特殊性，他的生命周期并不完整，如：componentWillMount、componentDidMount、componentDidShow、componentDidHide、componentDidCatchError、componentDidNotFound。

3.入口文件需要包含一个 render 方法，一般返回程序的第一个页面，但值得注意的是不要在入口文件中的 render 方法里写逻辑及引用其他页面、组件，因为编译时 render 方法的内容会被直接替换掉，你的逻辑代码不会起作用。

4.Taro 支持组件化开发，组件代码可以放在任意位置，不过建议放在 src 下的 components 目录中。一个组件通常包含组件 JS 文件以及组件样式文件，组织方式与页面类似。

taro项目目录如下:

├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── components         公共组件目录
|   ├── pages              页面文件目录
|   |   ├── index          index 页面目录
|   |   |   ├── banner     页面 index 私有组件
|   |   |   ├── index.js   index 页面逻辑
|   |   |   └── index.css  index 页面样式
|   ├── utils              公共方法库
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
└── package.json

专线服务私有云微信小程序免费开发微信小程序怎样开发微信小程序的开发微信小程序怎么开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100163.html

Taro 简介

摘要：让人又爱又恨的微信小程序自微信小程序以下简称小程序诞生以来，就伴随着赞誉与争议不断。同时于开发者来说，小程序的生态不断在完善，许多的坑已被踩平，虽然还是存在一些令人诟病的问题，但已经足见微信的诚意了。 Taro 介绍在互联网不断发展的今天，前端程序员们也不断面临着新的挑战，在这个变化多端、不断革新自己的领域，每一年都有新的美好事物在发生。从去年微信小程序的诞生，到今年的逐渐火热，以及...

sixgo 2019-08-23 16:18 评论0 收藏0
开源中国专访：Chameleon原理首发，其它跨多端统一框架都是假的？

摘要：中国互联网络信息中心发布的中国互联网络发展状况统计报告显示，截至年月，我国网民规模达亿人，微信月活亿支付宝月活亿百度月活亿另一方面，中国手机占智能手机整体的比例超过，月活约亿。在年末正式发布了面向未来的跨端的。开源中国专访：Chameleon原理首发，其它跨多端统一框架都是假的？原创：嘉宾-张楠开源中国以往我们说某一功能跨多端，往往是指在诸如 PC、移动等不同类型的设备之...

GraphQuery 2019-08-23 15:29 评论0 收藏0
Taro，快速上手教程（一）

摘要：个人所有文章同步到前言最近公司准备开发几款可以在微信小程序端和端同时运行的一套商城，接着就是任务下发喽，但是有一点，时间紧任务重，直接说其他的不管，反正几个星期之内必须上线，头疼。个人所有文章同步到：https://github.com/zhengzhuan... 前言最近公司Boss准备开发几款可以在微信小程序端和H5端同时运行的一套商城，接着就是任务下发喽，但是有一点，时间紧任...

pakolagij 2019-08-23 12:28 评论0 收藏0
Taro 优秀学习资源汇总

摘要：多端统一开发框架优秀学习资源汇总官方资源项目仓库官方文档项目仓库官方文档微信小程序官方文档百度智能小程序官方文档支付宝小程序官方文档字节跳动小程序官方文档文章教程不敢阅读包源码带你揭秘背后的哲学从到构建适配不同端微信小程序等的应用小程序最 Awesome Taro 多端统一开发框架 Taro 优秀学习资源汇总 showImg(https://segmentfault.com/img/r...

toddmark 2019-08-23 18:02 评论0 收藏0