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日志并进行多维度分析。
目录
相关文章
|
5月前
|
小程序 开发者
uniapp实战 —— 开发微信小程序的调试技巧
uniapp实战 —— 开发微信小程序的调试技巧
450 1
|
5月前
|
前端开发 开发者
移动端-------app开发02,了解apicloud功能和使用,真机测试
移动端-------app开发02,了解apicloud功能和使用,真机测试
|
移动开发 小程序 JavaScript
uniapp开发打包ios应用踩坑记
iOS 设备的一个唯一识别码,每台 iOS 设备都有一个独一无二的编码,这个编码,我们称之为识别码,也叫做UDID
192 0
|
小程序 JavaScript API
如何在微信小程序中使用第三方SDK?
如何在微信小程序中使用第三方SDK?
2971 0
|
Web App开发 小程序 测试技术
干货| app自动化测试之Andriod微信小程序的自动化测试
干货| app自动化测试之Andriod微信小程序的自动化测试
|
移动开发 前端开发 JavaScript
零基础如何上手APICloud App、小程序多端开发
业务需求变化快、开发人员成本高是现在企业面临的主要问题。多端开发技术则可以很好的解决这些问题,开发一次可以生成iOS、Android、小程序、Web等多端应用。APICloud凭借多年的移动开发技术积累,为开发者提供了一套高性能的多端开发技术,可以高效的开发企业级应用程序。
863 2
零基础如何上手APICloud App、小程序多端开发
|
Web App开发 小程序 测试技术
干货| app自动化测试之Andriod微信小程序的自动化测试
干货| app自动化测试之Andriod微信小程序的自动化测试
|
开发工具 Android开发 开发者
使用APICloud & MobTech SDK 快速实现分享到社交平台功能
做移动端开发的同学对分享功能应该很了解了,比如很多APP都有分享到微信、微博的功能,可以分享文本、图片、链接、音乐等。本文将为大家讲解如何使用APICloud & MobTech SDK 快速实现分享到社交平台的功能。
237 0
使用APICloud & MobTech SDK 快速实现分享到社交平台功能
|
JSON 开发工具 Android开发
APICloud App开发上手经验之模块调用
APICloud 提供了很多方便好用的模块,只要学习自己想要使用的模块的文档,然后调用模块就可以使用了。使用模块可以大大减少自己需要写的代码量,而且对于新手来说,在自己开发经验不足的情况下,也许并不能胜任一些功能的开发,这时候使用模块就可以让自己的 APP 也拥有这些功能了,看到自己的 APP 也具有了丰富的功能会比较有成就感,不会使我们的学习感到枯燥,也不容易感觉学习太难而因此止步。
213 0
|
前端开发 JavaScript 数据格式
使用APICloud AVM多端框架开发仿微信通讯录功能
本项目基于APICloud AVM框架编写,因此思路要转变下比如标签的用法、CSS样式表的写法、项目的目录结构、dom的操作等都不一样了,完全是Vue、React的编程思维。
229 0
使用APICloud AVM多端框架开发仿微信通讯录功能