欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-11 17:37:41
第一次使用博客园写博客 第一次使用博客园写博客 1.我写博客的原因,梳理知识,整理思路,好记性不如烂笔头做个记录吧!记录生活! 1.我写博客的原因,梳理知识,整理思路,好记性不如烂笔头做个记录吧!记录生活! 1.了解 1.了解 大概在我使用hbuilder的时候,在官网浏览下载的hbuilder时候 ......

第一次使用博客园写博客

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

h5打包好的效果如下

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

 

3.结语

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