NodeJS開發環境
-
安裝NVM
-
下載安裝
NVM是一個支持多版本NodeJS的版本管理工具,如果本機已安裝了NodeJS建議先卸載。
-
下載NodeJS
-
解壓后直接運行安裝:設置好安裝目錄及后面NodeJs的安裝目錄。
-
-
配置環境變量
-
路徑對應你安裝時給定的安裝目錄
-
驗證安裝
命令行下執行:
nvm –v
顯示信息如下:
-
-
安裝NodeJS
打開命令行操作窗口進行以下步驟
-
安裝
npm install <version> [<arch>]
<version>表示要安裝的版本; arch參數表示系統位數,默認是64位,如果是32位操作系統,需要執行命令:nvm install <version> 32
特別說明:
l 查看當前有哪些版本:nvm ls-remote (Window版本可能無此命令)
l 安裝當前最新穩定版本: nvm install stable 或 nvm install stable 32
l 查看已安裝的版本:nvm ls
l 切換Node版本: nvm use <版本>
驗證及查看當前安裝的node及npm版本:
node -v
npm -v -
安裝淘寶鏡像(可選)
npm install cnpm -g --registry=https://registry.npm.taobao.org
安裝成功后使用cnpm命令代替npm
-
Git本地環境配置
-
下載安裝Git
in64: https://github.com/git-for-windows/git/releases/download/v2.19.1.windows.1/Git-2.19.1-64-bit.exe
Win32: https://github.com/git-for-windows/git/releases/download/v2.19.1.windows.1/Git-2.19.1-32-bit.exe
-
Git全局配置
git config –global user.name “<姓名>”
git config –global user.email “<公司郵箱>” -
配置本地倉庫
git clone http://gitlab.eastcom-sw.com/<組名>/<項目名>.git
cd <項目名>
Vue開發環境
-
前提條件
已正確安裝NodeJS開發環境。
已正確安裝Git開發環境。
-
安裝Vue腳手架
npm install -g @vue/cli
驗證安裝:vue -V
-
Vue項目創建、運行、編譯打包(創建vue項目才走該步驟,創建nui-app項目跳過該步驟)
-
新建項目
vue create <項目名> 或vue ui (圖形接口創建項目)
-
下載依賴
cd <項目名>(進入項目根目錄)
npm install (下載依賴)
-
運行項目
cnpm run serve
-
編譯打包
npm run build
-
創建uni-app項目
-
創建項目vue
create -p dcloudio/uni-preset-vue my-project
此時,會提示選擇項目模板,初次體驗建議選擇
hello uni-app
項目模板提示:通過該命令創建項目前提是全局安裝了vue-cli
-
進入目錄並運行
cd my-project
npm run serve運行成功后,控制台會輸出H5網站訪問地址
啟動chromel瀏覽器並切換為手機調試模式,訪問如上地址即可體驗。
nui-app與原生混合開發
-
插件開發
-
准備
下載HTML5+基座的Android版SDK點擊下載解壓后將HBuilder-Integrate工程導入AndroidStudio.
-
創建插件類
-
創建一個繼承自StandardFeature的類,實現第三方插件擴展。
-
插件類的擴展方法
擴展方法有兩個傳入參數: IWebview pWebview : 發起請求的webview JSONArray array : JS請求傳入的參數
返回值(有同步執行返回和異步執行返回):
-
同步(框架通過此類方法對返回值進行包裹)
JSUtil.wrapJsVar("Html5 Plus Plugin Hello1!",true);
-
異步
JSUtil.execCallback(pWebview, cbId, (which==AlertDialog.BUTTON_POSITIVE)?"ok":"cancel", JSUtil.OK, false, false);
-
-
-
關聯JS插件名和原生類
在編寫擴展插件時需要修改“/assets/data”中dcloud_properties.xml文件,在其中添加JS對象名稱和Android包的類名對應關系,SDK會根據對應的類名查找並生成相應的對象並執行對應的邏輯。
在應用的manifest.json文件中還需要添加擴展插件的應用使用權限
-
-
uni-app調用插件擴展的方法
在uni-app的.vue單頁面文件中通過plus.bridge.exec(“插件名”,“擴展方法名”)
-