我在使用 Taro 时遇到的问题(2)

前言

小程序还是不得不捡起来地说。。。

Taro还是最合适的说。。。

默认模板中app.jsx的一些问题

关于taro框架，通过脚手架初始化时，生成的文件目录如下：

注意的是，components文件夹是我后来生成的，我们需要注意的是app.jsx的内容：

import Taro, { Component } from "@tarojs/taro";
import Home from "./pages/index";

import "./app.less";

class App extends Component {
  config = {
    pages: ["pages/index/index"],
    window: {
      backgroundTextStyle: "light",
      navigationBarBackgroundColor: "#fff",
      navigationBarTitleText: "WeChat",
      navigationBarTextStyle: "black"
    }
  };

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render() {
    return <Home />;
  }
}

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

这里有一个问题，当你对Home组件传值时，会发现不起作用，在Home组件中使用props得到该传值，但是显示该传值是一个空对象。

起初我还以为，Taro中不承认这种写法，后来发现并不是这样的，在注释处就有很明显的代码：

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数

所以说，整个App组件我们只需要保持原样即可，可以把默认的Index组件作为入口，也不需要同时也不能去修改app.jsx的内容，自然也不需要讲默认的方法改成Hooks写法。

props传函数不需要加on前缀

之前看一个教程的时候，说父子组件传值时，传函数时必须要加上"on"前缀，不然会在小程序端报错。

大致就是在小程序端：

child:
      <Text onClick={props.Print}>this is demo</Text>

father:
      <Demo
        name="asen"
        Print={() => {
          console.log(123);
        }}
      />

这样写会报错。

然而在使用hooks方法运行在小程序端时，我发现现在已经无所谓了，并不会报错，不知道是不是taro版本升级还是hooks写法的问题。

不过我个人传函数的时候也比较喜欢加上on，也算是个好习惯吧。

关于Taro中本地图片引用的问题

虽然现在大部分图片资源我都会使用图床直接挂链接的方式，但是在引用本地文件的操作也是需要的，这时我们可以用require包裹，或者使用import的方式：

import Image8 from "../../images/8.jpg";
...
      <Image src={Image8} />

import的方法是我经常用的，因为require的方法实在看不惯。