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

深藏阁楼爱情的钟 2021-12-18 20:55 441阅读 0赞

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

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

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

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

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

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

<view style="line-height: 25px;font-size: 15px;">
            <view style="padding: 0 20upx;">
              <text>{
       {questionChioces[0].value}}: </text>
              <radio-group class="radioGroup" @change="radioCheckedChange1" name="">
                <view v-for="(item,index) in questionChioces[2].value" :key="item">
    				<view v-if="chooseStyle == 1">
    					<radio :value='item' :checked="originalSelect[0]==item" />
    					<text> : {
       {item}}</text>
    				</view>
                </view>
              </radio-group>
          </view>

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暂未成功...

[ColorUI-UniApp]: https://ext.dcloud.net.cn/search?q=ColorUI-UniApp
[uni-ui]: https://ext.dcloud.net.cn/search?q=uni-ui