HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

HX里面如何将css样式格式化成一个样式一行

格式化 css

找了很多资料,摸索了很久,终于找到了文件。
多年习惯,css样式喜欢一个样式一行,这样一眼可以看到更多信息。此处区别于ctrl+shift+k格式化成所有样式全部在一行。
文件路径:HBuilderX/plugins/format/node_modules/js-beautify/js/src/css/beautifier.js
注释295行、298行、369行。
同时配置该文件:HBuilderX/plugins/format/jsbeautifyrc.js
增加以下配置项:
"css": {
"newline_between_rules": false,
"selector_separator_newline": false,
"preserve_newlines": false
}
丸美解决

继续阅读 »

找了很多资料,摸索了很久,终于找到了文件。
多年习惯,css样式喜欢一个样式一行,这样一眼可以看到更多信息。此处区别于ctrl+shift+k格式化成所有样式全部在一行。
文件路径:HBuilderX/plugins/format/node_modules/js-beautify/js/src/css/beautifier.js
注释295行、298行、369行。
同时配置该文件:HBuilderX/plugins/format/jsbeautifyrc.js
增加以下配置项:
"css": {
"newline_between_rules": false,
"selector_separator_newline": false,
"preserve_newlines": false
}
丸美解决

收起阅读 »

wap2app添加底部选项卡后顶部状态栏与网页层叠解决方法

底部选项卡

添加底部选项卡后顶部状态栏与网页层叠在一起了
如图:

解决方法:manifest.json -------》代码视图-------》"immersed": "supportedDevice"改为"immersed": "false"

修改后就恢复正常了

继续阅读 »

添加底部选项卡后顶部状态栏与网页层叠在一起了
如图:

解决方法:manifest.json -------》代码视图-------》"immersed": "supportedDevice"改为"immersed": "false"

修改后就恢复正常了

收起阅读 »

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

收起阅读 »