​​​​​uniapp-开发流程&常见问题​

​

 

 

 

1.   首先需下载HBuilderX编辑器 地址 HBuilderX-高效极客技巧

2. uni-app支持通过 可视化界面 vue-cli命令行 两种方式快速创建项目(可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。)

3. 创建uni-app
   

   

    

4.   运行uni-app

 

 

5. 如果运行到小程序 需要在如下配置小程序安装路径(支付宝,等其他小程序同理)

 

6. 打包安卓和ios (会生成对应的apk和ios包)

 

7. 打包H5以及发行小程序

 

8. 运行到各端(包括H5,小程序,内置浏览器,手机模拟器) 

 

 8.1  运行到浏览器即在浏览器实时编译调试

 8.2  运行到手机 手机跟电脑连接, 运行的时候会自定安装一个Hbuilder到手机上 手机上需要打开开发者选项 以及USB调试

注意事项

 

1.  条件编译,因为一套代码可以打包到多端,条件编译可以实现不同端,实现不同的代码,也就是条件判断  uni-app官网

    

    

2.  原生导航栏开发(单独去除原生导航栏)

   {  
       "path" : "pages/log/log",  
       "style" : {  
           "navigationStyle":"custom"  
       }  
   }

   

3. 传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。 如下：

 

4.  内置css环境变量

 以下样式为手机状态栏高度

 

 

 

更多常见问题 FAQ | uni-app官网