taro 開發筆記

微信小程序配置注意事項

若使用微信開發者工具進行調試預覽，需要做如下設置：

關閉 ES6轉ES5 功能 關閉 上傳代碼時樣式自動補全 功能 關閉 代碼壓縮上傳 功能

目錄別名：alias配置方法

假設所有組件目錄爲 src/components/，而所有頁面目錄爲 src/pages/，爲了簡化頁面中引入組件時路徑需要寫 '../../components/' ，可通過修改項目配置項，添加 alias 屬性來實現。

第1步：打開 config/index.js 向 config 中添加 alias 屬性

import path from 'path'
const config = {
alias: {
    '@/components': path.resolve(__dirname,'..','src/components')
  },
}

第2步：打開 tsconfig.json 添加 paths 屬性

"paths": {
      "@/components/*": ["./src/components/*"]
    }

經過以上配置後，在頁面中引用組件的路徑，可寫成： import Xxx from "@/components/Xxx"

注意事項： 1.若 src/components/index.js 作爲組件統一導出文件，不要使用 exprot default { Xxx }，而是 使用 export { Xxx } 2.頁面若想引入 src/components/index.js 中某組件，路徑應該寫成 import {Xxx} from '@/components/index'

參考文獻： https://github.com/dbudaiya/JavaScript_Learn/blob/03646baa32923bae67282c4f1ebab04d6936340e/Web%E5%89%8D%E7%AB%AF/Taro%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.md

Taro 插件 用於支持編譯爲釘釘小程序： @tarojs/plugin-platform-alipay-dd https://github.com/NervJS/taro-plugin-platform-alipay-dd

taro3.x: 搭建redux環境 http://t.zoukankan.com/Nyan-Workflow-FC-p-13529088.html

note/開發技術/Taro/進階指南/使用 Mobx.md -使用 Mobx https://github.com/shenhuanjie/note/blob/3813592e702ffa4450553fb690f6171049ba8cad/%E5%BC%80%E5%8F%91%E6%8A%80%E6%9C%AF/Taro/%E8%BF%9B%E9%98%B6%E6%8C%87%E5%8D%97/%E4%BD%BF%E7%94%A8%20Mobx.md

react的useState的用法 https://blog.csdn.net/qq_34574204/article/details/108720335

React.memo 和 useMemo https://zhuanlan.zhihu.com/p/339438975

Taro+TypeScript - Mobx實踐 https://blog.csdn.net/idomyway/article/details/94410892?utm_term=taro%E4%BD%BF%E7%94%A8ts&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduweb~default-0-94410892&spm=3001.4430

爲了規避可能出現的this指向丟失的問題，在taro中使用方法的時候進行this綁定
    1、在constructor中通過bind方法進行綁定
    2、在render中通過bind方法進行綁定‘
    3、柯里化函數聲明 （v1.3.0 開始支持）

import { ComponentType } from 'react'
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'

import './index.scss'

type PageStateProps = {
  counter: {
    counter: number,
  }
}
type StateType = {
  name: string,
  age: number
}

interface Index {
  props: PageStateProps,
  state: StateType
}

@inject('counter')
@observer
class Index extends Component {

  constructor (props) {
    super(props)
    this.state = {
      name: '',
      age: 0
    }
    // 異步函數需要在constructor中指定this
    this.setInfoByParams04 = this.setInfoByParams04.bind(this)
  }

  config: Config = {
    navigationBarTitleText: 'Function'
  }

  componentWillMount () { }

  componentWillReact () {}

  componentDidMount () {}

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  setInfo(): void {
    const { name } = this.state
    console.log(name)
    this.setState({
      name: 'wang',
      age: 18
    })
  }
  setInfoByParams(name: string, age: number): void {
    this.setState({
      name: name,
      age: age
    })
  }
  // 柯里化 v1.3.0 開始支持
  setInfoByParams02 = (name: string, age: number) => () => {
    this.setState({
      name: name,
      age: age
    })
  }

  setInfoByParams03: (name: string, age: number) => void = (name, age) => {
    this.setState({
      name: name,
      age: age
    })
  }

  // 模擬異步執行函數
  async setInfoByParams04(name: string, age: number): Promise<any> {
    const { rename, reage } = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          rename: name,
          reage: age
        })
      }, 1000)
    })
    this.setState({
      name: rename,
      age: reage
    })
  }

  render () {
    const { name, age } = this.state
    return (
      <View className='index'>
        <Button onClick={this.setInfo.bind(this)}>不傳參函數</Button>
        <Button onClick={this.setInfoByParams.bind(this, 'wang01', 19)}>傳參函數01</Button>
        <Button onClick={this.setInfoByParams02('wang02', 19)}>傳參函數02</Button>
        {/* 此處箭頭函數是對函數傳參的寫法，不是指定this指向 */}
        <Button onClick={() => this.setInfoByParams03('wang03', 19)}>傳參函數03</Button>
        <Button onClick={() => this.setInfoByParams04('wang04', 19)}>傳參函數04</Button>
        <Text>姓名：{name}</Text>
        <Text>年齡：{age}</Text>
      </View>
    )
  }
}

export default Index  as ComponentType