小程序手机预览复制调试内容

背景:

我们在测试快要上线的小程序的时候,往往会被一些条件限制住

比如要获取小程序页面带的参数,而这些参数是从别人转发过来或者是从app分享过来的

打开调试虽然可以查看,但是不能复制!!!

 

为此我专门做了一个简易的可复制的console

工具效果图:

小程序手机预览复制调试内容_第1张图片小程序手机预览复制调试内容_第2张图片

代码和使用方法:

wxml:

<scroll-view scroll-y="true" class='console-copy-content' wx-if="{
      {consoleCopyShow}}">
    <view class='console-copy-item' wx:for='{
      {consoleArr}}' >
        {
      {item}}
        <button type="primary" id='console_{
      {index}}' bindtap='copyConsole'>copybutton>
    view>
scroll-view>
<view class='console-copy-mask' wx-if="{
      {consoleCopyShow}}" bindtap='hideConsole'>view>
<view class='console-copy-mark' wx-if="{
      {!consoleCopyShow}}" bindtap='showConsole'>Copyview>

将以上代码放要你需要展示的页面的wxml文件下

 

wxss:

.console-copy-mark{
      
    width: 80rpx;
    height: 80rpx;
    background-color: #1AAD19;
    position: fixed;
    left: 10rpx;
    bottom: 10rpx;
    border-radius: 50%;
    text-align: center;
    line-height: 80rpx;
    color: white;
    font-size: 0.7rem;
    z-index: 9999999;
}
.console-copy-content{
      
    width: 100%;
    height: 50%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: white;
    z-index: 9999999;
    overflow: auto;
}
.console-copy-item{
      
    height: auto;
    min-height: 30rpx;
    width: 100%;
    text-indent: 0.5rem;
    color: #111;
    font-size: 0.8rem;
    padding: 10rpx 5rpx;
    border-bottom: 1rpx solid #ccc; 
    word-wrap:break-word;
    
}
.console-copy-item button{
      
    width: 100rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    text-indent: 0;
    padding: 0;
    margin: 0;
    position: relative;
    left: 100%;
    margin-left: -120rpx;
    font-size: 0.6rem;
}
.console-copy-mask{
      
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position:fixed;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 8888888;
}
View CSS Code

将以上CSS代码放要你需要展示的页面的wxss文件下

js:

let initConsole=function() {
    let that = this;
    // 重写console
    this.console = function(str) {
        let res = '', arr=[];
        for(var i in arguments){
            res += JSON.stringify(arguments[i]).replace(/\"/g, "")+' ';
        }
        if (that.data.consoleArr) {
            arr = that.data.consoleArr;
            arr.push(res);
        } else {
            arr = [res]
        }
        that.setData({
            consoleArr: arr
        })
    }
    console.log = this.console;
    // 列表显示事件
    this.showConsole = function() {
        that.setData({
            consoleCopyShow: true
        })
    }
    // 列表隐藏事件
    this.hideConsole = function() {
        that.setData({
            consoleCopyShow: false
        })
    }
    // 复制事件
    this.copyConsole = function(e) {
        let index = e.currentTarget.id.split('_')[1];
        let text = that.data.consoleArr[index];
        wx.setClipboardData({
            data: text,
            success(res) {
                wx.showToast({
                    title: '复制成功',
                    icon: 'none'
                })
            }
        })

    }

}
View JS Code

 

将以上js代码放要你需要展示的页面的js文件下

注意:js代码放于全局下,不是page内

    并在onLoad下初始化,如下:

onLoad: function(options) {
        initConsole.call(this) 
    },

  

 

转载于:https://www.cnblogs.com/momen/p/11327059.html

你可能感兴趣的:(json)