uni-app開發(fā)環(huán)境配置及混合開發(fā)流程

NodeJS開發(fā)環(huán)境

• 安裝NVM

  • 下載安裝

    NVM是一個支持多版本NodeJS的版本管理工具，如果本機已安裝了NodeJS建議先卸載。

    • 下載NodeJS

    • 解壓后直接運行安裝：設置好安裝目錄及后面NodeJs的安裝目錄。

      ?

  • 配置環(huán)境變量

  • ?

    路徑對應你安裝時給定的安裝目錄

  • 驗證安裝

    命令行下執(zhí)行：

    nvm –v

    顯示信息如下：

?　　　　　　

• 安裝NodeJS

  打開命令行操作窗口進行以下步驟

  • 安裝

    npm install <version> [<arch>]

    ?

    <version>表示要安裝的版本; arch參數(shù)表示系統(tǒng)位數(shù)，默認是64位，如果是32位操作系統(tǒng)，需要執(zhí)行命令：nvm install <version> 32

    ?

    特別說明：

    l 查看當前有哪些版本：nvm ls-remote （Window版本可能無此命令）

    l 安裝當前最新穩(wěn)定版本: 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本地環(huán)境配置

• 下載安裝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開發(fā)環(huán)境

• 前提條件

  已正確安裝NodeJS開發(fā)環(huán)境。

  已正確安裝Git開發(fā)環(huán)境。

• 安裝Vue腳手架

  npm install -g @vue/cli

  驗證安裝：vue -V

• Vue項目創(chuàng)建、運行、編譯打包（創(chuàng)建vue項目才走該步驟，創(chuàng)建nui-app項目跳過該步驟）

  • 新建項目

    vue create <項目名> 或vue ui (圖形接口創(chuàng)建項目)

    ?

  • 下載依賴

    cd <項目名>(進入項目根目錄)
    ?
    npm install （下載依賴）

    ?

  • 運行項目

    cnpm run serve

    ?

  • 編譯打包

    npm run build

    ?

創(chuàng)建uni-app項目

• 創(chuàng)建項目vue

  create -p dcloudio/uni-preset-vue my-project

  ?

  此時，會提示選擇項目模板，初次體驗建議選擇 hello uni-app 項目模板

  提示：通過該命令創(chuàng)建項目前提是全局安裝了vue-cli

• 進入目錄并運行

  cd my-project
  npm run serve

  運行成功后，控制臺會輸出H5網(wǎng)站訪問地址

  啟動chromel瀏覽器并切換為手機調試模式，訪問如上地址即可體驗。

nui-app與原生混合開發(fā)

uni-app官網(wǎng)

• 插件開發(fā)

  • 準備

    下載HTML5+基座的Android版SDK點擊下載解壓后將HBuilder-Integrate工程導入AndroidStudio.

  • 創(chuàng)建插件類

    • 創(chuàng)建一個繼承自StandardFeature的類，實現(xiàn)第三方插件擴展。

    • 插件類的擴展方法

      擴展方法有兩個傳入?yún)?shù): IWebview pWebview : 發(fā)起請求的webview JSONArray array : JS請求傳入的參數(shù)

      返回值（有同步執(zhí)行返回和異步執(zhí)行返回）：

      • 同步（框架通過此類方法對返回值進行包裹）

      JSUtil.wrapJsVar("Html5 Plus Plugin Hello1!",true);

      ?

      • 異步

        JSUtil.execCallback(pWebview, cbId, (which==AlertDialog.BUTTON_POSITIVE)?"ok":"cancel", JSUtil.OK, false, false);

        ?

  • 關聯(lián)JS插件名和原生類

    在編寫擴展插件時需要修改“/assets/data”中dcloud_properties.xml文件，在其中添加JS對象名稱和Android包的類名對應關系，SDK會根據(jù)對應的類名查找并生成相應的對象并執(zhí)行對應的邏輯。

    ?

    在應用的manifest.json文件中還需要添加擴展插件的應用使用權限

• uni-app調用插件擴展的方法

  在uni-app的.vue單頁面文件中通過plus.bridge.exec(“插件名”，“擴展方法名”)

• 離線打包

  • 安裝HBuilderX

  • 微信開發(fā)工具下載

  • 生成項目的本地打包app資源

  • 整合

    • 生成完畢后放到前邊插件開發(fā)的HBuilder-Integrate工程的/assets/apps 目錄下

    • 在/assets/data下的dcloud_control.xml中修改所需整合的uni-app編譯成的項目id。

      (appid和本地打包app資源中的manifest.json文件里邊的id一致)

      ?

  • 打包/運行

轉載于:https://www.cnblogs.com/halo-yang/p/10064234.html

總結

以上是生活随笔為你收集整理的uni-app开发环境配置及混合开发流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。