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

发布时间:2019-06-20 22:00:13发布者:Mr.Zhang阅读(493)

第一次使用博客园写博客

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/ 官网发现,如何学习一栏,找到一个在腾讯课堂学习的简单视频,通过一个晚上的学习大致了解了一下。
2.看完,就打开新版hbuilderX,开始新建一个uni-app项目,有各种模板,新闻模板,看图模板,普通模板,演示模板,其中演示模板多了一个hybrid文件夹,并且只能在手机端运行,估计是集成了hybrid。
3.简单一点来说,就是一个vue.js和微信小程序的结合体,底部tabBar 的写法和小程序一样,里面的元素使用的是标签,但整体架构与vue.js类似,文件结构与小程序类似,直接可以上手。看了他们的案例基本就可以写东西了。
4.platforms文件夹是用来存放不同设备不同的页面功能的,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好了把打包好的文件放到根目录运行看效果
在这里插入图片描述

h5打包好的效果如下

h5效果

 

3.结语

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





本文转自博客园,原文地址:https://www.cnblogs.com/deamn/p/11058620.html