用了一个礼拜,将之前的一个小程序项目和另一个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暂未成功...

Logo

前往低代码交流专区

更多推荐