uni-app学习心得和填坑，关于uni-app 打包h5 页面的坑

一时失言乱红尘 2022-01-11 06:17 847阅读 0赞

### uni-app，初次使用 ###

*  第一次使用CSDN写博客
 *   *  1.了解
     *  2.使用
     *  h5打包好的效果如下
     *  3.结语

# 第一次使用CSDN写博客 #

1.我写博客的原因，梳理知识，整理思路，好记性不如烂笔头做个记录吧！记录生活！

## 1.了解 ##

大概在我使用hbuilder的时候，在官网浏览下载的hbuilder时候无意中发现了uni-app，官网建议学习了vue.js之后就容易上手，当时还没学过vue.js，就简单了解了一下。（一年前），后来学习了vue.js也没有去学习uni-app，现在uni-app推广做的很好了，我在mpvue，vue.js的官网上面发现了uni-app的友情链接，大肆推广，搞活动鼓励大家写插件。然后我就慢慢开始想学了，平台支持也更多了，从只支持小程序，app，h5，增加了百度，支付宝，字节跳动小程序。最近公司接了一个项目，要多个平台的版本，公司有android ，ios 所以我要写小程序，和h5页面加超管后台，所以我的任务很重，就想到了uni-app并准备使用。好了不废话了进入正题。

## 2.使用 ##

1.打开[https://uniapp.dcloud.io/][https_uniapp.dcloud.io] 官网发现，如何学习一栏，找到一个在腾讯课堂学习的简单视频，通过一个晚上的学习大致了解了一下。  
2.看完，就打开新版hbuilderX，开始新建一个uni-app项目，有各种模板，新闻模板，看图模板，普通模板，演示模板，其中演示模板多了一个hybrid文件夹，并且只能在手机端运行，估计是集成了hybrid。  
3.简单一点来说，就是一个vue.js和微信小程序的结合体，底部tabBar 的写法和小程序一样，里面的元素使用的是  标签，但整体架构与vue.js类似，文件结构与小程序类似，直接可以上手。看了他们的案例基本就可以写东西了。  
4.platforms文件夹是用来存放不同设备不同的页面功能的，app显示第一个页面，h5第二个页面，  
![在这里插入图片描述][20190619184837606.png]  
5.还有一个点在代码里面有if 判断在指定客户端显示指定的代码  
6.还有一个坑，android端，h5，微信小程序测试没问题，h5打包无法运行，因为不能在file端运行并且还需要配置 ，需要配置在manifest.json 1标题随便写  
2 模板路径不写  
3路由模式感觉history更快  
4运行基础路径就是www 域名 下面的路径 放到根目录就不填  
5 端口看你具体看你如何配置的 我的是80  
6 最后 在发行里面打包h5 填写域名 我是本地服务 127.0.0.1  
7好了把打包好的文件放到根目录运行看效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5ODM1Mg_size_16_color_FFFFFF_t_70]

## h5打包好的效果如下 ##

![h5效果][h5]

## 3.结语 ##

1.就到这里把，后面遇到更多的坑，我会在这里记录，有什么问题欢迎大家来交流。

[https_uniapp.dcloud.io]: https://uniapp.dcloud.io/
[20190619184837606.png]: /images/20220111/31a2b59503ea4331935affc52d325b15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5ODM1Mg_size_16_color_FFFFFF_t_70]: /images/20220111/4340d1c316da4ca896ca920eaf27d34c.png
[h5]: /images/20220111/e42f4bdfff0c415b87e8f2c55ce442ff.png