當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

uni-app开发环境配置及混合开发流程

發(fā)布時(shí)間：2023/12/31 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 uni-app开发环境配置及混合开发流程小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

下載安裝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 “<公司郵箱>”
?
配置本地倉(cāng)庫(kù)
git clone http://gitlab.eastcom-sw.com/<組名>/<項(xiàng)目名>.git
?
cd <項(xiàng)目名>
?

前提條件

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

已正確安裝Git開(kāi)發(fā)環(huán)境。
安裝Vue腳手架
npm install -g @vue/cli
驗(yàn)證安裝：vue -V
Vue項(xiàng)目創(chuàng)建、運(yùn)行、編譯打包（創(chuàng)建vue項(xiàng)目才走該步驟，創(chuàng)建nui-app項(xiàng)目跳過(guò)該步驟）
- 新建項(xiàng)目
  vue create <項(xiàng)目名> 或vue ui (圖形接口創(chuàng)建項(xiàng)目)
  ?
- 下載依賴
  cd <項(xiàng)目名>(進(jìn)入項(xiàng)目根目錄)
  ?
  npm install （下載依賴）
  ?
- 運(yùn)行項(xiàng)目
  cnpm run serve
  ?
- 編譯打包
  npm run build
  ?

創(chuàng)建項(xiàng)目vue
create -p dcloudio/uni-preset-vue my-project
?

此時(shí)，會(huì)提示選擇項(xiàng)目模板，初次體驗(yàn)建議選擇 hello uni-app 項(xiàng)目模板

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

進(jìn)入目錄并運(yùn)行
cd my-project
npm run serve
運(yùn)行成功后，控制臺(tái)會(huì)輸出H5網(wǎng)站訪問(wèn)地址

啟動(dòng)chromel瀏覽器并切換為手機(jī)調(diào)試模式，訪問(wèn)如上地址即可體驗(yàn)。

uni-app官網(wǎng)

插件開(kāi)發(fā)
- 準(zhǔn)備
  
  下載HTML5+基座的Android版SDK點(diǎn)擊下載解壓后將HBuilder-Integrate工程導(dǎo)入AndroidStudio.
- 創(chuàng)建插件類
  - 創(chuàng)建一個(gè)繼承自StandardFeature的類，實(shí)現(xiàn)第三方插件擴(kuò)展。
  - 插件類的擴(kuò)展方法
    
    擴(kuò)展方法有兩個(gè)傳入?yún)?shù): IWebview pWebview : 發(fā)起請(qǐng)求的webview JSONArray array : JS請(qǐng)求傳入的參數(shù)
    
    返回值（有同步執(zhí)行返回和異步執(zhí)行返回）：
    - 同步（框架通過(guò)此類方法對(duì)返回值進(jìn)行包裹）
    JSUtil.wrapJsVar("Html5 Plus Plugin Hello1!",true);
    ?
    - 異步
      JSUtil.execCallback(pWebview, cbId, (which==AlertDialog.BUTTON_POSITIVE)?"ok":"cancel", JSUtil.OK, false, false);
      ?
- 關(guān)聯(lián)JS插件名和原生類
  
  在編寫(xiě)擴(kuò)展插件時(shí)需要修改“/assets/data”中dcloud_properties.xml文件，在其中添加JS對(duì)象名稱和Android包的類名對(duì)應(yīng)關(guān)系，SDK會(huì)根據(jù)對(duì)應(yīng)的類名查找并生成相應(yīng)的對(duì)象并執(zhí)行對(duì)應(yīng)的邏輯。
  
  ?
  
  在應(yīng)用的manifest.json文件中還需要添加擴(kuò)展插件的應(yīng)用使用權(quán)限

uni-app調(diào)用插件擴(kuò)展的方法

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

離線打包
- 安裝HBuilderX
- 微信開(kāi)發(fā)工具下載
- 生成項(xiàng)目的本地打包app資源
- 整合
  - 生成完畢后放到前邊插件開(kāi)發(fā)的HBuilder-Integrate工程的/assets/apps 目錄下
  - 在/assets/data下的dcloud_control.xml中修改所需整合的uni-app編譯成的項(xiàng)目id。
    
    (appid和本地打包app資源中的manifest.json文件里邊的id一致)
    
    ?
- 打包/運(yùn)行

轉(zhuǎn)載于:https://www.cnblogs.com/halo-yang/p/10064234.html

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

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