摘要:要想用好必須對基礎(chǔ),體系,打包工具有較深的了解對,有了解。官方提供的腳手架不能指定入口文件,如果我們想要在項目中使用,沒有入口文件將會變得比較復(fù)雜。那么,我們應(yīng)該如何使得當(dāng)前項目具有入口文件呢答案是只能修改文件。
寫在前面的話:
注意!該文檔是2017年年底的文章,那個時候weex還有很多問題,現(xiàn)在weex已經(jīng)全面更新,文檔也比較全。下面的講解可能不太適應(yīng)新的weex框架,后面我會再立貼講解。謝謝各位關(guān)注。 weex官方文檔不完善,在整個實(shí)施過程中遇到過很多坑,中途幾次想放棄,總是有些不甘心。攻堅克難,總也是會有一些收獲,先將收獲進(jìn)行分享也或是記錄,防止忘記。要想用好weex必須對es5/es6基礎(chǔ),vue體系,打包工具webpack有較深的了解;對ios,android有了解。
官方提供的weex腳手架不能指定入口文件,如果我們想要在項目中使用vuex,vue-router,沒有入口文件將會變得比較復(fù)雜。那么該如何搭建具有入口文件的腳手架呢?首先,我們先把官方提供的腳手架使用一下,然后再其基礎(chǔ)上進(jìn)行修改
一. 初始化weex項目
$ weex init helloweex
二. 安裝依賴包
$ cd helloweex $ npm install 或者可以使用淘寶鏡像安裝 $ cnpm install **注意!如果使用npm安裝依賴,建議先手動創(chuàng)建node_modules目錄再進(jìn)行安裝,避免后期出現(xiàn)權(quán)限不足的問題**
三. 在瀏覽器中進(jìn)行測試
注意!在瀏覽器中顯示成功并不意味著在本地就可以顯示成功!因為這是兩個不同的執(zhí)行環(huán)境。 $ npm run serve
四. 此時會遇到第一個坑
原因:
https://www.npmjs.com/package/uglifyjs-webpack-plugin 解決方案: 1)安裝 uglifyjs-webpack-plugin $ cnpm i -D uglifyjs-webpack-plugin 2) 應(yīng)用 const UglifyJsPlugin = require("uglifyjs-webpack-plugin") module.exports = { plugins: [ new UglifyJsPlugin() ] }
3) 重新部署,不再報錯!
五. 模擬器上運(yùn)行
如果之前步驟可以完成,只能說明當(dāng)前代碼在瀏覽器上可以執(zhí)行,能不能本地運(yùn)行還需要再進(jìn)行測試。要想本地測試必須安裝模擬器(ios或android),本文章不提供具體的安裝過程,如有需要,請自行查看其它文章。 本章以ios環(huán)境為例進(jìn)行測試 依次執(zhí)行如下命令 1) 安裝ios平臺 $ weex platform add ios
2) 安裝依賴 $ cd platforms/ios $ pod install
3) 運(yùn)行 $ cd ../.. $ weex run ios (次過程較慢,需等待一會) 4) 選擇運(yùn)行環(huán)境后啟動模擬器
六. 編寫代碼
查看webpack.config.js得知會,該腳手架會根據(jù)src下vue文件產(chǎn)生一個對應(yīng)的.js文件存放到demo目錄下,但是傳統(tǒng)的vue開發(fā),我們都希望有個入口文件(main.js或者entry.js),然后在該文件中導(dǎo)入其他模塊,進(jìn)行頁面的總體配置等操作。
那么,我們應(yīng)該如何使得當(dāng)前項目具有入口文件呢?答案是只能修改webpack.config.js文件。
1)添加入口文件配置
2) 刪除多余配置信息 刪除getEntryFileContent函數(shù) 刪除walk函數(shù) 刪除walk() walk函數(shù)的調(diào)用
3) 在src目錄下添加主vue,App.vue
4) 在src目錄下添加入口文件entry.js,并且刪除temp目錄
5) 在瀏覽器中進(jìn)行測試 $ npm run serve
6) 在ios模擬器上進(jìn)行測試 $ weex run ios
7) 如果發(fā)現(xiàn)打包后的文件不叫index.js可以修改webpack.config.js
8)解決頁面無法覆蓋整個屏幕的問題 需要在原生代碼中進(jìn)行簡單的修改
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/90426.html
摘要:也就是說在中,我們的代碼是要在環(huán)境中運(yùn)行。而在中,是沒有等以及的,即所有的框架都是不可以使用的。比如相關(guān)組件,相關(guān)組件,等都不能在中引用。是可以在中使用的。 接著第一彈講,我們已經(jīng)搭建好一個屬于自己的weex項目了,然后如何開發(fā)呢?由于之前項目中都是采用vue全家桶進(jìn)行開發(fā),路由使用vue-router插件,狀態(tài)管理使用vuex,Ajax前后臺交互使用axios,圖標(biāo)庫使用font-a...
摘要:問題,你可以在中文討論板塊提交問題,地址。文字展現(xiàn)必須使用標(biāo)簽關(guān)于端的點(diǎn)透事件需要在上層視圖上加上,如果上層視圖有事件,多加一個中間層,把加在空事件視圖上關(guān)于事件注意僅支持和,暫不支持。事件會在頁面就要關(guān)閉時被觸發(fā)。 好吧,我知道你來看這個文章,一定是遇到坑了,所以,把這幾個放在最開始吧 現(xiàn)在,如果你的團(tuán)隊的技術(shù)棧是react,請嘗試這個吧,跟react很像,如果你的團(tuán)隊一直使用rea...
閱讀 1904·2021-11-09 09:46
閱讀 2486·2019-08-30 15:52
閱讀 2445·2019-08-30 15:47
閱讀 1320·2019-08-29 17:11
閱讀 1746·2019-08-29 15:24
閱讀 3501·2019-08-29 14:02
閱讀 2442·2019-08-29 13:27
閱讀 1199·2019-08-29 12:32