• APICloud前端框架

    1. 介绍

    • APICloud内置了一个APICloud 前端框架给我们操作APP页面和展示数据，也提供了ajax跨域请求数据功能。
    • 它本质上就是一个仿照jQuery编写的一个小工具库，所以并不好用。
    • 现在更新到3版本了，目测丝滑了不少
    • 支持vue语法，react语法......
    • 框架地址：

    APICloud APP前端框架 – 手机APP开发、APP制作、APP定制平台https://docs.apicloud.com/Front-end-Framework/framework-dev-guide

    2. 目录结构

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

    3. 配置文件源码(config)

    1.  "A6043953355883"  version="0.0.1">
    2.     <name>APP名称，展示给客户端手机里面的name>
    3.  
    4.     <description>
    5.  
    6.        APP的描述信息，将来app上架以后，会需要填写
    7.  
    8.     description>
    9.  
    10.     <author email="作者邮箱" href="官网地址">
    11.  
    12.         APP作者名字
    13.  
    14.     author>
    15. 	
    16.     <content src="index.html" />
    17.  
    18.     
    19.     <access origin="*" />
    20.  
    21.     <preference name="pageBounce" value="false"/>
    22. 	
    23. 	<preference name="appBackground" value="rgba(0,0,0,0.0)"/>
    24.  
    25.     
    26. 	<preference name="windowBackground" value="rgba(0,0,0,0.0)"/>
    27. 	
    28. 	<preference name="frameBackgroundColor" value="rgba(0,0,0,0.0)"/>
    29. 	
    30. 	<preference name="hScrollBarEnabled" value="false"/>
    31. 	
    32. 	<preference name="vScrollBarEnabled" value="false"/>
    33. 	
    34. 	<preference name="autoLaunch" value="true"/>
    35. 	
    36. 	<preference name="fullScreen" value="false"/>
    37. 	
    38. 	<preference name="autoUpdate" value="true" />
    39. 	
    40. 	<preference name="smartUpdate" value="false" />
    41. 	
    42. 	<preference name="debug" value="true"/>
    43. 	
    44. 	<preference name="statusBarAppearance" value="true"/>
    45.  
    46. 	<permission name="readPhoneState" />
    47.  
    48. 	<permission name="camera" />
    49.  
    50. 	<permission name="record" />
    51.  
    52. 	<permission name="location" />
    53.  
    54. 	<permission name="fileSystem" />
    55.  
    56. 	<permission name="internet" />
    57.  
    58. 	<permission name="bootCompleted" />
    59.  
    60. 	<permission name="hardware" />
    61.  
    63.

    4. 调用框架

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

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

    • 所有的APICloud前端框架的代码都必须在其入口函数中执行，并且通过$api来进行调用。
    1. 数据操作：
    2. 	trim()       trimAll()    isArray()     jsonToStr()  strToJson()  get()
    3. 	post()
    4.  
    5. 事件操作：
    6. 	addEvt()     rmEvt()
    7.  
    8. 元素查找：
    9. 	one()        dom()        domAll()       byId()      first()      last()     eq()     not()        prev()       next()         contains()  closest()
    10.  
    11. DOM操作：
    12. 	remove()     attr()       removeAttr()   hasCls()    addCls()     removeCls()         toggleCls()  val()        prepend()      append()    before()     after()   
    13. 	html()       text()       offset()       css()       cssVal()
    14.  
    15. 本地存储：
    16. 	setStorage() getStorage() rmStorage()    clearStorage()
    17.  
    18. 系统兼容：
    19. 	fixIos7Bar() fixStatusBar()

    6. 入口函数

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

    7. api与$api对象

    7.1 介绍

    1. 注意：在APICloud中存在2个全局对象，分别是$api和api对象。这两个对象是不同的。
    2.  
    3. 其中api对象主要是由APP系统提供给我们开发者操作和读取设备信息的。
    4.  
    5. 而`$api`是APICloud模仿了jquery的`$`对象提供给开发者用于操作app页面的对象。
    6.  
    7. api对象的操作代码必须写在apiready入口函数中，否则报错！
    8.  
    9. 而`$api`的部分操作代码，则不会报错，但是强烈建议不管是`$api`还是api都写进入口函数中。

    7.2 代码

    1. html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    6.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    7.     <title>磨坊 APPtitle>
    8.  
    9. head>
    10. <body>
    11.     <div id="wrap">
    12.         <div id="header">
    13.             <h1>老男孩 python~~~h1>
    14.         div>
    15.         <div id="main" class="flex-con">
    16.  
    17.         div>
    18.         <div id="footer">
    19.             <h5>Copyright ©<span id="year">span> h5>
    20.         div>
    21.         <div id="info">
    22.  
    23.         div>
    24.     div>
    25. body>
    26. <script type="text/javascript" src="./js/api.js">script>
    27. <script type="text/javascript">
    28.  
    29.     apiready = function(){
    30.         var header = document.querySelector('#header');
    31.         $api.fixStatusBar(header);
    32.  
    33.         var el = $api.byId("header");
    34.         var h1 = $api.first(el);
    35.         var content = $api.html(h1,"2020-08-27");
    36.  
    37.  
    38.         var ver = api.version;
    39.     		var sType = api.systemType;
    40.     		var sVer = api.systemVersion;
    41.     		var id = api.deviceId;
    42.     		var model = api.deviceModel;
    43.     		var name = api.deviceName;
    44.     		var cType = api.connectionType;
    45.     		var winName = api.winName;
    46.     		var winWidth = api.winWidth;
    47.     		var winHeight = api.winHeight;
    48.     		var frameName = api.frameName || '';
    49.     		var frameWidth = api.frameWidth || '';
    50.     		var frameHeight = api.frameHeight || '';
    51.  
    52.     		var str = '
        ';
    53.     		str += '
    54. 引擎版本信息: ' + ver + '
      55. ';
  • str += '
  • 系统类型: ' + sType + '
    • ';
  • str += '
  • 系统版本: ' + sVer + '
    • ';
  • str += '
  • 设备标识: ' + id + '
    • ';
  • str += '
  • 设备型号: ' + model + '
    • ';
  • str += '
  • 设备名称: ' + name + '
    • ';
  • str += '
  • 网络状态: ' + cType + '
    • ';
  • str += '
  • 主窗口名字: ' + winName + '
    • ';
  • str += '
  • 主窗口宽度: ' + winWidth + '
    • ';
  • str += '
  • 主窗口高度: ' + winHeight + '
    • ';
  • str += '
  • 子窗口名字: ' + frameName + '
    • ';
  • str += '
  • 子窗口宽度: ' + frameWidth + '
    • ';
  • str += '
  • 子窗口高度: ' + frameHeight + '
    • ';
  • str += '';
  • $api.html($api.byId("info"), str);
  • };
  • script>
  • html>

    • 8. 获取服务端API接口

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

    9. vue+axios

    9.1 文件下载

    9.1.1 vue.js：

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

    9.1.2 axios.js：

    axios - npmhttps://www.npmjs.com/package/axios

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

    2. <script src="../script/vue.js">script>
    3. <script src="../script/axios.js">script>

  • 相关阅读:
    XML外部实体注入攻击XXE
    匿名内部类的使用：（一看就会！！！）
    响应式数据
    Java线程与锁-1
    java毕业设计车辆保险管理系统Mybatis+系统+数据库+调试部署
    前端开发实践：vue中用qrcode库将超链接生成二维码图片
    四.Docker容器技术
    go gin ShouldBind 绑定参数到结构体struct 数据校验
    CSS 中的 HSL 和 HSLA 与 RGB 和 RGBA
    java agent技术的注入利用与避坑点
  • 原文地址：https://blog.csdn.net/qq_52385631/article/details/123641171