❶ Taro填坑記
由於之前在Vue項目中寫過一套CSS,於是便照搬丟到了Taro的項目當中,編譯之後在瀏覽器中發現px居然被自動轉換成了rem,在微信小程序中運行之後亦是如此,於是將項目查了個底朝天,確定是Taro搞的鬼,後來又懷疑是postcss造成的原因,但苦於小弟前端的菜鳥級別水平,不能確定也找不到修改的地方,最後還是在某度看到了一位老兄的回答幫好搏助我解決了這個問題。
按照理解都是 src='圖片地址' 即可,後來發現圖片一直顯示不出來,那麼只能懷疑地址不正確或者src的使用不正確了。最後發現本地圖片帆兆的載入必須使用 src={require('圖片地址')} 的形式才能顯示出來。
准確地說也不算是坑,但是還是有必須提一下,因為很容易漏寫
我以為的寫法:
正確的寫法:
其友轎祥實是受app.jsx的影響
大家細品吧
❷ taro 打包命令詳細使用教程
taro-cli
安裝好 NPM 或 Yarn 後,就可以全局安裝 Taro 開發工具 @tarojs/cli 了。
如果你是使用 NPM 安裝,使用如下命令:
$ npm install -g @tarojs/cli
taro -V 列印版本號
taro init myapp 創建模板項目
微信小程序編譯預覽及打包:
# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 僅限全局安裝
$ taro build --type weapp --watch
$ taro build --type weapp
# npx 用戶也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp
網路小程序編譯預覽及打包:
# npm script
$ npm run dev:swan
$ npm run build:swan
# 僅限全局安裝
$ taro build --type swan --watch
$ taro build --type swan
# npx 用戶也可以使用
$ npx taro build --type swan --watch
$ npx taro build --type swan
支付寶小程序編譯預覽及打包:
# npm script
$ npm run dev:alipay
$ npm run build:alipay
# 僅限全局安裝
$ taro build --type alipay --watch
$ taro build --type alipay
# npx 用戶也可以使用
$ npx taro build --type alipay --watch
$ npx taro build --type alipay
H5 編譯預覽及打包:
# npm script
$ npm run dev:h5
# 僅限全局安裝
$ taro build --type h5 --watch
# npx 用戶也可以使用
$ npx taro build --type h5 --watch
React Native
React Native 端運行需執行如下命令,React Native 端相關的運行說明請參見 React Native 教程。
# npm script
$ npm run dev:rn
# 僅限全局安裝
$ taro build --type rn --watch
# npx 用戶也可以使用
$ npx taro build --type rn --watch
更新 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 相關的依賴,這個需要在你的項目下執行。
$ taro update project
❸ (1)taro每日n坑---taro init myapp 在選擇默認模板的時候報錯
taro init myapp
網路搜不到類似的問題,
在官方issue上搜氏敗到明搭一樣的問題, but沒有解決方案
總結原因是默認模板下缺少.npmrc文件,導致模板的時候報錯了,
出現此問題時本人的taro版本為1.3.9
npm install -g @tarojs/cli
想更換版本,又報錯如下激核拿
cnpm install -g @tarojs/cli
此時taro的版本變成了3.0.7
再執行 taro init appname 即可
❹ taro-ui 與 taro 的版本問題
使用 taro-hooks的模板生成了一個項目,然後手動安裝山激了 taro-ui.
相應依賴:
執行褲鏈
控制台報錯:
網上查詢了下,說是 taro 的版本逗純襪與 taro-ui 版本不兼容。
解決方案
taro 升級後的版本為 ^3.0.0-alpha.10 再編譯則正常通過。
❺ 關於小程序的坑之Taro框架
公司產品試水小程序,做了幾個獨立功能模塊的demo試下可行性,主鍵察閉要是這個框架和react語法基本相同,避免大家學習成本過高,以下記錄幾個容易粗心的點和坑,maybe很弱智。
由於日常用的axios請求參數的頭是headers,復制粘貼大法引發了一個弱智bug,該bug會引發 content-type 設置失效,變成默認的 application/json 。
微信模板語言中,監聽自定義組件事件的稿裂方法與監聽基礎組件事件的方法完全一致:
因此Taro中監聽自定義組沒迅件事件的方法要寫成
渲染成微信小程序模板語言時變成
以自定義導航為例:()
使用方法:
例:res.model在iPhone X模擬器輸出"iPhone X",在真機輸出 "iPhone X (GSM+CDMA)<iPhone10,3>" ,所以此處用indexOf而不能用 "==="
Taro.request()支持get和post請求,通過非同步的方式進行回調。主要有3個回調方法
所以,對statusCode !== 200 的情況,都應在success回調方法中處理,可以寫個攔截器,在微信原生方法wx.request()中存在相同情況。
npm提示某某包undefined,一個一個重新安超浪費時間,目前我的解決辦法是退出編譯後刪掉渲染成微信小程序模板語言的dist文件夾和node_moles文件夾,然後重新運行 npm i 和 npm run dev:weapp
還遇到挺多問題。。想不起來了。。待更新吧。。。
下水了,後續問題記錄口以看這里 https://www.jianshu.com/p/5a6fd7fdaf4f
❻ Taro3.4開發微信小程序示例
安裝腳手架
初始化如下圖,選擇Vue3、Less、vue3-NutUI模板:
安裝後可能會出現一些告警提示,並提示npm audit ,如下敏芹圖
如果忽略它,在run dev時會報錯,並且報錯提示還比較難懂。
這個報錯的原因是taro的版本不一致所引起,需要運行 npm audit fix 進行修復,修復後再運行就正常了。枝梁
3.1 引入組件
3.2 頁面使用組件
NUTUI幾個有意思的組件,如table, card,fixednav
4.1 init初始化
app.js中初始化,輸入雲開發ID
4.2 編寫雲函數(另說明)
4.3調用雲函數
用於多端展示,taro應該是有其之橋搭畢長處的。如果僅是用於微信小程序開發,不如用微信開發者工具。
❼ Taro 編譯成h5遇到的一些問題
2.Failed to construct 'Image': Please use the 'new' operator, this DOM object constructor cannot be called as a function
像上面這種錯誤都是罩拿顫使用物敗了元素,但沒有import到文件導致。敏尺
❽ 記taro編譯微信小程序失敗的坑
該文檔寫於2021.6.25
在cmd命令行裡面查看 taro --version 沒有任何輸出
使用Git Bash Here查看, No such file or directory
這就表示taro沒裝上...
在cmd裡面查看
在Git Bash Here裡面
各種錯誤,各種依賴問題,報錯最多的是:
這一堆也不知道是啥,網路很多說法是什麼版本不統一,使勁升版本,降版本,都不行
終於看看了官方文檔,再回過頭去看自己的項目運行明白了
(1)項目依賴的taro版本與運行項目時候不一致
官方文檔說:
(2)taro多版本共存
那就使用taro命令!!!