E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

背景:我们在测试快要上线的小程序的时候,往往会被一些条件限制住比如要获取小程序页面带的参数,而这些参数是从别人转发过来或者是从app分享过来的打开调试虽然可以查看,但是不能复制!!! 为此我专门做了一个简易的可复制的console工具效果图:代码和使用方法: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’copy/button    /view/scroll-viewview class=’console-copy-mask’ wx-if=”{{consoleCopyShow}}” bindtap=’hideConsole’/viewview class=’console-copy-mark’ wx-if=”{{!consoleCopyShow}}” bindtap=’showConsole’Copy/view将以上代码放要你需要展示的页面的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)     },

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序手机预览复制调试内容
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏