编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

Framework7构建WEB APP或混合APP的开源免费框架

wxchong 2024-07-11 01:27:39 开源技术 9 ℃ 0 评论

Framework7简介

Framework7 是一个开源免费的框架,用来开发混合移动应用(原生和HTML混合)或者开发 iOS & Android 风格的WEB APP。

Framework7 并不能兼容所有的设备。她专注于为 iOS 和 Google Material 设计提供最好的体验。如果你想开发 iOS 或者 Android 混合应用(Phonegap)或者你想开发 WEB APP,那么Framework7将会是你的首选。

Framework7 有大量可以直接使用的 UI 组件和工具,比如 modals,popup,action sheet, popover, list views, media lists, tabs, side panels, layout grid, preloader, form elements 等。大部分的组件你都完全不需要写任何 JS 代码。

把Framework7 的 CSS 和 JS 文件引入html文件,在其中使用framework7定义好的组件/样式,就可以使用Framework7了,就这么简单。

开发framework7项目

1.上 Framework7 官网下载最新的代码,地址:http://framework7.io

2.将 dist 文件夹下的 css、img、js 复制到我们项目中来。

如图所示:css和js目录下,包含了两种风格的样式文件,分别用于ios和google material风格的手机页面布局。此外,还有供开发者自定义的my-app样式文件。

3.新建一个html页面,在文件头引用css样式文件,在body结束前引用js文件。

头条好像对代码进行了屏蔽只好放图了


4:在html页面中,使用framework7定义好的组件/样式,进行页面布局开发

5:在 my-app.js文件中,进行 APP 和 View 的初始化。

因为页面是通过 JS 加载的,不能通过在页面中添加 <script> 标签的方式来添加 JS 代码,script 标签会直接被忽略。我们使用 Framework7 提供的回调函数,根据页面的初始化事件,进行函数调用。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表