HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

用一张正方形图片搞定安卓启动页

.9.png

用一张正方形图片搞定安卓启动页
使用.9.png格式图片,我们可以将启动页设置为上中下左右任意区域图片保真不变形的效果。

示例Dome下载:

安卓启动图问题
HBuilderX上android端提供的三个尺寸的启动图片完全不能满足全面屏盛行的时代,各种比例的屏幕上出现启动图片变形问题,让人很难受。
DCloud官方的解决方案是使用.9.png图片详见。

个人解决方法
以前我都是建议不要是有复杂图案来作为启动图片,直接简单的写几个字就行,这样字体的变形是不容易被人察觉的。
我前期还调研了几家大厂的应用启动页,图案都非常简单。
个人很推荐这种方式,比较简单易懂。

效果参考下图:

但是种方式的局限性也很大,一般要求放个应用logo上去时,就得考虑下面的方案了。

.9.png图片
安卓官方深知开发者们适配屏幕的痛苦,提供了.9.png格式。
但是一般开发时,这种格式图片都是用来做什么按键背景、聊天框背景的。
拿来做启动页也行,但是注意,它的适配逻辑是对指定的取消进行复制;那么启动图要求必须有纯色的横向区域和竖向区域,或纹理

正方形启动图示例
一般的,有上中下左右几个区域会放置内容,布局结构如下图(一张正方形的图片)。

未做.9.png时,直接设置为启动页的效果如下:
明显几个圆形都发生了变形(废话了,肯定会变形的)。

再来看看使用.9.png后的效果:
满足适配大多数屏幕不变形的需求。

标注示例图:
按照此标注方法,可以满足绝大多数启动图的制作需求。

  • 底部和右边的黑边拉满即可,不用过多操作。
  • 主要调整顶部和左侧的拉升区域,区域大小会影响拉升时的比例。

关于.9.png的制作
1、可以直接使用ps进行制作,注意不能压缩。
2、Android stoud 可以直接打开.9.png图片编辑。
3、eclipse 可以安装相关插件进行.9.png图片编辑。

> 有朋友在使用Android Studio 自带工具调试时,出现四边都是满的黑边,切无法调整的情况。
这种情况:

  • 1、使用android studio时只需选中需要生成的png文件,然后右键,点击create 9-patch file 选项。
  • 2、也可以使用PS手动给图片四周增加1px透明边框,然后在使用Android Studio 自带工具调整。

注意事项
1、9.png图片制作完成后,文件不能进行压缩
2、使用单张9png作为启动页时,在屏幕尺寸跨度太大时会有显示差异,见下图:

注意:
如果你的应用需要兼容上古版本的android,请注意上古版本可能不兼容.9.png,制作.9.png时还是别用正方形,尽量使用官方内定的三个尺寸来制作。
(我手里目前没有不支持的android版本,朋友们要是遇到了麻烦反馈一下)。

优化四个边的间距

插件市场下载源码

继续阅读 »

用一张正方形图片搞定安卓启动页
使用.9.png格式图片,我们可以将启动页设置为上中下左右任意区域图片保真不变形的效果。

示例Dome下载:

安卓启动图问题
HBuilderX上android端提供的三个尺寸的启动图片完全不能满足全面屏盛行的时代,各种比例的屏幕上出现启动图片变形问题,让人很难受。
DCloud官方的解决方案是使用.9.png图片详见。

个人解决方法
以前我都是建议不要是有复杂图案来作为启动图片,直接简单的写几个字就行,这样字体的变形是不容易被人察觉的。
我前期还调研了几家大厂的应用启动页,图案都非常简单。
个人很推荐这种方式,比较简单易懂。

效果参考下图:

但是种方式的局限性也很大,一般要求放个应用logo上去时,就得考虑下面的方案了。

.9.png图片
安卓官方深知开发者们适配屏幕的痛苦,提供了.9.png格式。
但是一般开发时,这种格式图片都是用来做什么按键背景、聊天框背景的。
拿来做启动页也行,但是注意,它的适配逻辑是对指定的取消进行复制;那么启动图要求必须有纯色的横向区域和竖向区域,或纹理

正方形启动图示例
一般的,有上中下左右几个区域会放置内容,布局结构如下图(一张正方形的图片)。

未做.9.png时,直接设置为启动页的效果如下:
明显几个圆形都发生了变形(废话了,肯定会变形的)。

再来看看使用.9.png后的效果:
满足适配大多数屏幕不变形的需求。

标注示例图:
按照此标注方法,可以满足绝大多数启动图的制作需求。

  • 底部和右边的黑边拉满即可,不用过多操作。
  • 主要调整顶部和左侧的拉升区域,区域大小会影响拉升时的比例。

关于.9.png的制作
1、可以直接使用ps进行制作,注意不能压缩。
2、Android stoud 可以直接打开.9.png图片编辑。
3、eclipse 可以安装相关插件进行.9.png图片编辑。

> 有朋友在使用Android Studio 自带工具调试时,出现四边都是满的黑边,切无法调整的情况。
这种情况:

  • 1、使用android studio时只需选中需要生成的png文件,然后右键,点击create 9-patch file 选项。
  • 2、也可以使用PS手动给图片四周增加1px透明边框,然后在使用Android Studio 自带工具调整。

注意事项
1、9.png图片制作完成后,文件不能进行压缩
2、使用单张9png作为启动页时,在屏幕尺寸跨度太大时会有显示差异,见下图:

注意:
如果你的应用需要兼容上古版本的android,请注意上古版本可能不兼容.9.png,制作.9.png时还是别用正方形,尽量使用官方内定的三个尺寸来制作。
(我手里目前没有不支持的android版本,朋友们要是遇到了麻烦反馈一下)。

优化四个边的间距

插件市场下载源码

收起阅读 »

侧滑菜单使用导致滚动条不起作用以及上拉加载、下拉刷新都失效问题的解决方案

下拉刷新 上拉加载 侧滑菜单

侧滑菜单有很大的坑,根据网友的描述,在苹果上正常,安卓上不能用。并且社区里很多人提了问题都没得回复。
目前最有效的方法只能修改源码,增加window.h5pullDown的判断。
在引入mui前添加一个全局变量
<script>var h5pullDown = true;</script>
方案一
我是直接改的mui.min.js,源码这里使用了变量替换,全文总共三个a.os.plus&&a.os.android。第一个是muiback的判断处理,跳过。第二个就是上面2770那个地方(前后核对关键词container或者plusready、webview),直接添加并且,增加&&window.h5pullDown。第三个是4920的那个地方,这里相当于在方法头部,并且不是使用非判断,我差点以为找错了,所以这里直接接着使用并且,增加&&window.h5pullDown。保存。测试一切都好了。
方案二
而mui.js里,需要找到2770行,其大致内容是
var container=pullRefreshOptions.container;
if(container){
var $container=$(container);
if($container.length==1){
if($.os.plus&&$.os.android &&window.h5pullDown){//就是这里需要新增window.h5pullDown的判断,增加并且符号
$.plusReady(function(){
var webview=plus.webview.currentWebview();
......
})
}
}
然后是第二处地方4920行,大致内容是
$(function($,document){
if(!($.os.plus&&$.os.android)||window.h5pullDown){//就是这里需要新增window.h5pullDown的判断,如果是有!,需要添加或者符号
return;
}
//这里如果没有return,就直接在判断时使用并且,要求是安卓的5+环境
})
方案二是手打代码,整体复制请仔细确认。

继续阅读 »

侧滑菜单有很大的坑,根据网友的描述,在苹果上正常,安卓上不能用。并且社区里很多人提了问题都没得回复。
目前最有效的方法只能修改源码,增加window.h5pullDown的判断。
在引入mui前添加一个全局变量
<script>var h5pullDown = true;</script>
方案一
我是直接改的mui.min.js,源码这里使用了变量替换,全文总共三个a.os.plus&&a.os.android。第一个是muiback的判断处理,跳过。第二个就是上面2770那个地方(前后核对关键词container或者plusready、webview),直接添加并且,增加&&window.h5pullDown。第三个是4920的那个地方,这里相当于在方法头部,并且不是使用非判断,我差点以为找错了,所以这里直接接着使用并且,增加&&window.h5pullDown。保存。测试一切都好了。
方案二
而mui.js里,需要找到2770行,其大致内容是
var container=pullRefreshOptions.container;
if(container){
var $container=$(container);
if($container.length==1){
if($.os.plus&&$.os.android &&window.h5pullDown){//就是这里需要新增window.h5pullDown的判断,增加并且符号
$.plusReady(function(){
var webview=plus.webview.currentWebview();
......
})
}
}
然后是第二处地方4920行,大致内容是
$(function($,document){
if(!($.os.plus&&$.os.android)||window.h5pullDown){//就是这里需要新增window.h5pullDown的判断,如果是有!,需要添加或者符号
return;
}
//这里如果没有return,就直接在判断时使用并且,要求是安卓的5+环境
})
方案二是手打代码,整体复制请仔细确认。

收起阅读 »

ios 13.4中浏览器根据图片 EXIF 信息自动进行回正

在项目维护时客户反映iphone手机上传图片时,图片自动旋转了,但是自己的手机不会,
我的是iOS 12.4的系统客户的是13.4.1
iOS 13.4之前浏览器不会对带 EXIF 信息的图片进行回正,但是自从 iOS 更新到 13.4.1 后,浏览器支持自动回正了。

继续阅读 »

在项目维护时客户反映iphone手机上传图片时,图片自动旋转了,但是自己的手机不会,
我的是iOS 12.4的系统客户的是13.4.1
iOS 13.4之前浏览器不会对带 EXIF 信息的图片进行回正,但是自从 iOS 更新到 13.4.1 后,浏览器支持自动回正了。

收起阅读 »

swiper组件是怎么自适应高度

新闻/资讯应用模板的swiper组件是怎么自适应高度的?我用HBuilder X 2.7.9 用内置uni-ui的项目模板生成 的项目,使用swiper组件高度无法自适应?????????????

内置uni-ui的项目模板的swiper

新闻/资讯应用模板的swiper

继续阅读 »

新闻/资讯应用模板的swiper组件是怎么自适应高度的?我用HBuilder X 2.7.9 用内置uni-ui的项目模板生成 的项目,使用swiper组件高度无法自适应?????????????

内置uni-ui的项目模板的swiper

新闻/资讯应用模板的swiper

收起阅读 »

uni-app集成leaflet

最近想在uni-app上使用地图功能,不想用自带的地图组件,所以研究了下leaflet做移动端的地图,发现编译到手机上时出现“window.requestAnimationFrame”报错,地图无法呈现,查询了半天无结果,想想应该是uni-app限制了dom操作,便去看uni-app文档,发现需要引入renderjs才能使用,方便记录贴上代码,分享经验

继续阅读 »

最近想在uni-app上使用地图功能,不想用自带的地图组件,所以研究了下leaflet做移动端的地图,发现编译到手机上时出现“window.requestAnimationFrame”报错,地图无法呈现,查询了半天无结果,想想应该是uni-app限制了dom操作,便去看uni-app文档,发现需要引入renderjs才能使用,方便记录贴上代码,分享经验

收起阅读 »

高薪诚聘uniapp开发工程师

诚聘 uniapp开发工程师,
工作地点:深圳福田
工作内容:开发uniapp项目,商城类

有兴趣的可以联系Q:87240

正规公司,签订劳动合同,五险一金。

诚聘 uniapp开发工程师,
工作地点:深圳福田
工作内容:开发uniapp项目,商城类

有兴趣的可以联系Q:87240

正规公司,签订劳动合同,五险一金。

求IM应用专用的聊天列表组件或原生插件

聊天 Runtime 插件

例如微信QQ,在输入消息或收到消息后自动滚动到最后一条消息,下拉加载更多的历史消息,且保持当前的浏览位置,页面不闪动,目前uni-app提供的组件以及插件暂未发现符合IM聊天的专用列表(与普通列表相反的操作,普通列表为上拉加载,IM应用是下拉加载)

例如微信QQ,在输入消息或收到消息后自动滚动到最后一条消息,下拉加载更多的历史消息,且保持当前的浏览位置,页面不闪动,目前uni-app提供的组件以及插件暂未发现符合IM聊天的专用列表(与普通列表相反的操作,普通列表为上拉加载,IM应用是下拉加载)

H5 图片压缩

h5+ uniapp

最近把app转成h5后,发现图片不能自动压缩。现在手机像素高,拍照都是5m左右的,这样的图片上传速度极慢。在社区里找了好久,发现可用的不多,我专门研究了下,分享代码,当前测试点不多,不排除有bug。

test: function(){  
                uni.chooseImage({  
                    count: 1,  
                    sizeType: ['compressed'],   
                    sourceType: ['camera'],  
                    success: async function (res) {  
                        const tempFilePaths = res.tempFilePaths;  

                        let img = '';  
                        /* #ifdef H5 */  
                        img = await this.comprossImage(tempFilePaths[0])  
                        /* #endif */  

                        uni.uploadFile({  
                            url: server + '/....',   
                            filePath: img || tempFilePaths[0],  
                            name: 'file',  
                            success: (uploadFileRes) => {  
                                let json = JSON.parse(uploadFileRes.data);  
                                if(1 ==json.state){  
                                    // 上传成功  
                                }else{  
                                    // 上传失败  
                                }  
                            },  
                            fail: function(err) {  
                                //其它错误  
                            }  
                        });  
                    }  
                });  
            },  
            comprossImage: async function(imgSrc,maxWidth) {  
                if(!imgSrc) return 0;  
                return new Promise((resolve, reject) => {  
                    maxWidth = maxWidth || 1024;/*默认压缩成1024宽*/  
                    uni.getImageInfo({    
                        src: imgSrc,    
                        success(res) {  
                            if(res.width <= maxWidth){/*太小的图片就不压缩了*/  
                                resolve(imgSrc);  
                                return;  
                            }  
                    let img = new Image();    
                    img.src = res.path;    

                     let canvas = document.createElement('canvas');    
                    let scale = res.width / res.height;  

                    let ctx = canvas.getContext('2d');  
                    canvas.width = maxWidth;  
                    canvas.height = maxWidth / scale;  
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);  

                    /* 默认图片质量为0.7 */  
                    var quality = 0.7;  
                    /* 回调函数返回base64的值 */  
                    var base64 = canvas.toDataURL('image/jpeg', quality);  

                            resolve(base64);    
                        }    
                    });    
                })    
            },
继续阅读 »

最近把app转成h5后,发现图片不能自动压缩。现在手机像素高,拍照都是5m左右的,这样的图片上传速度极慢。在社区里找了好久,发现可用的不多,我专门研究了下,分享代码,当前测试点不多,不排除有bug。

test: function(){  
                uni.chooseImage({  
                    count: 1,  
                    sizeType: ['compressed'],   
                    sourceType: ['camera'],  
                    success: async function (res) {  
                        const tempFilePaths = res.tempFilePaths;  

                        let img = '';  
                        /* #ifdef H5 */  
                        img = await this.comprossImage(tempFilePaths[0])  
                        /* #endif */  

                        uni.uploadFile({  
                            url: server + '/....',   
                            filePath: img || tempFilePaths[0],  
                            name: 'file',  
                            success: (uploadFileRes) => {  
                                let json = JSON.parse(uploadFileRes.data);  
                                if(1 ==json.state){  
                                    // 上传成功  
                                }else{  
                                    // 上传失败  
                                }  
                            },  
                            fail: function(err) {  
                                //其它错误  
                            }  
                        });  
                    }  
                });  
            },  
            comprossImage: async function(imgSrc,maxWidth) {  
                if(!imgSrc) return 0;  
                return new Promise((resolve, reject) => {  
                    maxWidth = maxWidth || 1024;/*默认压缩成1024宽*/  
                    uni.getImageInfo({    
                        src: imgSrc,    
                        success(res) {  
                            if(res.width <= maxWidth){/*太小的图片就不压缩了*/  
                                resolve(imgSrc);  
                                return;  
                            }  
                    let img = new Image();    
                    img.src = res.path;    

                     let canvas = document.createElement('canvas');    
                    let scale = res.width / res.height;  

                    let ctx = canvas.getContext('2d');  
                    canvas.width = maxWidth;  
                    canvas.height = maxWidth / scale;  
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);  

                    /* 默认图片质量为0.7 */  
                    var quality = 0.7;  
                    /* 回调函数返回base64的值 */  
                    var base64 = canvas.toDataURL('image/jpeg', quality);  

                            resolve(base64);    
                        }    
                    });    
                })    
            },
收起阅读 »

uni-push谷歌推送FCM配置指南

fcm unipush

> 文档已迁移至新链接:https://uniapp.dcloud.net.cn/uni-push/google-fcm.html
> 如有疑问,可以单独发贴咨询。

继续阅读 »

> 文档已迁移至新链接:https://uniapp.dcloud.net.cn/uni-push/google-fcm.html
> 如有疑问,可以单独发贴咨询。

收起阅读 »

nvue使用uni-app编译模式引入字体文件

经验分享 引入字体
        created(){  
            const domModule = weex.requireModule('dom')  
            domModule.addRule('fontFace', {  
                'fontFamily': "iconfont",  
                'src': "url('../../static/font/font.ttf')"  
            });  
        }

在css中加入如下样式

.iconfont {  
    font-family: iconfont;  
}

使用方法

<text class="iconfont">&#xe62c;</text>
继续阅读 »
        created(){  
            const domModule = weex.requireModule('dom')  
            domModule.addRule('fontFace', {  
                'fontFamily': "iconfont",  
                'src': "url('../../static/font/font.ttf')"  
            });  
        }

在css中加入如下样式

.iconfont {  
    font-family: iconfont;  
}

使用方法

<text class="iconfont">&#xe62c;</text>
收起阅读 »

HBX Android真机不能运行

安卓真机运行第一次正常,之后真机不能运行

可能是文件相关的问题,就去找manifest.json相关配置,找到一个文件系统相关的权限

关掉之后一切正常
很迷
也不知道为啥
求解答

继续阅读 »

安卓真机运行第一次正常,之后真机不能运行

可能是文件相关的问题,就去找manifest.json相关配置,找到一个文件系统相关的权限

关掉之后一切正常
很迷
也不知道为啥
求解答

收起阅读 »

用MUI做的影视APP对接苹果CMS

用的技术是mui、H5+、jQuery,数据是对接苹果cms,用户后台是springboot、利用web-view进行视频播放
功能介绍:运营模式(免费、免费需登录、收费)、邀请下级双方获取会员、多条视频解析、播放记录,搜索、分享、意见反馈等功能

用的技术是mui、H5+、jQuery,数据是对接苹果cms,用户后台是springboot、利用web-view进行视频播放
功能介绍:运营模式(免费、免费需登录、收费)、邀请下级双方获取会员、多条视频解析、播放记录,搜索、分享、意见反馈等功能