uniapp优缺点
优点:
- 一套代码可以生成多端
- 学习成本低,语法是vue的,组件是小程序的
- 拓展能力强
- 使用HBuilderX开发,支持vue语法
- 突破了系统对H5调用原生能力的限制
缺点:
- 问世时间短,很多地方不完善
- 社区不大
- 官方对问题的反馈不及时
- 在Android平台上比微信小程序和iOS差
- 文件命名受限
uniapp的配置文件、入口文件、主组件、页面管理部分
pages.json 配置文件,全局页面路径配置,应用的状态栏、导航条、标题、窗口背景色设置等
main.js 入口文件,主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex,注意uni-app页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在
app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同,如仍希望采用 Vue Router
方式管理路由,可在插件市场搜索 Vue-Router
App.vue 是uni-app的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件。但App.vue本身不是页面,这里不能编写视图元素,也就是没有。
这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalData
应用生命周期仅可在App.vue中监听,在页面监听无效。
pages 页面管理部分用于存放页面或者组件
manifest.json 文件是应用的配置文件,用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录,CLI 创建的工程此文件在 src 目录。
package.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容,在uni-app中是在manifest中配置。
uni-app 和 Vue2 的区别
1、组件/标签的变化
以前是html标签,现在是小程序标签。
- div 改成 view
- span、font 改成 text
- a 改成 navigator
- img 改成 image
- input 还在,但type属性改成了confirmtype
- form、button、checkbox、radio、label、textarea、canvas、video这些还在。
- select 改成 picker
- iframe 改成 web-view
- ul、li没有了,都用view替代
- audio 不再推荐使用,改成api方式,背景音频api文档
- 其实老的HTML标签也可以在uni-app里使用,uni-app编译器会在编译时把老标签转为新标签,比如把div编译成view。但不推荐这种用法,调试H5端时容易混乱。
2、新增手机端常用的新组件
- scroll-view 可区域滚动视图容器
- swiper 可滑动区域视图容器
- icon 图标
- rich-text 富文本(不可执行js,但可渲染各种文字格式和图片)
- progress 进度条
- slider 滑块指示器
- switch 开关选择器
- camera 相机
- live-player 直播
- map 地图
- cover-view 可覆盖原生组件的视图容器
cover-view需要多强调几句,uni-app的非h5端的video、map、canvas、textarea是原生组件,层级高于其他组件。如需覆盖原生组件,比如在map上加个遮罩,则需要使用cover-view组件
3、JS
uni-app的api是参考小程序的,所以和浏览器的js api有很多不同,如
- alert,confirm 改成 uni.showmodel
- ajax axios 改成 uni.request
- cookie、session 没有了,local.storage 改成 uni.storage
- vue-router没有了,改成了 uni.navigateTo 路由与页面跳转
uni-app的js api还有很多,但基本就是小程序的api,把wx.request改为uni.request即可。详见
4、vue,小程序,uni-app的生命周期 连接
** vue:**
- beforeCreate(创建前) 在实例初始化之前被调用
- created(创建后) 在实例创建完成后被立即调用
- beforeMount(载入前,挂载) 在挂载开始之前被调用
- mounted(载入后) 挂载到实例上去之后调用。详见 (opens new window)注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTick
- beforeUpdate(更新前) 数据更新时调用,发生在虚拟 DOM 打补丁之前
- updated(更新后) 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子
- beforeDestroy(销毁前) 实例销毁之前调用。在这一步,实例仍然完全可用
- destroyed(销毁后) Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
** 小程序/uni-app: **
1. onLoad:首次进入页面加载时触发,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
2. onShow:加载完成后、后台切到前台或重新进入页面时触发
3. onReady:页面首次渲染完成时触发
4. onHide:从前台切到后台或进入其他页面触发
5. onUnload:页面卸载时触发
6. onPullDownRefresh:监听用户下拉动作
7. onReachBottom:页面上拉触底事件的处理函数
8. onShareAppMessage:用户点击右上角转发
rpx、px、em、rem、%、vh、vw的区别
rpx 相当于把屏幕宽度分为750份,1份就是1rpx
px 绝对单位,页面按精确像素展示
em 相对单位,相对于它的父节点字体进行计算
rem 相对单位,相对根节点html的字体大小来计算
% 一般来说就是相对于父元素
vh 视窗高度,1vh等于视窗高度的1%
vw 视窗宽度,1vw等于视窗宽度的1%
vue、uni-app、小程序的页面传参方式区别
vue传参
一、 vue可以通过标签router-link跳转传参,通过path+路径,query+参数
二、也可以通过事件里的this.$router.push({})跳转传参
小程序/uniapp传参
通过跳转路径后面拼接参数来进行跳转传参
//示例
// navigate.vue页面接受参数
onLoad: function (option) {
const item = JSON.parse(decodeURIComponent(option.item));
}