前言
18 年时候有幸接触到 uniapp, 写了一篇 《uni-app 入门到精通》，由于一些原因，该方案并没有执行，该项目一系列文章也就没有再写下去，所以遭受到了许多人评论的吐槽，到如今公司项目的需求又要根据uniapp写 H5嵌入到 app 中，所以想根据项目实际开发分享一下，有兴趣的伙伴可以参考和吐槽。
正文
这一篇文章主要分享一下内容
- 1.脚手架项目初始化
- 2.项目目录结构说明
- 3.页面适配
- 4.路由与页面跳转
- 5.网络请求封装
1.脚手架项目初始化
uniapp 模板项目有两种初始化方式
- 通过HBuilderX开发工具初始化
- 通过
vue-cli脚手架命令
由于无法舍弃VSCode，我们采用 vue-cli来初始化项目，HBuilderX 大家可以参照官方文档
全局安装vue-cli
npm install -g @vue/cli
创建uni-app
vue create -p dcloudio/uni-preset-vue my-project(项目名)
这种方式是可以通过 vue 脚手架命令指定模板，这个是dcloudio 的官方提供模板
我们选择默认模板即可，
成功后我们执行
cd my-project
yarn serve
打开浏览器地址，直接运行即可。
2.项目目录结构说明
.
├── README.md ...... 说明文件
├── node_modules ..... 依赖模块
├── babel.config.js ...... babel 的配置文件
├── package.json .... 依赖配置
├── postcss.config.js ..... postcss 配置文件
├── public ........ 发布页面入口
│ └── index.html
├── src
│ ├── App.vue ....... 应用配置，用来配置App全局样式以及监听
│ ├── main.js ........ Vue初始化入口文件
│ ├── manifest.json ...... 配置应用名称、appid、logo、版本等打包信息
│ ├── pages .......... 业务页面文件存放目录
│ │ └── index
│ │ └── index.vue .... 初始页面
│ ├── pages.json ....... 配置页面路由、导航条、选项卡等页面类信息
│ ├── static ... 存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
│ │ └── logo.png
│ └── uni.scss ...... 通用样式
├── tsconfig.json
└── yarn.lock
一般刚接触前端的小伙伴可能会对 postcss 不太了解，这里简单介绍一下，
PostCSS是一个通过JavaScript来转换样式的工具, 一般前端工程化，我们很少会根据不同浏览器来写适配，而是通过一些工具来帮助我们实现，例如通过
postcss进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置等等
当然PostCSS 具体使用是需要引入一些插件的，例如常用的是autoprefixer postcss-preset-env 等, 具体如何使用大家可以自行参考资料，毕竟这块知识还是挺多的就不具体展开解释了。
3.页面适配
通常我们在写移动端时候需要做的是页面适配方案的确定，uni-app 支持的通用 css 单位包括 px、rpx， 之前的 upx 方案已经被废弃掉，官方解释是目前市面上已经基本上支持了微信的rpx 方案，所以upx中转方案已经意义不大了，不过还可以继续使用，不过已经不再推荐。
-
px即屏幕像素 -
rpx即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大，但在 App 端和 H5 端屏幕宽度达到960px时，默认将按照375px的屏幕宽度进行计算
rpx 之初是由微信小程序提出一种方案，即根据宽度来进行适配以750宽屏幕为基准，750rpx恰好为屏幕宽度,uni-app 规定屏幕基准宽度 750rpx。所以说如果你们的UI 设计以 750*1334 iphone 6/6s 为基准设计的话，你只需要将屏幕上 px 写为 rpx 即可，不用做任何换算，如果不是的话，你就需要做如下换算：
开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
换言之，页面元素宽度在 uni-app 中的宽度计算公式：
750 * 元素在设计稿中的宽度 / 设计稿基准宽度
4.路由与页面跳转
uniapp 有自己一套路由管理机制，而未采用vue-route方案，个人认为这套方案还是比较成熟和好用的，以及可以满足我们日常的需求:
- 1.uni.navigateTo
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
| 参数 | 类型 | 必填 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|---|
| url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数 | :- | |
| animationType | String | 否 | pop-in | 窗口显示的动画效果，详见：窗口动画 | App |
| animationDuration | Number | 否 | 300 | 窗口动画持续时间，单位为 ms | App |
| events | Object | 否 | 页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。 | ||
| success | Function | 否 | 接口调用成功的回调函数 | ||
| fail | Function | 否 | 接口调用失败的回调函数 | ||
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
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 进行路由配置, 包括路由和具体的样式配置
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
而进行具体路由跳转我们需要如下，需要多加一个 /
uni. navigateTo('/pages/index/index')
需要特别注意的一点是, 利用浏览器 在 进行 移动H5页面调试时候，会出现页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。
5.网络请求封装
uniapp 提供网络请求的 api 是 uni.request，具体支持的请求方法可以参考官网 method 有效值
uni.request({
url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});
不过我们通常不会直接使用，而是进过一系列的封装以方便我们的使用，具体封装接口使用会在随根据页面数据请求一并展示。
网友评论