uni-app開發環境配置及混合開發流程

uni-app開發環境配置及混合開發流程

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與原生混合開發

uni-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(「插件名」，「擴展方法名」)

• 離線打包

  • 安裝HBuilderX

  • 微信開發工具下載

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

  • 整合

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

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

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

       

  • 打包/運行