Taro初学笔记 one

Taro

• 基于react语法基础，可以一套代码编译成多端运行。
• 创建项目 taro init myapp

多端运行的编译指令

• npm run dev:h5 web
• dev:weapp 微信小程序
• dev:alipay 支付宝小程序
• dev:swan 百度小程序
• dev:rn ReactNative

文件目录结构

• dist 编译结果目录（直接运行这个文件下打包好后的即可 => 注：其他的文件是用taro写的，一起选择无法识别）
• config 配置目录
  • dev.js 开发时的配置
  • index.js 默认配置
  • prod.js 打包时配置
• src 源码目录
  • pages 页面文件目录
  • app.js 项目入口文件（小程序：数组中设置的会被转化为页面，没设置的转换为组件；h5：数组中设置的转换为router，没有设置的转换为组件）

  config = [
    // 填写页面路径
  ]
  

  • app.css 项目公共通用样式文件
• package.json
• project.config.json （填写appid等信息文件，对于整个小程序项目）

组件间传值（props）

• 类组件内存在state状态，可将其通过props进行传递。（props可以传递任何类型）
• props更新如何在子组件中获取？

componentWillReceiveProps(nextProps) {
  console.log(nextProps);
} // 子组件中监听父组件中传递过来的props中任何一个数据的变化，也就是props中任何一个数据的变化，都会触发这个函数执行

• props父组件默认值为undefined(不是null)的时候，可以在子组件中通过设置defaultProps来设置初始值，后续会被覆盖

// 场景：父组件初始的state属性值为null, 
// 后续在
componentDidMount() {
  this.setState();
}
// 子组件中设置，避免直接使用props中的属性值报错
子组件名称.defaultProps = {}

• props传递函数，在小程序端的事件，必须加on+事件名称。

// 通过props传递的函数需要＋on
<View ontest={}></View>

路由功能与资源引用

• 小程序中最多5层webview，需要注意方法的使用，并不是无限制的

路由跳转方法

• navigateTo(传递对象)（相当于 router.push()） 或 redirectTo(传递对象)(相当于router.replace())
• url后面拼接参数

Taro.navigateTo({
  url: `/pages/businessCardDetail/index?cardId=${id}`
});

路由返回方法

• 关闭当前页面，返回上一页面 或者 多级页面。
• Taro.navigateBack({ delta: 2 })

获取路由参数

• 在目标页面的生命周期函数中，使用Taro.getCurrentInstance().router.params获取参数

静态资源引用

• !!无需安装任何loader，就可以自由引用静态资源，与webpack不同!!

引用图片、音频和字体资源

• import img from '图片地址（相对）'
• require(图片相对地址)
• 字体设置像素，小写的px会被转换为不同端的相对单位，如果想要不转换，就大写PX

引用js文件

• js文件中有多个导出的时候，需要使用{}
• js文件引入，可以省略后面的.js后缀

条件渲染

• 不能使用v-if等判断语句，可以使用三元表达式或者|| / &&
• map方法，第一项：每项值，第二项：下标
• 如果需要对数据筛选后，再进行展示，那么要在外部使用filter函数，处理完数据后，再进行展示。

children(更方便更好的封装组件)

• children不能写成this.props.children[0]这样的，如果需要传入多个组件，可以使用自定义属性的方式传入
• {}可以放任何类型的东西，可以将需要插入的组件之间放置在其中即可。

<View myImg={<Img require()/>}></View>

事件

• 传递参数：onclick={() => clickHandler(id)}

定义数据类型

接口类型，定义对象

*（接口类型首字母大写）

属性个数不确定

interface Istate {
  name: string,
  age: number,
  [propName: string]:any
}

只读属性

// 初始值成功赋值后，值不能再被修改
interface Istate {
  name: string,
  readonly age: number
}

数组

• 常规

const count:number [] = [1,2,3] 

• 泛型

const count:Array<number> = [1,2,3]

• 接口

// 可以和数组或者泛型的方式结合起来使用
const count:Istate []
const count:Array<Istate> = []