Taro 實戰(zhàn)踩坑

Taro

  1. 引用相對路徑圖片

直接將相對路徑放在src屬性中,不起作用族淮,
需要先import進來辫红,最好把圖片放到服務(wù)器上凭涂,然后直接寫http路徑

錯誤寫法:

<Image src="./images/front.png" />

正確寫法:

import namedPng from './images/front.png'

...
<Image src={namedPng} />
  1. 不支持render中,使用函數(shù)多條件渲染
    h5不報錯贴妻,但是編譯成小程序時 會報錯

錯誤寫法:


onRenderContent = () => {
    const { verified, recognized } = this.state;
    let content = null; // 初始化時切油,必須賦值,否則小程序報錯undefined
    if (verified && recognized) {
        content = (
            <view>驗證通過且識別通過 </view>
        ) 
    }  else if (!verified && recognized) {
        content = (
            <view> 識別通過但是驗證不通過</view>
        ) 
    } else {
        content = (
            <view> 默認(rèn)顯示的值</view>
        ) 
    }
    return content;
}

render () {

    return (
        <view>
         {this.onRenderContent()}
        </view>
    )
}

正確寫法:

render () {
    const { verified, recognized } = this.state;
    let content = null; 
    if (verified && recognized) {
        content = (
            <view>驗證通過且識別通過 </view>
        ) 
    }  else if (!verified && recognized) {
        content = (
            <view> 識別通過但是驗證不通過</view>
        ) 
    } else {
        content = (
            <view> 默認(rèn)顯示的值</view>
        ) 
    }
    return (
        <view>
         {content}
        </view>
    )
}
  1. Taro.chooseImage(OBJECT) 只支持小程序端名惩,h5端需要重寫
  handleUpload = () => {
    let self = this;
    Taro.chooseImage({
      count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera'],
        success: function (res) {
          let value = res && res.tempFilePaths[0];
          self.setState({
            value: value,
            recognized: !!(value),
          });
        }
    })
  }
h5端不支持

官方說下個版本會支持<Input type="file" />

  1. Taro.chooseImage 轉(zhuǎn)換成Base64
  chooseImage = () => new Promise((resolve,reject)=>{
    Taro.chooseImage && Taro.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera'],
        success: function (res) {
          const FileSystemManager = wx.getFileSystemManager();
          FileSystemManager.readFile({
            filePath: res.tempFilePaths[0],
            encoding: 'base64',
            success: function ({ data }) {
              resolve(data);
            },
            fail: function (err) {
              reject(err);
            }
          });
        },
        fail: function (err) {
          reject(err);
        }
    })
  });

  handleUpload = async () => {
      const { onUpload, isFront } = this.props;
      const data = await this.chooseImage();
      onUpload(data, isFront);
  }

試過直接在successs中寫回調(diào)函數(shù)澎胡,但是無法傳遞消息到父組件,this指向有問題娩鹉。

  1. taro 不支持children攻谁, 支持屬性傳值
子組件
<Button>{ this.props.txt }</Button>


引用子組件
<MButton txt="下一步" />

6.在components文件夾中 新建組件時,組件支持自定義命名弯予,但是不能大寫開頭戚宦。否則會報錯

錯誤寫法:

 // 真實路徑
import MinaMask from '../../components/MinaMask/Index' 

或者
import MinaMask from '../../components/MinaMask/MinaMask'
報錯

正確寫法:

 // 真實路徑

import MinaMask from '../../components/MinaMask/index'

或者
import MinaMask from '../../components/MinaMask/minaMask'
  1. 組件屬性傳遞數(shù)據(jù),不能超過1M锈嫩。比如base64字符串受楼。
 <Image src={frontBase64File} className="background" />
大小限制
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市祠挫,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌悼沿,老刑警劉巖等舔,帶你破解...
    沈念sama閱讀 218,122評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異糟趾,居然都是意外死亡慌植,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評論 3 395
  • 文/潘曉璐 我一進店門义郑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蝶柿,“玉大人,你說我怎么就攤上這事非驮〗惶溃” “怎么了?”我有些...
    開封第一講書人閱讀 164,491評論 0 354
  • 文/不壞的土叔 我叫張陵劫笙,是天一觀的道長芙扎。 經(jīng)常有香客問我,道長填大,這世上最難降的妖魔是什么戒洼? 我笑而不...
    開封第一講書人閱讀 58,636評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮允华,結(jié)果婚禮上圈浇,老公的妹妹穿的比我還像新娘寥掐。我一直安慰自己,他們只是感情好磷蜀,可當(dāng)我...
    茶點故事閱讀 67,676評論 6 392
  • 文/花漫 我一把揭開白布召耘。 她就那樣靜靜地躺著,像睡著了一般蠕搜。 火紅的嫁衣襯著肌膚如雪怎茫。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,541評論 1 305
  • 那天妓灌,我揣著相機與錄音轨蛤,去河邊找鬼。 笑死虫埂,一個胖子當(dāng)著我的面吹牛祥山,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播掉伏,決...
    沈念sama閱讀 40,292評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼缝呕,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了斧散?” 一聲冷哼從身側(cè)響起供常,我...
    開封第一講書人閱讀 39,211評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎鸡捐,沒想到半個月后栈暇,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,655評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡箍镜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,846評論 3 336
  • 正文 我和宋清朗相戀三年源祈,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片色迂。...
    茶點故事閱讀 39,965評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡香缺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出歇僧,到底是詐尸還是另有隱情图张,我是刑警寧澤,帶...
    沈念sama閱讀 35,684評論 5 347
  • 正文 年R本政府宣布诈悍,位于F島的核電站埂淮,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏写隶。R本人自食惡果不足惜倔撞,卻給世界環(huán)境...
    茶點故事閱讀 41,295評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望慕趴。 院中可真熱鬧痪蝇,春花似錦鄙陡、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至给僵,卻和暖如春毫捣,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背帝际。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1 269
  • 我被黑心中介騙來泰國打工蔓同, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蹲诀。 一個月前我還...
    沈念sama閱讀 48,126評論 3 370
  • 正文 我出身青樓斑粱,卻偏偏與公主長得像,于是被迫代替她去往敵國和親脯爪。 傳聞我的和親對象是個殘疾皇子则北,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,914評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,133評論 25 707
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)痕慢,斷路器尚揣,智...
    卡卡羅2017閱讀 134,657評論 18 139
  • 2017年12月14日 陰 星期四 據(jù)說明天有雪,難道想將今天作為過度掖举?否則快骗,為何今天是這樣的陰涼?本來還在心中疑...
    泥鰍的戀愛閱讀 238評論 4 9
  • 我不知道老陳具體叫什么名字拇泛,打電話滨巴,加到的思灌。微信名是老陳俺叭,自稱老陳。問他有沒有做過信托泰偿,回復(fù)了一個郭德綱的表情沒有...
    理財師黃芳閱讀 360評論 0 3