黑马程序员技术交流社区

标题: 微信小程序的uniapp与vue的区别 [打印本页]

作者: charcoal 时间: 2021-4-18 09:27
标题: 微信小程序的uniapp与vue的区别
本帖最后由 charcoal 于 2021-4-19 18:37 编辑

1. 标签的区别：
uni使用小程序的标签，vue使用web端的标签
标签名变化的：

添加一点：vue中的div在小程序中使用view代替，出于降低h5应用向uni-app迁移成本的考虑，写成div、span也可以运行在app和小程序上，因为uni-app编译器会把这些HTML标签编译为小程序标签。但仍然建议养成新习惯

标签名未变的：
form, button,checkbox,label,textarea,video

不推荐使用的：
不内置audio标签，改成api方式由外部引入。
老的html标签是可以使用的，但为了兼容性，不做考虑。

css方面：
uni-app默认为rpx。

在uniapp中写后端接口的时候测试的时候，可以将校验合法域名给取消勾选，防止报错，但是上线的时候需要在微信小程序的开发平台，配置合法的域名。

2. 新增手机端常用组件

scroll-view:可区域性公董视图容器
swiper:可滑动区域视图容器
icon图标
rich-text：富文本
progress:进度条
slider:滑块指示器
switch:开关选择器
progress:进度条
camera:照相机
map:地图
cover-view:可覆盖原生组件的视图容器。 cover-view需要多强调几句，uni-app的非h5端的video、map、canvas、textarea是原生组件，层级高于其他组件。如需覆盖原生组件，比如在map上加个遮罩，则需要使用cover-view组件

3. js：

uniapp的api是参考小程序的，因而与浏览器端的api有所不同

cookie、session在uni不被支持
在不同客户端，支持条件编译，可以无限制使用各端独有的api，如果有小程序基础，可以直接将“wx.*” 改为 “uni.*”

4. 路由：

uni不支持vue-router,uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径和页面样式。类似的小程序在app.json中配置页面路由相同。

5.生命周期

小程序的生命周期分为两种：

6.编译的语法不一

在vue中可以使用npm run dev  或者npm run serve
但是在nuiapp中  需要使用  npm run  dev:mp-weixin  或者  npm run serve:mp-weixin

7.其他的一些特殊情况
默认情况下，小程序不支持npm，在使用npm之前最好进行npm构建  在工具选项栏下的npm构建，点击即可
一般情况下不在uniapp中使用v-show，因为在uniapp中会出现初始值不生效的问题，故一般使用v-if

手机页面与小程序一样，overflow：scroll 是有问题的，它容易与页面滚动起冲突，在小盒子设置滚动的时候，会造成页面的滚动，小程序中提供了专门实现区域滚动的组件
scroll-view  该方法的使用需要直接在需要进行滚动的标签内部设置属性 scroll-y（竖直滚动）scroll-x（横向滚动）  或者使用swiper组件进行设置滚动的距离为滚动多少，就移动多少，或者使用iscroll 组件

在小程序中使用键盘监听的时候，有专门的监听事件，我们平时的监听事件的方法在小程序中并不使用，例如：在pc端可以使用.enter修饰符进行enter键的修饰，但是在小程序中我们需要对input注册@confirm事件，进行虚拟键盘的确认（或者完成，或者搜索的按键）进行监听

在uniapp中使用navigateTo（{path:''}）进行路由跳转，此方法会累加路由，如果返回会返回之前跳转的页面，redirectTo会在跳转过后，删掉之前一个跳转到的路由，reLanch会在跳转页面后删除掉之前所有的路由历史，switchTab会切换当前的下方得tab导航。

通过onLoad函数可以获取地址中携带的参数，vue可以通过this.$router.query获取

1060535-20181124095517830-1894523015.png (32.04 KB, 下载次数: 33)

2.png (70.9 KB, 下载次数: 27)

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2