taro使用手記

? Taro['tɑ:roʊ]，泰羅·奧特曼，宇宙警備隊總教官，實力最強的奧特曼。

如何獲取路由引數？

//在 willMount 之前無法拿到路由引數
const abc = this.$router.params.abc
複製程式碼

不要在 state 與 props 上用同名的欄位，因為這些被欄位在微信小程式中都會掛在 data 上。
不要使用 undefined 應該使用 null
書寫 scss 不要直接選擇元件名，應該使用.className，如果直接選擇元件名在h5上css會無效

# 正確的
.button{
  width: auto;
  margin-bottom: 40px;
}
# 錯誤的，這樣寫的樣式在h5上無效
Button{
  width: auto;
  margin-bottom: 40px;
}
複製程式碼

如何在頁面跳轉的時候傳遞URL？因為小程式的路由就是以URL的方式路由的，以?分割引數和路徑，以&分割引數，引數傳字串還好要是傳的字串是url就會被分割，那麼這個最終拿到的引數就會被分割掉，會不全，所以要想個辦法吧url轉換一下，不要留下?&=這種符號，於是我把url編碼成了base64了，再傳給目標頁面，目標頁面拿到了再解碼就行。可以通過npm安裝依賴庫 npm install --save js-base64,具體文件 www.npmjs.com/package/bas…
如何讓圖片顯示寬度100%高度自適應

 render() {
   let style={
     width:'100%'
   };
   return (
     <View className='index'>
       <Image src={this.state.url} style={style} mode='widthFix' /> //重點在mode和width上
     </View>
   )
 }
複製程式碼

如何設定頁面的背景顏色？在config裡設定backgroundColor無效，因為這個配置的是視窗的背景色，只能在下拉的時候看到，要設定頁面的背景，需要在 src/app.scss 檔案中寫

page {
  background-color: #eef3f3;
}
複製程式碼

自定義元件 Canvas 無效繪製不出來，這個問題是因為沒仔細看文件，看了微信的文件發現在自定義元件的時候，createCanvasContext()這個函式要傳兩個引數，一個是 id，另外一個是 this，然後我試了一下createCanvasContext('dot',this),還是無效，又一番搜尋，原來 Taro 需要獲取原生作用域，那麼久應該是這麼寫:let context = Taro.createCanvasContext('dot',this.$scope);,成功繪製！
引用 PropTypes 失敗，按照官方文件上的程式碼

import PropTypes from 'prop-types';

class Greeting extends Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};
複製程式碼

按照這麼寫的話終端會提示正在安裝依賴prop-types，然後就是微信小程式編譯失敗，無法執行，然後試了一下另外一個引用方式import {PropTypes} from "nervjs";這樣既可在微信上正常編譯執行

flex 主軸方向為水平時，左邊的專案寬度會因為右邊的寬度變寬而變窄

這是因為 flex 的 item 的 flex-shrink 預設值為1，即如果空間不足，該專案將縮小，負值對該屬性無效。

那麼把 flex-shrink 的值設定為0，就表示不縮放了。

taro使用手記

相關文章