uni-app开发流程二(项目开发)
用了一个礼拜,将之前的一个小程序项目和另一个vueh5项目的核心功能移植到新项目上,到可以正常运行还是走了不少弯路的,下面记录一下。1.我先移植到的是小程序项目,在微信开发者工具运行。这个小程序当时为了追求页面效果,用了colorUI样式ui,在这里我并不想舍弃,但好在,colorUI团队为uni-app开发了一套可用的,兼容多端的样式ui,在ColorUI-UniApp下载地址可以下载...
用了一个礼拜,将之前的一个小程序项目和另一个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的写法,如:
<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暂未成功...
更多推荐
所有评论(0)