18 年时候有幸接触到 uniapp , 写了一篇 《uni-app 入门到精通》 ，由于一些原因，该方案并没有执行，该项目一系列文章也就没有再写下去，所以遭受到了许多人评论的吐槽，到如今公司项目的需求又要根据 uniapp 写 H5 嵌入到 app 中，所以想根据项目实际开发分享一下，有兴趣的伙伴可以参考和吐槽。
这一篇文章主要分享一下内容
uniapp 模板项目有两种初始化方式
由于无法舍弃 VSCode ，我们采用 vue-cli 来初始化项目， HBuilderX 大家可以参照官方文档
这种方式是可以通过 vue 脚手架命令指定模板，这个是 dcloudio 的官方提供模板
我们选择默认模板即可，
成功后我们执行
打开浏览器地址，直接运行即可。
一般刚接触前端的小伙伴可能会对 postcss 不太了解，这里简单介绍一下，
当然 PostCSS 具体使用是需要引入一些插件的，例如常用的是 autoprefixer postcss-preset-env 等, 具体如何使用大家可以自行参考资料，毕竟这块知识还是挺多的就不具体展开解释了。
通常我们在写移动端时候需要做的是页面适配方案的确定， uni-app 支持的通用 css 单位包括 px、rpx ， 之前的 upx 方案已经被废弃掉，官方解释是目前市面上已经基本上支持了微信的 rpx 方案，所以 upx 中转方案已经意义不大了，不过还可以继续使用，不过已经不再推荐。
rpx 之初是由微信小程序提出一种方案，即根据宽度来进行适配以 750 宽屏幕为基准， 750rpx 恰好为屏幕宽度, uni-app 规定屏幕基准宽度 750rpx 。所以说如果你们的UI 设计以 750*1334 iphone 6/6s 为基准设计的话，你只需要将屏幕上 px 写为 rpx 即可，不用做任何换算，如果不是的话，你就需要做如下换算：
uniapp 有自己一套路由管理机制，而未采用 vue-route 方案，个人认为这套方案还是比较成熟和好用的，以及可以满足我们日常的需求:
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
2.uni.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。
3.uni.reLaunch(OBJECT)
关闭所有页面，打开到应用内的某个页面。
注意： 如果调用了 uni.preloadPage(OBJECT)) 不会关闭，仅触发生命周期 onHide
4.uni.switchTab(OBJECT)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
注意： 如果调用了 uni.preloadPage(OBJECT)不会关闭，仅触发生命周期 onHide
5.uni.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
5.uni.preloadPage(OBJECT)
预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。
以上路由API 已经满足我们的需求，当然进行路由跳转的前提是我们需要在 pages.json 进行路由配置, 包括路由和具体的样式配置
而进行具体路由跳转我们需要如下，需要多加一个 /
需要特别注意的一点是, 利用浏览器 在 进行 移动H5页面调试时候，会出现页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。
uniapp 提供网络请求的 api 是 uni.request ，具体支持的请求方法可以参考官网 method 有效值
不过我们通常不会直接使用，而是进过一系列的封装以方便我们的使用，具体封装接口使用会在随根据页面数据请求一并展示。
够的。咱们作为前端开发人员，单纯的Web 端开发已经慢慢无法满足我们的业务需求了，微信小程序、安卓 APP、IOS APP，甚至是 Windows 桌面端开发都成了我们需要掌握的技能。所以呢，市面上各种「跨平台」开发解决方案层出不穷，比较有代表性的就是： UniAPP 、 Flutter、 React Native、Taro、Weex等等。UniAPP 是基于「 Vue + 微信小程序 」语言体系，开发人员上手快学习成本低，同时随着如今 UniAPP 生态也逐步趋于成熟。所以，基于 UniAPP 开发多端项目，已经是很多中小型企业常用的技术解决方案。
uni-app支持的通用css单位包括px,rpx
vue页面支持普通H5单位，但在nvue里不支持；
nvue页面还不支持百分比单位
App端，在pages.json里的titleNView或页面里写的plus api中涉及的单位，只支持px，此时不支持rpx。
nvue中，uni-app模式可以使用px,rpx表现与vue中一致，weex模式目前遵循weex的单位；
点击切换实现路由跳转
实现方法： 一、在index.vue的页面入口写一个点击方法，利用uni.navigateTo({})写上将要跳转的页面路径。
二、 components文件里面创建headerNav.vue组件
三、在pages.json文件里写上组件路径进去
这里可以选择修改对应的样式信息
scroll-view属性说明：
横向滚动通过添加scroll-x="true"，并且需要在scroll-view的上一级加上row，完成横向滚动
纵向滚动条通过添加scroll-y="true",并且使用scroll-view来配合完成纵向滚动轴
属性说明：
view的属性说明：
属性说明：
由于 icon 组件各端表现存在差异，可以通过使用字体图标的方式来弥补各端差异。
属性说明：
各平台type值的有效说明：
