一. 搭建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. 通過模板快速構建界面.