HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uni-app下截屏分享二维码页面

官方文档只有一个监听截屏事件的,而且还不支持app的,看了其他人的帖子等等都没直接找到可以复制的代码,看了看html5+api http://ask.dcloud.net.cn/question/5344https://ask.dcloud.net.cn/article/35036这两个帖子,写了如下代码,安卓上可以用,就是不知道在ios上可行啊!?分享下喽~

<template>  
    <view class="content">  
        <view class="nav-top">1.让朋友的手机扫描下面的二维码即可安装</view>  
        <view class="main">  
            <view class="lay1"><view class="line"></view></view>  
            <view class="lay2">  
                <view class="qr">  
                    <view class="qr-img">  
                        <image  
                            src="../../static/qr.png"  
                            style="height: 200upx;width: 200upx;"  
                        ></image>  
                    </view>  
                    <view class="qr-txt">扫描二维码下载安装包</view>  
                </view>  
            </view>  
            <view class="lay3"><view class="line"></view></view>  
        </view>  
        <view class="code-btn">  
            <view class="line-btn"><view class="btn" @tap="capture()">点击保存至手机相册</view></view>  
        </view>  
    </view>  
</template>  

<script>  
    export default{  
        methods: {  
            capture() {  
                var pages = getCurrentPages();  
                var page = pages[pages.length - 1];  
                console.log('当前页:'+pages.length-1);  
                var bitmap=null;  
                var currentWebview = page.$getAppWebview();    
                bitmap = new plus.nativeObj.Bitmap('amway_img');  
                // 将webview内容绘制到Bitmap对象中  
                currentWebview.draw(bitmap,function(){  
                    console.log('截屏绘制图片成功');  
                    bitmap.save( "_doc/a.jpg"  
                    ,{}  
                    ,function(i){  
                        console.log('保存图片成功:'+JSON.stringify(i));  
                        uni.saveImageToPhotosAlbum({  
                            filePath: i.target,  
                            success: function () {  
                                bitmap.clear(); //销毁Bitmap图片  
                                uni.showToast({  
                                    title: '保存图片成功',  
                                    mask: false,  
                                    duration: 1500  
                                });  
                            }  
                        });  
                    }  
                    ,function(e){  
                        console.log('保存图片失败:'+JSON.stringify(e));  
                    });  
                },function(e){  
                    console.log('截屏绘制图片失败:'+JSON.stringify(e));  
                });  
                //currentWebview.append(amway_bit);    
            }  
        },  
    }  

</script>  

<style>  
page {  
    background-color: #2d355c;  
}  
.content {  
}  
.nav-top {  
    color: #ffffff;  
    font-size: 35upx;  
    text-align: center;  
    margin: 20upx 0;  
}  
.main {  
    position: relative;  
    width: 100%;  
    margin-top: 50upx;  
}  
.main .lay1 {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    right: 0;  
    left: 0;  
    z-index: 3000;  
}  
.main .lay1 .line {  
    height: 100upx;  
    width: 100%;  
    border-radius: 50px;  
    background-color: #e28f0b;  
    margin-top: 100upx;  
}  
.lay2 {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    right: 0;  
    left: 0;  
    z-index: 4000;  
}  
.lay2 .qr {  
    width: 70%;  
    margin: 0 auto;  
    height: 700upx;  
    background-color: #3958ab;  
}  
.qr-img {  
    text-align: center;  
    padding-top: 50%;  
}  
.qr-txt {  
    color: #ffffff;  
    text-align: center;  
    margin-top: 50upx;  
}  
.lay3 {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    right: 0;  
    left: 0;  
    z-index: 4000;  
    text-align: center;  
}  
.lay3 .line {  
    height: 100upx;  
    width: 85%;  
    border-radius: 50px;  
    background-color: #e28f0b;  
    margin: 40upx auto;  
    box-shadow: #cccccc 0px 3px 10px;  
}  
.code-btn {  
    width: 100%;  
    color: #ffffff;  
    height: 100%;  
    text-align: center;  
}  
.line-btn {  
    position: absolute;  
    bottom: 200upx;  
    left: 0upx;  
    right: 0upx;  
    width: 100%;  
    display: flex;  
    justify-content: center;  
}  
.btn {  
    width: 400upx;  
    padding: 35upx;  
    background-color: #e28f0b;  
    border-radius: 50px;  
}  
.btn:active{  
    background-color: #FEC607;  
}  
</style>
继续阅读 »

官方文档只有一个监听截屏事件的,而且还不支持app的,看了其他人的帖子等等都没直接找到可以复制的代码,看了看html5+api http://ask.dcloud.net.cn/question/5344https://ask.dcloud.net.cn/article/35036这两个帖子,写了如下代码,安卓上可以用,就是不知道在ios上可行啊!?分享下喽~

<template>  
    <view class="content">  
        <view class="nav-top">1.让朋友的手机扫描下面的二维码即可安装</view>  
        <view class="main">  
            <view class="lay1"><view class="line"></view></view>  
            <view class="lay2">  
                <view class="qr">  
                    <view class="qr-img">  
                        <image  
                            src="../../static/qr.png"  
                            style="height: 200upx;width: 200upx;"  
                        ></image>  
                    </view>  
                    <view class="qr-txt">扫描二维码下载安装包</view>  
                </view>  
            </view>  
            <view class="lay3"><view class="line"></view></view>  
        </view>  
        <view class="code-btn">  
            <view class="line-btn"><view class="btn" @tap="capture()">点击保存至手机相册</view></view>  
        </view>  
    </view>  
</template>  

<script>  
    export default{  
        methods: {  
            capture() {  
                var pages = getCurrentPages();  
                var page = pages[pages.length - 1];  
                console.log('当前页:'+pages.length-1);  
                var bitmap=null;  
                var currentWebview = page.$getAppWebview();    
                bitmap = new plus.nativeObj.Bitmap('amway_img');  
                // 将webview内容绘制到Bitmap对象中  
                currentWebview.draw(bitmap,function(){  
                    console.log('截屏绘制图片成功');  
                    bitmap.save( "_doc/a.jpg"  
                    ,{}  
                    ,function(i){  
                        console.log('保存图片成功:'+JSON.stringify(i));  
                        uni.saveImageToPhotosAlbum({  
                            filePath: i.target,  
                            success: function () {  
                                bitmap.clear(); //销毁Bitmap图片  
                                uni.showToast({  
                                    title: '保存图片成功',  
                                    mask: false,  
                                    duration: 1500  
                                });  
                            }  
                        });  
                    }  
                    ,function(e){  
                        console.log('保存图片失败:'+JSON.stringify(e));  
                    });  
                },function(e){  
                    console.log('截屏绘制图片失败:'+JSON.stringify(e));  
                });  
                //currentWebview.append(amway_bit);    
            }  
        },  
    }  

</script>  

<style>  
page {  
    background-color: #2d355c;  
}  
.content {  
}  
.nav-top {  
    color: #ffffff;  
    font-size: 35upx;  
    text-align: center;  
    margin: 20upx 0;  
}  
.main {  
    position: relative;  
    width: 100%;  
    margin-top: 50upx;  
}  
.main .lay1 {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    right: 0;  
    left: 0;  
    z-index: 3000;  
}  
.main .lay1 .line {  
    height: 100upx;  
    width: 100%;  
    border-radius: 50px;  
    background-color: #e28f0b;  
    margin-top: 100upx;  
}  
.lay2 {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    right: 0;  
    left: 0;  
    z-index: 4000;  
}  
.lay2 .qr {  
    width: 70%;  
    margin: 0 auto;  
    height: 700upx;  
    background-color: #3958ab;  
}  
.qr-img {  
    text-align: center;  
    padding-top: 50%;  
}  
.qr-txt {  
    color: #ffffff;  
    text-align: center;  
    margin-top: 50upx;  
}  
.lay3 {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    right: 0;  
    left: 0;  
    z-index: 4000;  
    text-align: center;  
}  
.lay3 .line {  
    height: 100upx;  
    width: 85%;  
    border-radius: 50px;  
    background-color: #e28f0b;  
    margin: 40upx auto;  
    box-shadow: #cccccc 0px 3px 10px;  
}  
.code-btn {  
    width: 100%;  
    color: #ffffff;  
    height: 100%;  
    text-align: center;  
}  
.line-btn {  
    position: absolute;  
    bottom: 200upx;  
    left: 0upx;  
    right: 0upx;  
    width: 100%;  
    display: flex;  
    justify-content: center;  
}  
.btn {  
    width: 400upx;  
    padding: 35upx;  
    background-color: #e28f0b;  
    border-radius: 50px;  
}  
.btn:active{  
    background-color: #FEC607;  
}  
</style>
收起阅读 »

关于 using unregistered native plugin 'DCloud-RichAlert' 问题

using unregistered native plugin DCloud_RichAlert' 原生插件

最近很多人询问此问题 "using unregistered native plugin 'DCloud-RichAlert" 插件无法运行!".
导致出现此问题的原因及解决方案:
1、请升级 HBuilderX 到1.6.2以上版本,然后重新打自定义基座包。注意是自定义基座包!!!!。运行时请勾选自定义基座!


2、插件没有放入到指定文件夹下。具体配置请查看 http://ask.dcloud.net.cn/article/35412
3、android目前不支持插件在模拟器下运行,所以要使用真机运行测试。

继续阅读 »

最近很多人询问此问题 "using unregistered native plugin 'DCloud-RichAlert" 插件无法运行!".
导致出现此问题的原因及解决方案:
1、请升级 HBuilderX 到1.6.2以上版本,然后重新打自定义基座包。注意是自定义基座包!!!!。运行时请勾选自定义基座!


2、插件没有放入到指定文件夹下。具体配置请查看 http://ask.dcloud.net.cn/article/35412
3、android目前不支持插件在模拟器下运行,所以要使用真机运行测试。

收起阅读 »

HBuilderX scss/sass 使用教程

sass scss HBuilderX

1. 安装node-sass插件

在HBuilderX中,使用scss/sass是需要安装node-sass编译插件的。

点击菜单【工具】【插件安装】

如果安装失败,请见:http://ask.dcloud.net.cn/article/35468

2. 编译scss文件

选中scss文件,鼠标右键,点击菜单【外部命令】【sass】【编译sass/scss】

3. 编译风格与样式输出

目前,node-sass的默认编译风格如下:

{  
    'include-path': process.cwd(),  
    'indent-type': 'space',  
    'indent-width': 2,  
    linefeed: 'lf',  
    'output-style': 'nested',  // 嵌套输出  
    precision: 5,  
    quiet: false,  
    recursive: true  
}

修改编译风格的方法,打开sass配置文件,修改command。

比如:

$ "command": "${programPath} ${file} ${fileBasename}.css --output-style compact"

风格为:展开输出expanded、紧凑型compact、压缩输出compressed

继续阅读 »

1. 安装node-sass插件

在HBuilderX中,使用scss/sass是需要安装node-sass编译插件的。

点击菜单【工具】【插件安装】

如果安装失败,请见:http://ask.dcloud.net.cn/article/35468

2. 编译scss文件

选中scss文件,鼠标右键,点击菜单【外部命令】【sass】【编译sass/scss】

3. 编译风格与样式输出

目前,node-sass的默认编译风格如下:

{  
    'include-path': process.cwd(),  
    'indent-type': 'space',  
    'indent-width': 2,  
    linefeed: 'lf',  
    'output-style': 'nested',  // 嵌套输出  
    precision: 5,  
    quiet: false,  
    recursive: true  
}

修改编译风格的方法,打开sass配置文件,修改command。

比如:

$ "command": "${programPath} ${file} ${fileBasename}.css --output-style compact"

风格为:展开输出expanded、紧凑型compact、压缩输出compressed

收起阅读 »

uniapp使用jsencrypt加密中的坑,附带源码js

uniapp

解决地址
https://blog.csdn.net/qq_29556507/article/details/88360013

解决地址
https://blog.csdn.net/qq_29556507/article/details/88360013

uniapp 混合开发 Cannot read property 'onUniNViewMessage' of undefined

uniapp

uniapp 混合开发 Cannot read property 'onUniNViewMessage' of undefined

看报错原因

解决地址

https://blog.csdn.net/qq_29556507/article/details/86519401

继续阅读 »

uniapp 混合开发 Cannot read property 'onUniNViewMessage' of undefined

看报错原因

解决地址

https://blog.csdn.net/qq_29556507/article/details/86519401

收起阅读 »

uni-app 生成二维码

fork 了 qrcode, 几行代码简单粗暴画出了二维码
https://github.com/guillaume-lin/qrcodejs/blob/master/README.md

fork 了 qrcode, 几行代码简单粗暴画出了二维码
https://github.com/guillaume-lin/qrcodejs/blob/master/README.md

离线打包获取不到clientid和QQ授权、分享闪退问题

App离线打包

创建安卓应用的时候targetSdkVersion默认是28。导致部分安卓手机获取不到clientid,QQ授权分享闪退,改成21就可以了。

创建安卓应用的时候targetSdkVersion默认是28。导致部分安卓手机获取不到clientid,QQ授权分享闪退,改成21就可以了。

一个简单5+录音和播放音频分享

声音

少废话,直接上代码

    <body>  
        <button id="start" type="button">录音</button>  

        <button type="button" id="stop">停止</button>  

        <div id="data-info">  
            <button type="button" id="play">开始播放</button>  

            <button type="button" id="pause-audio">暂停播放</button>  

            <button type="button" id="continue">继续播放</button>  
        </div>  
    </body>  
    <script type="text/javascript">  
        var audio_src = null;  
        var p = null;  
        mui.plusReady(function(){  
            var start = document.getElementById('start');  
            var stop = document.getElementById('stop');  
            var play = document.getElementById('play');           
            var pause = document.getElementById('pause-audio');     //暂停播放  
            var cont_inue = document.getElementById('continue');    //继续播放  
            play.addEventListener('tap',function(){  
                p = plus.audio.createPlayer(audio_src);  
                p.play( function () {  
                    alert( "Audio play success!" );  
                }, function ( e ) {  
                    alert( "Audio play failed: " + e.message );  
                } );  
            });  
            //暂停播放  
            pause.addEventListener('tap',function(){  
                p.pause();  
            });  
            //继续播放  
            cont_inue.addEventListener('tap',function(){  
                p.resume();  
            })  
            var r = plus.audio.getRecorder();   
            start.addEventListener('tap',function(){  
                // 录音操作  
                if ( r == null ) {  
                    alert( "Device not ready!" );  
                        return;   
                }    
                r.record({filename:'_doc/audio/',format:'mp3',}, function(p){    
                    console.log('录音完成:'+p);    

                    audio_src = p;  
                }, function(e){    
                    console.log('录音失败:'+e.message);    
                });    
            });  
            stop.addEventListener('tap',function(){  
                r.stop();  
            })  
        });  
    </script>

希望对新手不懂的有帮助,交流Q群:228206998

继续阅读 »

少废话,直接上代码

    <body>  
        <button id="start" type="button">录音</button>  

        <button type="button" id="stop">停止</button>  

        <div id="data-info">  
            <button type="button" id="play">开始播放</button>  

            <button type="button" id="pause-audio">暂停播放</button>  

            <button type="button" id="continue">继续播放</button>  
        </div>  
    </body>  
    <script type="text/javascript">  
        var audio_src = null;  
        var p = null;  
        mui.plusReady(function(){  
            var start = document.getElementById('start');  
            var stop = document.getElementById('stop');  
            var play = document.getElementById('play');           
            var pause = document.getElementById('pause-audio');     //暂停播放  
            var cont_inue = document.getElementById('continue');    //继续播放  
            play.addEventListener('tap',function(){  
                p = plus.audio.createPlayer(audio_src);  
                p.play( function () {  
                    alert( "Audio play success!" );  
                }, function ( e ) {  
                    alert( "Audio play failed: " + e.message );  
                } );  
            });  
            //暂停播放  
            pause.addEventListener('tap',function(){  
                p.pause();  
            });  
            //继续播放  
            cont_inue.addEventListener('tap',function(){  
                p.resume();  
            })  
            var r = plus.audio.getRecorder();   
            start.addEventListener('tap',function(){  
                // 录音操作  
                if ( r == null ) {  
                    alert( "Device not ready!" );  
                        return;   
                }    
                r.record({filename:'_doc/audio/',format:'mp3',}, function(p){    
                    console.log('录音完成:'+p);    

                    audio_src = p;  
                }, function(e){    
                    console.log('录音失败:'+e.message);    
                });    
            });  
            stop.addEventListener('tap',function(){  
                r.stop();  
            })  
        });  
    </script>

希望对新手不懂的有帮助,交流Q群:228206998

收起阅读 »

微信公众号推送消息 怎么不限制?

微信公众平台>订阅号每天只能发1次,服务号1个月能发4次,每天次数有限如何破解

微号帮功能实现48小时不限制推送、模板消息不限制群发

print('{@nickname}参数替换粉丝昵称')

48小时每天多次推送

当粉丝和公众号发生互动时,公众号会将信号推送给开发者,开发者可以在48小时内推送消息给粉丝,以达到不限制次数推送信息给粉丝,公众号互动操作有粉丝发送信息给公众号、

粉丝点击公众号菜单(仅有点击推事件、扫码推事件、扫码推事件且弹出“消息接收中”提示框这3种菜单情况才行)、关注公众号、扫描公众号二维码、在公众号支付成功、粉丝维权

模板消息每天多次群发

公众号模板消息用于公众号向粉丝发送重要的服务通知,只能用于符合其要求的服务场景中,如服务预定通知,商品购买成功通知等,群发内容有限制,不能 影响粉丝。当前每个账号的模板消息的日调用上限为10万次,单个模板没有特殊限制。

继续阅读 »

微信公众平台>订阅号每天只能发1次,服务号1个月能发4次,每天次数有限如何破解

微号帮功能实现48小时不限制推送、模板消息不限制群发

print('{@nickname}参数替换粉丝昵称')

48小时每天多次推送

当粉丝和公众号发生互动时,公众号会将信号推送给开发者,开发者可以在48小时内推送消息给粉丝,以达到不限制次数推送信息给粉丝,公众号互动操作有粉丝发送信息给公众号、

粉丝点击公众号菜单(仅有点击推事件、扫码推事件、扫码推事件且弹出“消息接收中”提示框这3种菜单情况才行)、关注公众号、扫描公众号二维码、在公众号支付成功、粉丝维权

模板消息每天多次群发

公众号模板消息用于公众号向粉丝发送重要的服务通知,只能用于符合其要求的服务场景中,如服务预定通知,商品购买成功通知等,群发内容有限制,不能 影响粉丝。当前每个账号的模板消息的日调用上限为10万次,单个模板没有特殊限制。

收起阅读 »

Android 9.0 http无法访问网络问题或者无法调用接口

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29634351/article/details/86654535

*最近用户报来一个投诉,说app登录不上去了,我用我8.0的手机测试了一下,明显可以登录,后面得知用户的系统是9.0系统```javascript


1  
原来9.0系统已经默认不支持http请求了,谷歌默认要求链接是加密链接了,要解决这个问题有几种方案,第一个是把http改成https,这个要让后台更改  

还有一个就是把targetSdkVersion 改成27或者以下。  

还有一个方案就是在res目录添加一个xml文件夹,新建一个xml  

编写:  

<?xml version="1.0" encoding="utf-8"?>  

<network-security-config>  
    <base-config cleartextTrafficPermitted="true" />  
</network-security-config>  
1  
2  
3  
4  
5  
在AndroidManifest.xml清单文件上加入  

更改之后,成功解决问题!  
---------------------   
作者:肖旺银   
来源:CSDN   
原文:https://blog.csdn.net/qq_29634351/article/details/86654535   
版权声明:本文为博主原创文章,转载请附上博文链接!  

https://blog.csdn.net/qq_29634351/article/details/86654535
继续阅读 »

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29634351/article/details/86654535

*最近用户报来一个投诉,说app登录不上去了,我用我8.0的手机测试了一下,明显可以登录,后面得知用户的系统是9.0系统```javascript


1  
原来9.0系统已经默认不支持http请求了,谷歌默认要求链接是加密链接了,要解决这个问题有几种方案,第一个是把http改成https,这个要让后台更改  

还有一个就是把targetSdkVersion 改成27或者以下。  

还有一个方案就是在res目录添加一个xml文件夹,新建一个xml  

编写:  

<?xml version="1.0" encoding="utf-8"?>  

<network-security-config>  
    <base-config cleartextTrafficPermitted="true" />  
</network-security-config>  
1  
2  
3  
4  
5  
在AndroidManifest.xml清单文件上加入  

更改之后,成功解决问题!  
---------------------   
作者:肖旺银   
来源:CSDN   
原文:https://blog.csdn.net/qq_29634351/article/details/86654535   
版权声明:本文为博主原创文章,转载请附上博文链接!  

https://blog.csdn.net/qq_29634351/article/details/86654535
收起阅读 »