使用Taro開發小程序的踩坑總結

時間 2019-11-09

標籤使用 taro 開發程序總結简体版

原文原文鏈接

第一次使用Taro，把遇到的坑羅列一遍，給後繼踩坑者作參考吧。javascript

開發環境

taro版本：v1.3.0-beta.5
nodejs版本：v8.11.4

使用鐵律

靜態資源404，
檢查靜態資源引用是否使用ES6的import引入
檢查訪問文件有沒有使用下劃線鏈接多個單詞
路徑不對，找不到Js文件，
刪除dist文件夾，從新編譯

踩過的坑

1. 實現小程序的slot的功能，開發工具翻譯的wxml結果是slot內容和組件是同級，而非嵌套關係。《Children 與組合》Taro官方文檔

這是小程序開發工具的bug, 最後視圖窗口顯示是正確的，實際是正確的，github.com/NervJS/taro…css

編譯前組件代碼html

// component.js
<View className={'must-login-btn ' + className} hoverClass='btn-hover' onClick={this.onClick}>
{
  !userToken
  ? <Button className='user-info-btn' openType='getUserInfo' onGetuserinfo={handleGetUserInfo} /> : '' } { this.props.children } </View>
複製代碼

// page.js
<MustLoginBtn className='scan-btn' onClick={this.doScan}>
    <View className='scan-btn-inner'> <View className='scan-icon' /> <Text className='btn-text'>掃小程序碼</Text> </View> </MustLoginBtn>
複製代碼

開發工具中看到的wxml以下： java

2. 使用externalClasses，爲組件定義外部樣式失效。《組件模板和樣式》小程序官方文檔,《組件的外部樣式和全局樣式》Taro官方文檔

使用全局樣式類，放棄使用externalClasses。
在component文件內設置 addGlobalClass: true, 同時使用props獲取外部定義的className
在page.js文件內使用自定義組件式時，設置className屬性
在page.scss樣式文件設置外部樣式在組件內調用組件的狀況，外部樣式也須要寫在page的樣式文件纔有效（想哭）node

/* CustomComp.js */
export default class CustomComp extends Component {
  // 設置全局樣式
  static options = {
    addGlobalClass: true
  }
  // 使用prop設置自定義className
  static defaultProps = {
    className: ''
  }

  render () {
    return <View className={this.props.className}>這段文本的顏色不會由組件外的 class 決定</View>
  }
}
複製代碼

/* MyPage.js */
import './MyPage.scss';
export default class MyPage extends Component {
  render () {
    return <CustomComp className="red-text" /> } } 複製代碼

/* MyPage.scss */
.red-text {
  color: red;
}
複製代碼

3. 在component文件內使用「函數式組件」出錯了

函數的命名必須以 render 開頭，render 後的第一個字母須要大寫。《類函數組件》Taro官方文檔git

錯誤表現：

這個不該該算是坑，是閱讀文檔不夠深入。github

4. 編譯後，靜態資源圖片老是404, 沒有被複制到dist目錄

taro中靜態資源引入須要直接經過ES6的import語法引入《靜態資源引用》Taro官方文檔shell

如下引入方式被直接忽略資源引入：小程序

<Image className='comp-checkbox__icon-inner' src='./assets/checked_icon.png' />
複製代碼

5.‘生成類函數式組件的函數’內部再次調用‘生成類函數式組件的函數’出錯了

官方給出的限制：
函數的命名必須以 render 開頭，render 後的第一個字母須要大寫
函數的參數不得傳入 JSX 元素或 JSX 元素引用
函數不能遞歸地調用自身數組

雖然我沒有哦調用自身，可是顯然也是不能調用其餘的‘生成類函數式組件的函數’
解決辦法：
方法1：新建獨立的組件文件ComponentA 和 ComponentB，而後在ComponentA中引入ComponentB，並render函數中使用
方法2：把jsx儘可能寫在一個類函數式組件內

錯誤的寫法

class MainPage extends Component {
    renderB () {
        return <View>B</View>
    }
    renderA () {
        return (
            <View> {this.renderB()} </View>
        )
    }
    render () {
        ...
        return (
            ...
            {this.renderA()}
            ...
        )
    }
}

複製代碼

TypeError: Property right of Ass ignnent Expression expected node to be of a type[ "Expression"] but  instead got null
複製代碼

正確寫法

class MainPage extends Component {
    renderA () {
        return (
            <View> {/* renderB 內容 start */} <View>B</View> {/* renderB 內容 end */} </View>
        )
    }
    render () {
        ...
        return (
            ...
            {this.renderA()}
            ...
        )
    }
}

複製代碼

6. 父組件經過props傳遞函數給子組件，子組件觸發函數後，this指向了子組件的props

被傳遞的函數，在jsx代碼中作綁定

出現錯誤的代碼：

// Parent
class Parent extends Component {
  constructor (props) {
    super(props)
    this.onTabClick.bind(this); // 綁定this
  }
  onTabClick () {
    console.log(this) // this指向child.props，而不是指向Parent的實例
  }
  render () {
    return <Child onClick={this.onTabClick}/> } } // Child class Child extends Component { constructor (props) { super(props) this.handleClick.bind(this); // 綁定this指向 } handleClick () { ... this.props.onClick(); } render () { return ( ... <View onClick={this.handleClick}></View> ... ) } } 複製代碼

this指向正確的代碼:

// 僅僅修改的父組件onTabClick.bind(this)的位置
// Parent
class Parent extends Component {
  constructor (props) {
    super(props)
    /*修改 start*/
    // this.onTabClick.bind(this); // 綁定this
    /*修改 end*/
  }
  onTabClick () {
    console.log(this) // this指向Parent的實例
  }
  render () {
    /*修改 start*/
    return <Child onClick={this.onTabClick.bind(this)}/> /*修改 end*/ } } 複製代碼