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

时间:2024-03-01 10:07:29

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

NodeJS开发环境

  • 安装NVM

    • 下载安装

      NVM是一个支持多版本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本地环境配置

 

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官网

  • 插件开发

    • 创建插件类

      • 创建一个继承自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(“插件名”,“扩展方法名”)

  • 离线打包

    • 整合

      • 生成完毕后放到前边插件开发的HBuilder-Integrate工程的/assets/apps 目录下

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

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

         

    • 打包/运行