初识Framework7,搭建app手机端项目

时间:2024-03-25 22:27:31

写在前面:在Framework7 (以下简称F7)的官方文档中提到“因为Framework7是通过Ajax在不同页面间跳转的,所以你需要启动一个 http 服务器才可以(不要直接打开本地文件)”,使用工具HBuilder,创建移动App项目,可以解决这个问题,实现页面间的跳转。

初识Framework7,搭建app手机端项目

点击“下载”,等待下载完成解压后,不需要安装,直接运行.exe文件即可。

初识Framework7,搭建app手机端项目

运行后会跳转到以下页面,选“暂不登录”,进入入门教程页面。

初识Framework7,搭建app手机端项目

之后,在菜单导航栏中,选择“文件”-> “新建” ->”移动App”,输入项目名称“app”(自定义,其它也行)。

初识Framework7,搭建app手机端项目

将F7目录下的dist文件夹复制到app目录下,并修改名称为“framework7”,此时,项目的目录结构应该是

初识Framework7,搭建app手机端项目

在index.html点击鼠标右键,选择运行方式->web应用程序,将页面输出到浏览器上(此处运用的是谷歌浏览器)。
在浏览器上选择开发者工具(快捷键F12)->切换响应式页面->选手机型号。

初识Framework7,搭建app手机端项目

此时就已经搭建好啦,后续自己进行学习了。