Taro

新项目启动

// 全局安装taro
npm i -g @tarojs/cli
// 项目初始化
taro init appName

微信小程序

需要下载微信小程序开发工具，使用工具打开 taro 项目根目录。

老项目更新依赖

老项目在新 taro 框架,需要更新

taro update project

Taro3 和老版本引入有差别

引入

//老版本
import Taro, { Component } from "@tarojs/taro";

//Taro3新版本
import Taro from "@tarojs/taro";
import { Component } from "react";

挂载 App.js

//老版本app.js
import Taro, { Component } from "@tarojs/taro";
import Index from "./pages/index";
import "./app.css";

class App extends Component {
  //config写到app的类里.
  //新版写到单独的app.config.js文件里
  config = {
    pages: [
      "pages/index/index",
      "pages/nodes/nodes",
      "pages/hot/hot",
      "pages/node_detail/node_detail",
      "pages/thread_detail/thread_detail",
    ],
    tabBar: {
      list: [
        {
          iconPath: "resource/latest.png",
          selectedIconPath: "resource/lastest_on.png",
          pagePath: "pages/index/index",
          text: "最新",
        },
        {
          iconPath: "resource/hotest.png",
          selectedIconPath: "resource/hotest_on.png",
          pagePath: "pages/hot/hot",
          text: "热门",
        },
        {
          iconPath: "resource/node.png",
          selectedIconPath: "resource/node_on.png",
          pagePath: "pages/nodes/nodes",
          text: "节点",
        },
      ],
      color: "#000",
      selectedColor: "#56abe4",
      backgroundColor: "#fff",
      borderStyle: "white",
    },
    window: {
      backgroundTextStyle: "light",
      navigationBarBackgroundColor: "#fff",
      navigationBarTitleText: "V2EX",
      navigationBarTextStyle: "black",
    },
  };
  //return的是首页.
  //新版本return的是this.prop.children
  render() {
    return (
      <Index />
      //  return this.props.children
    );
  }
}
//老版本使用Taro.render挂载到app节点上
//新版本直接export default App

Taro.render(<App />, document.getElementById("app"));
//export default App

按需引入

taro-UI  的样式可以按需引入.

研究多 tab 页报错问题，路径地址写错了

路由

跳转

小程序的跳转Taro.navigateTo.
H5 的跳转是从@tarojs/router中引入navigateTo.

路由声明

路由在 @tarojs/taro  中的 getCurrentInstance().router 中获取.

import { getCurrentInstance } from "@tarojs/taro";
class C extends Component {
  current = getCurrentInstance();

  componentWillMount() {
    // getCurrentInstance().router 和 this.$router 和属性一样
    console.log(this.current.router);
  }
}

// 函数式组件
import { getCurrentInstance } from "@tarojs/taro";
function C() {
  const { router } = getCurrentInstance();
  // getCurrentInstance().router 和 useRouter 返回的内容也一样
  // const router = useRouter()
}

路由参数获取

原生小程序路由一般在 onLoad  中获取传过来的参数.
Taro  推荐在 ComponentDidShow  中获取.(也可以在 onLoad  中)

// app.js 项目入口文件
class App extends Component {
  componentDidShow (options /* 这里有你想要的路由信息 */) {
  }

  render () {
    ...
  }
}

生命周期

小程序 => class 类 => 函数式 hook
onLoad => onLoad
onReady => onReady => useReady
onLanch => onLanch
onShow => conponentDidShow => useDidShow
onHide =>componentDidHide => useDidHide

事件

onPullDownRefresh()

监听用户下拉动作。

需要在全局配置的  window  选项中或页面配置中设置  enablePullDownRefresh: true。
可以通过  Taro.startPullDownRefresh  触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
当处理完数据刷新后，Taro.stopPullDownRefresh  可以停止当前页面的下拉刷新.

onReachBottom()

监听用户上拉触底事件。

可以在全局配置的  window  选项中或页面配置中设置触发距离  onReachBottomDistance。
在触发距离内滑动期间，本事件只会被触发一次

H5  暂时没有同步实现，可以通过给  window  绑定  scroll  事件来进行模拟

onPageScroll()

监听用户滑动页面事件.

H5  暂时没有同步实现，可以通过给  window  绑定  scroll  事件来进行模拟

基本事件

在  Taro  中事件遵从小驼峰式（camelCase）命名规范，所有内置事件名以  on  开头。

在事件回调函数中，第一个参数是事件本身，回调中调用  stopPropagation  可以阻止冒泡。

只有小程序的  bindtap  对应  Taro  的  onClick
其余小程序事件名把  bind  换成  on  即是  Taro  事件名

Redux

安装 redux 及其中间件

$ yarn add redux react-redux redux-thunk redux-logger
# 或者使用 npm
$ npm install --save redux react-redux redux-thunk redux-logger

随后可以在项目  src  目录下新增一个  store  目录，在目录下增加  index.js  文件用来配置  store，按自己喜好设置  redux  的中间件，例如下面例子中使用  redux-thunk  和  redux-logger  这两个中间件

import { createStore, applyMiddleware, compose } from "redux";
import thunkMiddleware from "redux-thunk";
import rootReducer from "../reducers";

const composeEnhancers =
  typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      })
    : compose;

const middlewares = [thunkMiddleware];

if (
  process.env.NODE_ENV === "development" &&
  process.env.TARO_ENV !== "quickapp"
) {
  middlewares.push(require("redux-logger").createLogger());
}

const enhancer = composeEnhancers(
  applyMiddleware(...middlewares)
  // other store enhancers if any
);

export default function configStore() {
  const store = createStore(rootReducer, enhancer);
  return store;
}

接下来在项目入口文件  app.js  中使用  redux  中提供的  Provider  组件将前面写好的  store  接入应用中.

import React, { Component } from "react";

// 假设我们要使用 Redux
import { Provider } from "react-redux";
import configStore from "./store";

// 全局样式
import "./app.css";

const store = configStore();

class App extends Component {
  // 可以使用所有的 React 组件方法
  componentDidMount() {}

  // 对应 onLaunch
  onLaunch() {}

  // 对应 onShow
  componentDidShow() {}

  // 对应 onHide
  componentDidHide() {}

  render() {
    // 在入口组件不会渲染任何内容，但我们可以在这里做类似于状态管理的事情
    return (
      <Provider store={store}>
        /* this.props.children 是将要被渲染的页面 */
        {this.props.children}
      </Provider>
    );
  }
}

export default App;

然后就可以开始使用了。如  redux  推荐的那样，可以增加

• constants  目录，用来放置所有的  action type  常量
• actions  目录，用来放置所有的  actions
• reducers  目录，用来放置所有的  reducers