【快速開發App實戰】BUI高仿網易新聞App系列1、搭建App開發環境和工做空間

一. 搭建App開發環境和工做空間

前言

咱們的目標是要作一個真實的案例, 着重經過BUI框架及其相關工具的使用, 結合原生打包平臺, 幫助你們理解一個App的開發過程. 以最新網易新聞的App爲例, 儘可能只描述過程, 細節能夠自行完善, 高仿得太過以假亂真, 會有侵權問題 ^_^. 文章會分爲多個小章節, 知識點逐個講解的方式, 天天掌握一點點, 進步一點點. 文章首發都會在bui神速訂閱號, 謝謝關注.

注意: 最終開發好的App, 僅供​學習交流使用, 因爲只獲取到了網易新聞的部分接口, 部份內容依然爲測試數據. 掃二維碼下載

BUI-163
大小: 6.26M

網易新聞

圖片及工程已經放到github上, 你們能夠拿下來本身按本身的理解先作. BUI163案例工程源碼

1.1 安裝軟件和環境

整個開發環境會涉及到如下內容.

1. vscode編輯器;
2. bui-fast快速書寫插件(不用記住控件的結構,只須要輸入控件的名字,便會生成對應的初始化);
3. node 環境
4. buijs cli工具 (構建工程模板工具);
5. Chrome 瀏覽器;

vscode 編輯器

?> 優秀, 沒什麼好說的, 點擊下載安裝.

bui-fast

?> bui-fast 是編輯器插件, 針對bui控件的代碼片斷, VSCode安裝後點擊進入安裝 , 更多編輯器請自行查看bui-fast文檔說明

node環境

?> 咱們推薦下載安裝, 目前咱們使用的是node12版本.

查看npm 版本號.

npm -v

安裝cnpm

安裝完成之後, npm的包在國外,安裝依賴會比較慢, 咱們推薦使用淘寶的cnpm.

• Windows用戶

右鍵使用管理員打開終端, windows記得關閉防火牆,360等阻止系統權限的東西.

npm install -g cnpm --registry=https://registry.npm.taobao.org

• Mac用戶

使用 sudo 命令須要輸入用戶密碼.

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

buijs cli工具

非必須, 可是很好用, 能夠用來快速構建最新的庫跟模板. 安裝完淘寶的cnpm之後, 執行如下命令. buijs-cli文檔

• Windows用戶

右鍵使用管理員打開終端

cnpm -g buijs

• Mac用戶

使用 sudo 命令須要輸入用戶密碼.

sudo cnpm -g buijs

!> 後續的命令均以mac用戶爲準, 再也不區分不一樣系統的安裝了.

Chrome 安裝

?> 用於PC上的效果預覽及數據調試, 請自行下載安裝.

1.2 構建工程

咱們的目標是要使用dcloud平臺打包, 構建的工程帶上對應的平臺. 經過下載的單頁工程 都是 webapp工程, 對比如下就會發現 index.js,bui.js 裏面的內容是不同的, 具體哪裏不同, 咱們後面再說明.

buijs create 163 -p dcloud

163爲自定義的工程名. buijs使用說明

建立成功的工程預覽圖

目錄的規範說明, 請查看文檔.

1.3 安裝依賴

cd 163
cnpm install

一些紅色的提醒能夠忽略, 裏面有些依賴比較老舊, 但並無用到, 不會有影響.

1.4 運行預覽

npm run dev

若是沒有報錯, 會自動生成一個端口,並起一個服務, 自動打開chrome瀏覽器, 控制檯還會有生成的二維碼, 便於手機掃碼遠程調試. 本來的163目錄下, 會多出一個dist的目錄, 可能還會有 .temp 的目錄, 這些都不用管, 咱們的編輯都針對src目錄便可.

到這裏環境的安裝就基本OK了.

1.5 額外技巧1. 本地文件調試

若是不經過npm run dev, 直接打開163/src/index.html是看不到效果的, 這是由於chrome的本地文件安全限制, 百度下如何打開跨域的chrome, 直到看到如下提示, 表明已經跨域了.

1.6 額外技巧2. 打造App工做空間

有沒有發現,若是經過前面的方式來構建工程,安裝依賴, 每次新建一個App意味着要安裝屢次, 網絡慢不說, 佔用的空間也是至關大, 好在bui的工程有對這種node_modules的複用作了考慮.

首先, 建立一個工做空間的目錄, 而後把裏面的src目錄刪掉.

# 建立工做空間目錄
buijs create workspace
# 進入工做空間目錄
cd workspace
# 安裝依賴
cnpm install
# 刪除src目錄
rm -rf src

這時, workspace 只剩下 app.json,package.json,gulefile.js 3個文件.

在workspace 目錄下繼續建立163的工程

# 建立163工程
buijs create 163 -p dcloud
# 預覽163工程
npm run dev-163

1.7 效果預覽

下一節, 2. 經過模板快速構建界面.