移动端H5开发

移动端H5开发，具体需求是配合移动端 APP 开发，写一些嵌入 App 使用的H5页面。如资讯详情页，资讯分享页面。

本文重点分享使用 vue-cli 开发的项目，打包上线。

 

关于技术选型

最开始我是想直接用 h5 css js ，因为就几个页面，后来觉得这样是不是太 low 了，才想着用框架。

也是听了朋友的建议，他说 这个需求，不可能只是最开始这几个页面，后面 App 肯定会有其他更多页面要用 H5 写，所以建议用框架写，后面省事。

框架先是用的 vue-cli，后转为 uni-app，最后又回到 vue-cli。

uni-app

https://blog.csdn.net/Irene1991/article/details/111247678

vue-cli

https://blog.csdn.net/Irene1991/article/details/84400309

 

项目打包

仅为测试，不是正式上线。

配置什么都没改(还是开发时候的配置)，直接 npm run build 

项目打包好后，项目根目录 dist 文件，压缩后发给后端同事部署。

 

手机浏览

因为是嵌入移动端的H5，所以专门写了入口导航页面，方便测试。

 

主要是为了测试下移动端的图片上传，看下实际手机运行时的交互效果。

前端开发使用的是elementUI的上传组件（写法和web端一模一样）。

如下图，苹果手机，点击上传图片，唤醒手机底部相应操作弹框（经测试，拍摄可用）。

还测试了小米手机，点击上传图片，唤醒的是手机的文件管理界面。

 

访问页面的手机和页面调用的接口，在同一个 wifi 局域网 下，所以可以使用。

断无线网用4G就不行了。那个等需要正式上线的时候，再更改接口访问地址，目前接口访问的是同事的本地服务。

 

浏览器调试

前面一直有个疑惑，打包上传后的代码怎么调试，尤其是本地环境样式没问题，打包后样式就错乱了。比如这次的图片上传样式（加号未垂直居中）。

前面是拿真机看的样式，后来突然想到用浏览器的手机模式访问看看。嗯，果然这样也可以复现问题。

排查 css 后发现是 line-height 的原因，自定义样式权重不够被原组件样式覆盖了，增加自定义样式权重（!important）即可。