前言:
這個(gè)小程序框架已經(jīng)出現(xiàn)了很久了番捂,而且自從微信小程序出現(xiàn)之后,流心觀察都可以發(fā)現(xiàn)江解,百度小程序设预,支付寶小程序,字節(jié)跳動(dòng)小程序犁河,QQ 小程序鳖枕,京東小程序也越來越多,也越來越有用了桨螺。所以宾符,掌握一個(gè)多端統(tǒng)一開發(fā)解決方案是一個(gè)很重要的事情。
介紹:
官網(wǎng)文檔:http://taro-docs.jd.com/taro/docs/GETTING-STARTED
GitHub地址:https://github.com/nervjs/taro
Star:27.6k
Taro 是由京東 - 凹凸實(shí)驗(yàn)室打造的一套開放式跨端跨框架解決方案灭翔。支持使用 React/Vue/Nerv 等框架來開發(fā)微信/京東/百度/支付寶/字節(jié)跳動(dòng)/ QQ 小程序/H5 等應(yīng)用魏烫。
步驟
Taro 項(xiàng)目基于 node,請(qǐng)確保已具備較新的 node 環(huán)境(>=12.0.0)
檢查node 版本
1:安裝node
端開發(fā)框架和環(huán)境都是需要 Node.js 肝箱,先安裝node.js開發(fā)環(huán)境哄褒,vue的運(yùn)行是要依賴于node的npm的管理工具來實(shí)現(xiàn),下載https://nodejs.org/en/煌张,安裝完成之后读处,打開cmd開始輸入命令。(我用的是win10系統(tǒng)唱矛,所以需要管理員權(quán)限罚舱,右鍵點(diǎn)擊以管理員身份運(yùn)行cmd)井辜,不然會(huì)出現(xiàn)很多報(bào)錯(cuò)。
2:查看node的版本號(hào)
下載好node之后管闷,以管理員身份打開cmd管理工具粥脚,,輸入 node -v 包个,回車刷允,查看node版本號(hào),出現(xiàn)版本號(hào)則說明安裝成功碧囊。
輸入命令: node -v
3:安裝
CLI 工具安裝树灶,打開cmd,右鍵以管理員身份運(yùn)行
cnpm install -g @tarojs/cli
4:項(xiàng)目初始化
使用命令創(chuàng)建模板項(xiàng)目
先進(jìn)入d盤糯而,然后執(zhí)行創(chuàng)建命令
taro init myApp
然后一路回車鍵(如果你不想使用TypeScript的話天通,可以在是否需要使用 TypeScript的這一行里面選擇No)
在創(chuàng)建完項(xiàng)目之后,Taro 會(huì)默認(rèn)開始安裝項(xiàng)目所需要的依賴熄驼,安裝使用的工具按照 yarn>cnpm>npm 順序進(jìn)行檢測(cè)像寒,一般來說,依賴安裝會(huì)比較順利瓜贾,但某些情況下可能會(huì)安裝失敗诺祸,這時(shí)候你可以在項(xiàng)目目錄下自己使用安裝命令進(jìn)行安裝
打開D盤查看一下吧,可以看見新建的項(xiàng)目目錄和自動(dòng)安裝的依賴祭芦,我這里是成功的喲筷笨。
如果依賴沒有自動(dòng)安裝成功,那就手動(dòng)輸入一下,我一般習(xí)慣使用這個(gè)命令cnpm install
5:運(yùn)行
接下來的操作就是運(yùn)行一下啦,Taro 需要運(yùn)行不同的命令龟劲,將 Taro 代碼編譯成不同端的代碼奥秆,然后在對(duì)應(yīng)的開發(fā)工具中查看效果。
我這里是編譯成微信小程序微信小程序編譯預(yù)覽及打包咸灿,要使用的命令,是這個(gè)樣子的:
$ npm run dev:weapp
$ npm run build:weapp
首先cd進(jìn)入了我的項(xiàng)目里面侮叮,然后運(yùn)行
這里就成功的看到了
如果你要編譯成避矢, 百度小程序,支付寶小程序囊榜,字節(jié)跳動(dòng)小程序审胸,QQ 小程序,京東小程序卸勺,可以直接去官方給的文檔上查看一下命令喲