ApiCloudApp开发 - 快速调试

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: @@@ 在需要调试的页面引入vconsole 但每个页面都需要引入 换一种思路:封装一个console方法,储存到数据库中 再加上一个页面可以查询 ¥¥¥

写在前面


  • 快速监听、预览、复发 HTTP网络请求
  • 在USB连线开发时如何电脑查看console.log日志
  • 编译后无法运行的错误

原文博客:http://blog.siammm.cn


解决过程


@@@ 在需要调试的页面引入vconsole 但每个页面都需要引入 换一种思路:封装一个console方法,储存到数据库中 再加上一个页面可以查询 ¥¥¥


封装通用工具


@@@ 封装日志上报方法


log(str){
    // 储存到数据库
    let consoleData = api.getGlobalData({
        key :"siamConsoleData"
    })
    if (consoleData == ''){
        consoleData = []
    }else{
        consoleData = JSON.parse(consoleData)
    }
    consoleData.unshift(str);
    api.setGlobalData({
        key :"siamConsoleData",
        value: JSON.stringify(consoleData)
    })
}


在首页增加一个按钮,进入日志详情页


openLog(){
    console.log("测试吧")
    if (this.siamconsole ){
        api.closeFrame({
            name: 'siamConsole'
        });
        this.siamconsole = false;
        return true;
    }
    this.siamconsole = true;
    api.openFrame({
        name: 'siamConsole',
        url: 'widget://html/siam/console.html',
        rect: $.rect(),
        pageParam: {
            name: 'test'
        }
    });
},
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Siam Console </title>
    <link rel="stylesheet" href="../../../css/swiper.min.css">
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../script/frame.js" type="text/javascript"></script>
    <script src="../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../script/common.js" type="text/javascript"></script>
    <script src="../../script/swiper.min.js" type="text/javascript"></script>
    <style>
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <ul>
          <li v-for="(item,index) in consoleList" style="font-size:14px">
            {{item}}
          </li>
        </ul>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var app = new Vue({
                el:'#app',
                data:{
                  consoleList:[
                    '测试'
                  ]
                },
                methods:{
                  init(){
                              api.refreshHeaderLoadDone();//管他有不有下拉刷新,都给他关了。<Z></Z>
                      let consoleData = YY.getData("siamConsoleData")
                      if (consoleData == ''){
                        consoleData = [];
                      }else{
                        consoleData = JSON.parse(consoleData)
                      }
                      this.consoleList = consoleData;
                  }
                },
                mounted:function(){
                  this.init();
                }
            });
            //下拉刷新
            $.pullDown({
                bgColor:"transparent",
                success:function(){
                  YY.log("??")
                  app.init();
                }
            });
        }
    </script>
</body>
</html>


在ajax封装里上报日志


// 注入网络请求记录
YY.log(JSON.stringify({
    send :send,
    ret: ret,
    err: err
}))


¥¥¥

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
2天前
|
开发框架 前端开发 JavaScript
uniapp开发鸿蒙,是前端新出路吗?
相信不少前端从业者一听uniapp支持开发鸿蒙Next后非常振奋。猫林老师作为7年前端er也是非常激动,第一时间体验了下。在这里也给大家分享一下我的看法
32 17
|
5月前
|
前端开发 开发者
移动端-------app开发02,了解apicloud功能和使用,真机测试
移动端-------app开发02,了解apicloud功能和使用,真机测试
|
6月前
|
小程序 开发者 Windows
安装VantWeapp开发微信小程序
安装VantWeapp开发微信小程序
157 0
|
开发框架 前端开发 安全
dapp开发搭建 | dapp开发多少钱 | dapp源码开发
编写智能合约智能合约是dapp的核心部分,因此开发者需要根据设计的流程编写智能合约,使用相应的语言,如Solidity或Vyper等。
|
移动开发 小程序 Java
用uniapp开发跨端应用开发打包发布完整指南
用uni-app开发多端项目,一套代码可同时打包出各端小程序、h5和app,uni-app支持通过 HBuilderX可视化界面 和 vue-cli命令行 两种方式创建项目
607 0
|
API Android开发
uniapp开发安卓应用踩坑记
字体图标在app上不显示,直接在iconfont上生成的代码,url链接里是以 // 开头的,不是完整的网址路径。 解决方案:在字体图标引用路径前面要加上https:,否则在app上不显示
125 0
|
小程序 搜索推荐 前端开发
uniapp开发微信小程序,从构建到上线(1)
uniapp开发微信小程序,从构建到上线(1)
uniapp开发微信小程序,从构建到上线(1)
|
小程序 API 数据安全/隐私保护
uniapp开发微信小程序,从构建到上线(2)
uniapp开发微信小程序,从构建到上线(2)
uniapp开发微信小程序,从构建到上线(2)
|
移动开发 前端开发 JavaScript
零基础如何上手APICloud App、小程序多端开发
业务需求变化快、开发人员成本高是现在企业面临的主要问题。多端开发技术则可以很好的解决这些问题,开发一次可以生成iOS、Android、小程序、Web等多端应用。APICloud凭借多年的移动开发技术积累,为开发者提供了一套高性能的多端开发技术,可以高效的开发企业级应用程序。
867 2
零基础如何上手APICloud App、小程序多端开发
|
存储 XML 缓存
使用APICloud AVM多端框架开发消防检查助手App项目实践分享
使用APICloud AVM多端框架开发消防检查助手App,把消防检查过程中,需要手写填报的文档,在App端以表单填写进行实现。同时可以添加手写签名,关联照片,而且App端表单填报很多项目进行下拉选择,极大的提高了工作效率;表单填报完成之后可通过系统后台生成word模板文件,App端下载到手机,通过手机连接打印机,可把纸质文件进行打印。
258 0

热门文章

最新文章

相关实验场景

更多