前言

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可以返回到原页面。

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';
    }
});

不过我们通常不会直接使用，而是进过一系列的封装以方便我们的使用，具体封装接口使用会在随根据页面数据请求一并展示。