uni-app开发流程二（项目开发）

用了一个礼拜，将之前的一个小程序项目和另一个vueh5项目的核心功能移植到新项目上，到可以正常运行还是走了不少弯路的，下面记录一下。

1.我先移植到的是小程序项目，在微信开发者工具运行。

这个小程序当时为了追求页面效果，用了colorUI样式ui，在这里我并不想舍弃，但好在，colorUI团队为uni-app开发了一套可用的，兼容多端的样式ui，在ColorUI-UniApp下载地址 可以下载。

2.早官方demo的uniTestapp项目里有很多可以拷贝的东西。

在uniTestapp项目-common-uni.css要移过来，在app.vue里引用；

在uniTestapp项目-template.h5.html要移过来，放在同样位置，并点击manifest.json-h5配置修改index.html模板路径为template.h5.html;

3.官方推荐的ui框架，能用就用，不能用就该源码，都是开源可见的，uni-ui下载地址 ；

4.在app.vue和pages下的vue文件里的生命周期，是和小程序一样的，如：onLaunch，onShow，onHide

在components下的官方和自己写的自定义组件里，生命周期是vue2.0的写法，如mounted()

另外在页面和组件里的template里，都是vue2.0的写法，如：

      
        
          {{questionChioces[0].value}}: 
          
            
				
					
					 : {{item}}
				
            
          
      

5.在package.json的dependencies可以配置你想要插件，如"@dcloudio/uni-ui": "0.0.8",之后再项目地址下npm install即可；

6.像素px可用，如果要转换upx，只要在manifest.json里配置下面"transformPx" : true,

//是否转换项目的px，为true时将px转换为upx，为false时，px为传统的实际像素；

7.将代码从gitlab拉取之后，npm install安装依赖，用git add.发现会将node_modules里也加入Git，

解决方案：在项目地址命令行echo. >.gitignore，会发现新建了一个gitignore.txt文件，打开，添加node_modules，保存，就可以忽略了；

当然了，很多问题还没有遇到过，毕竟我的这个项目是做题+定时的h5和小程序，没有像支付那些功能,不过这个功能在官方文档都有提供，像小程序一样。

最后，今天试了下app的功能：

打开android的开发者权限和usb调试，链接电脑，

点击运行-运行到手机和模拟器，会监测到你的手机型号，点击运行，会在你的手机上安装一个Hbulder,就可以看原生效果了；

ios暂未成功...