一个app前端框架基础版

最新推荐文章于 2024-03-05 09:51:11 发布

小鹿的

最新推荐文章于 2024-03-05 09:51:11 发布

阅读量625

点赞数

分类专栏： flask 文章标签： android python

本文链接：https://blog.csdn.net/yutu75/article/details/110293686

版权

flask 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

APICloud内置了一个APICloud 前端框架给我们操作APP页面和展示数据，也提供了ajax跨域请求数据功能。

它本质上就是一个仿照jQuery编写的一个小工具库，所以并不好用。
框架地址：https://docs.apicloud.com/Front-end-Framework/framework-dev-guide

目录结构

APP/
  |- index.html   # 默认app配置的入口页面
  |- config.xml   # APP系统配置文件
  |- html/        # APP页面存储目录
  |- css/         # 样式目录
  |- script/      # js脚本目录
  |- image/       # 图片目录

配置文件

 <widget id="A6043953355883"  version="0.0.1">
    <name>APP名称，展示给客户端手机里面的</name>
	<!--  -->
    <description>

       APP的描述信息，将来app上架以后，会需要填写

    </description>

    <author email="作者邮箱" href="官网地址">

        APP作者名字

    </author>
	<!-- APP启动以后看到的首页,使用相对路径 -->
    <content src="index.html" />

    <!-- 设置APP的所有页面是否能跨域访问到本地或者远程服务器，*表示没有任何限制，local表示本地，如果是远程服务器，则需要编写完整的地址，例如：http://www.baidu.com/ -->
    <access origin="*" />

    <preference name="pageBounce" value="false"/>
	<!-- APP背景颜色 -->
	<preference name="appBackground" value="rgba(0,0,0,0.0)"/>

    <!-- 配置Window默认背景 -->
	<preference name="windowBackground" value="rgba(0,0,0,0.0)"/>
	<!-- 配置Frame默认背景 -->
	<preference name="frameBackgroundColor" value="rgba(0,0,0,0.0)"/>
	<!-- 配置页面默认是否显示滚动条 -->
	<preference name="hScrollBarEnabled" value="false"/>
	<!-- 配置页面默认是否显示滚动条 -->
	<preference name="vScrollBarEnabled" value="false"/>
	<!-- 配置启动页是否自动隐藏 -->
	<preference name="autoLaunch" value="true"/>
	<!-- 配置应用是否全屏运行 -->
	<preference name="fullScreen" value="false"/>
	<!-- 配置应用是否自动检测更新 -->
	<preference name="autoUpdate" value="true" />
	<!--配置应用是否支持增量更新、云修复 -->
	<preference name="smartUpdate" value="false" />
	<!-- 配置应用开启/关闭调试模式 -->
	<preference name="debug" value="true"/>
	<!-- IOS全屏配置 -->
	<preference name="statusBarAppearance" value="true"/>

	<permission name="readPhoneState" />

	<permission name="camera" />

	<permission name="record" />

	<permission name="location" />

	<permission name="fileSystem" />

	<permission name="internet" />

	<permission name="bootCompleted" />

	<permission name="hardware" />

</widget>

调用框架

<script src="./script/api.js"></script>

APICloud 前端框架中提供的40多个操作方法，主要分6类用途：

数据操作：
	trim()       trimAll()    isArray()     jsonToStr()  strToJson()  get()
	post()

事件操作：
	addEvt()     rmEvt()

元素查找：
	one()        dom()        domAll()       byId()      first()      last()     eq()     not()        prev()       next()         contains()  closest()

DOM操作：
	remove()     attr()       removeAttr()   hasCls()    addCls()     removeCls()         toggleCls()  val()        prepend()      append()    before()     after()   
	html()       text()       offset()       css()       cssVal()

本地存储：
	setStorage() getStorage() rmStorage()    clearStorage()

系统兼容：
	fixIos7Bar() fixStatusBar()

所有的APICloud前端框架的代码都必须在其入口函数中执行，并且通过$api来进行调用。

入口函数

// 要调用上面的40个方法,必须在apiready里面编写,在外面是没有$api对象的.
apiready = function(){
	// js代码
	
}

api与$api对象

注意：在APICloud中存在2个全局对象，分别是$api和api对象。这两个对象是不同的。

其中api对象主要是由APP系统提供给我们开发者操作和读取设备信息的。

而$api是APICloud模仿了jquery的$对象提供给开发者用于操作app页面的对象。

api对象的操作代码必须写在apiready入口函数中，否则报错！

而$api的部分操作代码，则不会报错，但是强烈建议不管是$api还是api都写进入口函数中。

代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>livi app</title>

</head>
<body>
    <div id="wrap">
        <div id="header">
            <h1>livi kawaii~~~~</h1>
        </div>
        <div id="main" class="flex-con">

        </div>
        <div id="footer">
            <h5>Copyright &copy;<span id="year"></span> </h5>
        </div>
        <div id="info">

        </div>
    </div>
</body>
<script type="text/javascript" src="./js/api.js"></script>
<script type="text/javascript">

    apiready = function(){
        var header = document.querySelector('#header');
        $api.fixStatusBar(header);

        var el = $api.byId("header");
        var h1 = $api.first(el);
        var content = $api.html(h1,"2020-08-27");


        var ver = api.version;
    		var sType = api.systemType;
    		var sVer = api.systemVersion;
    		var id = api.deviceId;
    		var model = api.deviceModel;
    		var name = api.deviceName;
    		var cType = api.connectionType;
    		var winName = api.winName;
    		var winWidth = api.winWidth;
    		var winHeight = api.winHeight;
    		var frameName = api.frameName || '';
    		var frameWidth = api.frameWidth || '';
    		var frameHeight = api.frameHeight || '';

    		var str = '<ul>';
    		str += '<li>引擎版本信息: ' + ver + '</li>';
    		str += '<li>系统类型: ' + sType + '</li>';
    		str += '<li>系统版本: ' + sVer + '</li>';
    		str += '<li>设备标识: ' + id + '</li>';
    		str += '<li>设备型号: ' + model + '</li>';
    		str += '<li>设备名称: ' + name + '</li>';
    		str += '<li>网络状态: ' + cType + '</li>';
    		str += '<li>主窗口名字: ' + winName + '</li>';
    		str += '<li>主窗口宽度: ' + winWidth + '</li>';
    		str += '<li>主窗口高度: ' + winHeight + '</li>';
    		str += '<li>子窗口名字: ' + frameName + '</li>';
    		str += '<li>子窗口宽度: ' + frameWidth + '</li>';
    		str += '<li>子窗口高度: ' + frameHeight + '</li>';
    		str += '</ul>';

        $api.html($api.byId("info"), str);

    };
</script>
</html>

获取服务端API接口

获取数据可以使用$api.post()，当然，也可以使用api对象提供的api.ajax。

api.ajax

基本语法：

api.ajax({
      url: 'API接口地址',                 // 必须加上协议
      method: '请求方法',                 // post、get、put、delete
      dataType: "json",                  // 服务端数据响应格式
      cache: true,                       // 缓存数据，若缓存，下次没网络时请求则会使用缓存，
                                         // 仅在get请求有效
      timeout: 30,                       // 超时时间，单位：秒
      headers:{},                        // 请求头，里面的key使用首字母大写的形式，
                                         // 如 Content-Type
      report:false,                      // 是否实时返回上传文件的进度，只有上传时使用
      data: {                            // 提交数据
          values: {                      // 以表单格式提交数据
              name: 'haha'
          },
          body: "",                      // 以字符串格式提交数据
          files: {                       // ajax上传文件
              file: 'fs://a.gif'         // 文件字段名
          }
      }
  },function(ret, err){                  // 回调函数，参数1是响应内容，参数2是错误信息
      if (ret) {
          alert( JSON.stringify( ret ) );
      } else {
          alert( JSON.stringify( err ) );
      }
  });

接下来的开发中,我们需要实现客户端,所以如果基于上面的$api开发的话,非常的影响效率,所以我们可以采用Vue.js来完成app的客户端开发.当然最终代码还是运行在APICloud里面.

vue+axios

vue.js：https://vuejs.org/js/vue.js

axios.js：https://www.npmjs.com/package/axios

把下载回来的vue.js和axios.js保存到项目的scripts目录下，然后在页面中引入。

<script src="../script/settings.js"></script>
<script src="../script/vue.js"></script>
<script src="../script/axios.js"></script>