taro適配多端
介紹
Taro是一套遵循 React 語法規范的多端統一開發框架
多端統一開發框架，支持用 React 的開發方式編寫一次代碼，生成能運行在微信小程序、H5、React Native 等的應用。
Taro 是一套遵循 React 語法規范的 多端開發 解決方案。現如今市面上端的形態多種多樣，Web、React-Native、微信小程序等各種端大行其道，當業務要求同時在不同的端都要求有所表現的時候，針對不同的端去編寫多套代碼的成本顯然非常高，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。
使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信小程序、H5、RN 等）運行的代碼
React 語法風格
Taro 遵循 React 語法規范，它采用與 React 一致的組件化思想，組件生命周期與 React 保持一致，同時支持使用 JSX 語法，讓代碼具有更豐富的表現力，使用 Taro 進行開發可以獲得和 React 一致的開發體驗。
其實說實話，就算不會React，跟着Taro學習，看幾遍也就會了。
正文
廢話不多說，直接上，正所謂，算了忘了古詩詞了，接下來進入Taro的世界吧
安裝
先來安裝一下Taro吧
/** Quick Start With NPM Or Yarn **/ $ npm install -g @tarojs/cli $ yarn global add @tarojs/cli
小伙伴們安裝成功了嗎，如果不出現什么意外的情況下，基本上安裝都能成功，不成功的小伙伴看一下自己的node哦，node沒錯的話，可能是網絡的原因，可以嘗試一下cnpm吧
安裝成功后基本上可以看到以下畫面
看到這里證明你安裝成功了哦！下接下來輸入
taro -V
看一下版本哦，目前Taro可能處於初期開發階段，版本更新會比較快，不過不要緊，不會影響到你的項目哦，相反會更好
好了安裝成功后，Taro就可以正常使用啦
創建項目
接下來創建項目就是
Taro init demo
taro會以非常快速度創建完成
Taro目錄
看一下Taro目錄
具體Taro使用命令看一下項目的package.json目錄哦
先來運行一下吧，輸入
npm run dev:h5
瀏覽器會自動打開一個10086端口的地址
Taro項目就創建成功啦，簡單吧，他的開發其實也挺簡單哦，快去上手吧
Taro運行
微信小程序
選擇微信小程序模式，需要自行下載並打開微信開發者工具，然后選擇項目根目錄進行預覽。
微信小程序編譯預覽及打包
# npm script
$ npm run dev:weapp
$ npm run build:weapp
H5
H5 模式，無需特定的開發者工具，在執行完下述命令之后即可通過瀏覽器進行預覽
H5 編譯預覽及打包
# npm script
$ npm run dev:h5
React Native
React Native 端運行需執行如下命令，React Native 端相關的運行說明請參見 React Native 教程
# npm script
$ npm run dev:rn
百度小程序
選擇百度小程序模式，需要自行下載並打開百度開發者工具，然后在項目編譯完后選擇項目根目錄下 dist 目錄進行預覽。
百度小程序編譯預覽及打包
# npm script
$ npm run dev:swan
$ npm run build:swan
支付寶小程序
選擇支付寶小程序模式，需要自行下載並打開支付寶小程序開發者工具，然后在項目編譯完后選擇項目根目錄下 dist 目錄進行預覽。
支付寶小程序編譯預覽及打包
# npm script
$ npm run dev:alipay
$ npm run build:alipay
對了，Taro更新比較快，還要記得更新Taro項目哦
Taro 提供了更新命令來更新 CLI 工具自身和項目中 Taro 相關的依賴
更新 Taro CLI 工具
# taro
$ taro update self
# npm
npm i -g @tarojs/cli@latest
# yarn
yarn global add @tarojs/cli@latest
注意事項
我們在使用taro語法應注意的事項
1. 使用兩個空格換行；
2. 結束不能用分號；
3. 除了縮進，不能使用多個空格；
4. 統一用單引號；
5. 關鍵詞后加空格，如Iif (condition) {},括號前都有空格；
6. 避免多余的空行；
7. 函數聲明時括號與函數名間加空格，，，，如function name (arg) { … } run(function () { … })
8. 展開運算符與它的表達式間不要留空白 如：fn(…args)
9. 遇到分號時空格要后留前不留 如：for (let i = 0; i < items.length; i++) {…}
10. 代碼塊首尾留空格 如if (admin) {…}
11. 圓括號間不留空格 如getName(name)
12. 屬性前面不要加空格 如user.name
13. 一元運算符前加一個空格 如：typeof !admin
14. 注釋首位留空格 如：/* comment */
15. 模板字符串中模板前后不加空格 如：const message = Hello, ${name}
16. 逗號后加空格 如const list = [1, 2, 3, 4] function greet (name, options) { … }
17. 不允許連續多行空格
18. 單行代碼塊兩邊加空格
19. 始終將逗號置於行末
20. 點號操作符須與屬性需在同一行
21. 函數調用時，標識符與括號見不留空格 如console.log(‘hello’)
22. 鍵值對冒號與值之間留空白 如const obj = { ‘key’: ‘value’ }
23. 變量和函數名統一使用駝峰命名法： 如
function myFunction () { } const myVar = ‘hello’
字符串拼接操作符 (Infix operators) 之間要留空格 如
const message = 'hello, ’ + name + ‘!’
檢查 NaN 的正確姿勢是使用 isNaN() 如
if (isNaN(price)) { }
合法的字符串和type of 進行比較 如
typeof name === ‘undefined’
24. 數組的注意事項：
1) 不要解構空值
2) 使用數組字面量而不是構造器 如
const { a: { b } } = foo
3) 不要擴展原生對象 如
Object.prototype.age = 21 //不行
4) 對象屬性換行時注意風格
const user = { name: ‘Jane Doe’, age: 30, username: ‘jdoe86’ } // ✓ 正確 const user = { name: ‘Jane Doe’, age: 30, username: ‘jdoe86’ }
5) 不使用不必要的對象值作為計算屬性 如
const user = { name: ‘John Doe’ } //對
6) 避免使用 arguments.callee 和 arguments.caller
7) 嵌套的代碼塊中禁止再定義函數
8) 禁止使用 Function 構造器
const sum = new Function(‘a’, ‘b’, ‘return a + b’) // ✗ 錯誤
9) 自調用匿名函數 (IIFEs) 使用括號包裹
const getName = function () { }() // ✗ 錯誤 const getName = (function () { }()) // ✓ 正確 const getName = (function () { })() // ✓ 正確
10) 使用 Promise 或者 async functions 來實現異步編程
function* helloWorldGenerator() { // ✗ 錯誤
yield ‘hello’;
yield ‘world’;
return ‘ending’;
}
25. 類名注意事項：
1) 類名要以大寫字母開頭
const dog = new Animal() // ✓ 正確
2)避免對類名重新賦值
class Dog extends Mammal { constructor () { super() // ✓ 正確 } }
3)使用 this 前請確保 super() 已調用
class Dog extends Animal { constructor () { this.legs = 4 // ✗ 錯誤 super() } }
4) 禁止多余的構造器
class Car { constructor () { // ✗ 錯誤 super() } }
5) 類中不要定義冗余的屬性
class Dog { bark () {} bark () {} // ✗ 錯誤 }
6) 無參的構造函數調用時要帶上括號
function Animal () {} const dog = new Animal // ✗ 錯誤 const dog = new Animal() // ✓ 正確
7) new 創建對象實例后需要賦值給變量
new Character() // ✗ 錯誤 const character = new Character() // ✓ 正確
8) 用 throw 拋錯時，拋出 Error 對象而不是字符串
throw ‘error’ // ✗ 錯誤 throw new Error(‘error’) // ✓ 正確
9) catch 中不要對錯誤重新賦值
try { // … } catch (e) { e = ‘new value’ // ✗ 錯誤 }
文章就分享到這，歡迎關注“前端大神之路”
