国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

weex踩坑之旅第一彈 ~ 搭建具有入口文件的weex腳手架

jk_v1 / 2004人閱讀

摘要:要想用好必須對基礎(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

相關(guān)文章

  • weex踩坑之旅第二彈 ~ 在weex中集成vue-router

    摘要:也就是說在中,我們的代碼是要在環(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...

    tyheist 評論0 收藏0
  • 踩坑--- 基于釘釘Weex微應(yīng)用開發(fā)起手式(其實(shí)寫完發(fā)現(xiàn)變成Weex相關(guān)資料匯總了)

    摘要:問題,你可以在中文討論板塊提交問題,地址。文字展現(xiàn)必須使用標(biāo)簽關(guān)于端的點(diǎn)透事件需要在上層視圖上加上,如果上層視圖有事件,多加一個中間層,把加在空事件視圖上關(guān)于事件注意僅支持和,暫不支持。事件會在頁面就要關(guān)閉時被觸發(fā)。 好吧,我知道你來看這個文章,一定是遇到坑了,所以,把這幾個放在最開始吧 現(xiàn)在,如果你的團(tuán)隊的技術(shù)棧是react,請嘗試這個吧,跟react很像,如果你的團(tuán)隊一直使用rea...

    zhouzhou 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<