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日志并进行多维度分析。
目录
相关文章
|
11月前
|
小程序
微信小程序项目实例——摇色子
微信小程序项目实例——摇色子
|
7月前
|
API Android开发
uniapp开发安卓应用踩坑记
字体图标在app上不显示,直接在iconfont上生成的代码,url链接里是以 // 开头的,不是完整的网址路径。 解决方案:在字体图标引用路径前面要加上https:,否则在app上不显示
65 0
|
7月前
|
移动开发 小程序 JavaScript
uniapp开发打包ios应用踩坑记
iOS 设备的一个唯一识别码,每台 iOS 设备都有一个独一无二的编码,这个编码,我们称之为识别码,也叫做UDID
127 0
|
11月前
|
小程序
微信小程序项目实例——手势解锁
微信小程序项目实例——手势解锁
|
Web App开发 小程序 架构师
干货| app自动化测试之Andriod微信小程序的自动化测试
随着微信小程序的功能和生态日益完善,很多公司的小程序项目页面结构越来越多,业务逻辑也越来越复杂。如何做好小程序的自动化测试就成为测试同学普遍面临的一大痛点难题。 ## 微信小程序 小程序内嵌于微信内部,页面包含 Native 原生元素和 Web 元素,相当于混合应用。并且,小程序 Web 部分是基于腾讯的 X5 内核开发的,也是特殊的 WebView。那么,对微信小程序进行自动化测试,包括操
|
小程序 JavaScript API
如何在微信小程序中使用第三方SDK?
如何在微信小程序中使用第三方SDK?
2634 0
|
Web App开发 小程序 测试技术
干货| app自动化测试之Andriod微信小程序的自动化测试
干货| app自动化测试之Andriod微信小程序的自动化测试
|
JSON 开发工具 Android开发
APICloud App开发上手经验之模块调用
APICloud 提供了很多方便好用的模块,只要学习自己想要使用的模块的文档,然后调用模块就可以使用了。使用模块可以大大减少自己需要写的代码量,而且对于新手来说,在自己开发经验不足的情况下,也许并不能胜任一些功能的开发,这时候使用模块就可以让自己的 APP 也拥有这些功能了,看到自己的 APP 也具有了丰富的功能会比较有成就感,不会使我们的学习感到枯燥,也不容易感觉学习太难而因此止步。
170 0
|
移动开发 前端开发 JavaScript
零基础如何上手APICloud App、小程序多端开发
业务需求变化快、开发人员成本高是现在企业面临的主要问题。多端开发技术则可以很好的解决这些问题,开发一次可以生成iOS、Android、小程序、Web等多端应用。APICloud凭借多年的移动开发技术积累,为开发者提供了一套高性能的多端开发技术,可以高效的开发企业级应用程序。
834 2
零基础如何上手APICloud App、小程序多端开发
|
开发工具 Android开发 开发者
使用APICloud & MobTech SDK 快速实现分享到社交平台功能
做移动端开发的同学对分享功能应该很了解了,比如很多APP都有分享到微信、微博的功能,可以分享文本、图片、链接、音乐等。本文将为大家讲解如何使用APICloud & MobTech SDK 快速实现分享到社交平台的功能。
202 0
使用APICloud & MobTech SDK 快速实现分享到社交平台功能