Taro 从入门到实战

配置文件

更改端口号和域名：

config/index.js

h5: {
    devServer:{ host: 'localhost', port: 8888},

更改 appid:
project.config.json（小程序独有的配置文件）

"appid": "touristappid",

项目目录

dist（编译结果的目录）
config（配置目录）
config/dev.js(开发时配置)
config/index.js（默认配置）
config/prod.js（打包时配置）
src(源码目录)
src/pages（页面文件目录）/index 页面目录
src/app.jsx（项目入口文件）
src/app.js（项目总通用样式）
package.json
project.config.json

常用生命周期钩子函数

render()
方法是必须的。当被调用时，render 方法必须返回一个 Taro 组件（可以是内置组件也可以是自定义组件）或一个 falsy 的值。
render() 函数应该纯净，意味着其不应该改变组件的状态，其每次调用都应返回相同的结果，同时不直接和浏览器/小程序交互。若需要和浏览器/小程序交互，将任务放在 componentDidMount() 阶段或其他的生命周期方法。保持 render() 方法纯净使得组件更容易思考。
在 React/Nerv 中，render() 可以返回多种数据结构，但 Taro 暂时只支持两种。因为 Taro 必须把 JSX 编译成微信小程序模板。当 return 的值为 falsy 时，实际上会编译成小程序的 wx:if 标签。

componentWillMount()
组件在装载发生前被立刻调用。避免在该方法中引入任何的副作用或订阅。对于这些使用场景，我们推荐使用 constructor() 来替代。
这是唯一的会在服务端渲染调起的生命周期钩子函数。
componentWillMount() 在小程序里对应的生命周期是 onLoad。

componentDidMount()
在组件被装载后立即调用。初始化使得 DOM 节点应该进行到这里。若你需要从远端加载数据，这是一个适合实现网络请求的地方。在该方法里 setState() 将会触发重新渲染。

componentWillUnmount()
在一个组件被 卸载(unmounted) 和 销毁(destroyed) 之前立即被调用。 在此方法中执行任何必要的清理，例如使计时器无效，取消网络请求，清除一些可能会造成内存泄露的事件等。
在小程序中，一个挂在到 Page 组件的组件并不会执行 componentWillUnmount() 方法，只有当他挂载的 Page 组件被销毁时，该组件才会执行 componentWillUnmount() 方法。

componentDidShow()
在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 onShow，在 H5/RN 中同步实现
程序启动，或从后台进入前台显示时触发，微信小程序中也可以使用 Taro.onAppShow 绑定监听
在此生命周期中通过 this.$router.params，可以访问到程序初始化参数
参数与 componentWillMount 中获取的基本一致。百度小程序

componentDidHide()
在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 onHide，在 H5/RN 中同步实现程序从前台进入后台时触发，微信小程序中也可以使用 Taro.onAppHide 绑定监听。

componentDidCatchError(String error)
在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 onError，H5/RN 中尚未实现
程序发生脚本错误或 API 调用报错时触发，微信小程序中也可以使用 Taro.onError 绑定监听

componentWillUpdate(nextProps, nextState)
当接收到新的 props 或 state 时，componentWillUpdate() 在渲染之前立即被调用。在更新发生之前，使用这个方法可以作为执行准备更新的一个好机会。这个方法在第一次渲染时不会被调用。
注意，这里不能调用 this.setState() 。 如果你需要更新 state 以响应 props 更改，请改用 componentWillReceiveProps()。

componentDidUpdate() 在更新发生后立即被调用。 这个方法在第一次渲染时不会被调用。

shouldComponentUpdate
当你清楚在某些情况下组件不需要被重新渲染时，可以通过在 shouldComponentUpdate 钩子里返回 false 来跳过本次渲染流程。
检查此次 setState 是否进行 render 调用，一般用来多次的 setState 调用时，提升 render 的性能。

componentWillReceiveProps() 在已经装载的组件接收到新属性前调用。若你需要更新状态响应属性改变，你可能需对比 this.props 和 nextProps 并在该方法中使用 this.setState() 处理状态改变。注意即使属性未有任何改变，Taro 可能也会调用该方法，因此若你想要处理改变，请确保比较当前和之后的值。在装载期间，Taro 并不会调用带有初始属性的 componentWillReceiveProps 方法。调用 this.setState 通常不会触发 componentWillReceiveProps。

钩子函数的执行顺序：
componentWillMount()
render()
componentDidMount()

setState() 状态更新一定是异步的。

组件通讯

父子组件通信属性通信
props 只读取

// welcome.js
class Welcome extends Component {
  render() {
    return (
      <View>
        <Text>Hello, {this.props.name}</Text>
      </View>
    );
  }
}

// app.js
class App extends Component {
  render() {
    return <Welcome name="Wallace" />;
  }
}

传引用类型

// welcome.js
class Welcome extends Component {
  let { list } = this.props;
  render() {
    return (
      <View>
        <Text>Hello, {list.name}</Text>
      </View>
    );
  }
}

// app.js
state = {
  // eslint-disable-next-line react/no-unused-state
  list: { name: "张三" }
};

class App extends Component {
  render() {
    return <Welcome list={this.state.list} />;
  }
}

默认值

// welcome.js
Welcome.defaultProps = {
  list:{
    name:'默认值'
  }
}

componentWillReceiveProps

路由

路由配置 app.jsx

config = {
  pages: ["pages/index/index"]
};

路由跳转

Taro.navigateTo(被浏览器记录)
Taro.redirectTo(不给记录)
Taro.switchTab（跳转到 tabar 页面）
Taro.navigateBack（返回）
Taro.reLaunch（指定页面）
Taro.getCurrentPages（指定返回层级）

路由传参

Taro.navigateTo({
  url: '/pages/page/path/name?id=2&type=test'
})
componentWillMount () {
  console.log(this.$router.params) // 输出 { id: 2, type: 'test' }
}

资源的引用

样式文件、图片、js 文件

// js 导出方法
export function getData() {
  console.log(111);
}

export function setData() {
  console.log(222);
}

// ----

function setData (){
  console.log(333);
}

export default setData;
// js 引入
import { setData } from "../../utils/test";
setData()

// ----

import setData from '../../utils/test'

图片引入

<Image src={require("../../")} />

import bg from "../../";
<Image src={bg} />;

样式
大写 PX 不会被转换成 rem

条件渲染

// 三元运算符
class LoginStatus extends Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;

    return (
      <View>{isLoggedIn ? <Text>已登录</Text> : <Text>未登录</Text>}</View>
    );
  }
}

列表渲染

const numbers = [...Array(100).keys()]; // [0, 1, 2, ..., 98, 99]
const listItems = numbers.map(number => {
  return <Text className="li"> 我是第 {number + 1} 个数字</Text>;
});

Children 与组合

class Dialog extends Component {
  render() {
    return (
      <View className="dialog">
        <View className="header">Welcome!</View>
        <View className="body">{this.props.children}</View>
        <View className="footer">-- divider --</View>
      </View>
    );
  }
}
class App extends Component {
  render() {
    return (
      <View className="container">
        <Dialog>
          <View className="dialog-message">Thank you for using Taro.</View>
        </Dialog>
      </View>
    );
  }
}

事件处理

Taro 事件绑定属性的命名采用驼峰式写法

向事件处理程序传递参数

handleClick(param,event) {
  console.log(param,event);
}

<view>
  <Button onClick={this.handleClick.bind(this, this.state.name)}>event</Button>
</view>

阻止事件冒泡
event.stopPropagation();

内置环境变量
process.env.TARO_ENV

---

以上是我对下列视频及文章的归纳和总结。
千锋 Taro 开发框架
手把手教你写个小程序定时器管理库