HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

使用 typescript 开发 uni-app

最近刚接触 uni-app, 准备使用 ts 作为脚本语言,(毕竟代码提示比js要实用太多)。
没有意外,踩坑了。uni 为了在vue基础上兼容 微信小程序, 将小程序变量改写为 data(){ return {}; }. 导致 仅使用 @Prop(),无法正常更改变量值.

然后,花了点时间,扩展了两个vue装饰器,用来解决 成员变量写入data(), 用的话安装下 yarn add uni-property-decorator . 用 @Data()@DataInit 替换 @Prop() 注解.

原因: @Prop 是在 class实例化的时候将变量转化为vue变量的,监听的是成员变量本身的更新。不会触发data变动。而uni的逻辑额外将data中变量转化为可监听的vue变量,每次读写值的时候其实都相当与读写的data(){}中的变量. 两个作用对象不一样。

最后分享下,新增的装饰器源码,里面有实现逻辑。

github: https://github.com/a951055/uni-property-decorator

(麻烦看到点颗星,谢谢谢谢...)

继续阅读 »

最近刚接触 uni-app, 准备使用 ts 作为脚本语言,(毕竟代码提示比js要实用太多)。
没有意外,踩坑了。uni 为了在vue基础上兼容 微信小程序, 将小程序变量改写为 data(){ return {}; }. 导致 仅使用 @Prop(),无法正常更改变量值.

然后,花了点时间,扩展了两个vue装饰器,用来解决 成员变量写入data(), 用的话安装下 yarn add uni-property-decorator . 用 @Data()@DataInit 替换 @Prop() 注解.

原因: @Prop 是在 class实例化的时候将变量转化为vue变量的,监听的是成员变量本身的更新。不会触发data变动。而uni的逻辑额外将data中变量转化为可监听的vue变量,每次读写值的时候其实都相当与读写的data(){}中的变量. 两个作用对象不一样。

最后分享下,新增的装饰器源码,里面有实现逻辑。

github: https://github.com/a951055/uni-property-decorator

(麻烦看到点颗星,谢谢谢谢...)

收起阅读 »

页面被软键盘顶起的解决方案、标签<textarea>

话不多说,效果图如下

底部输入框

点击输入框后软键盘弹起

实现的原理,就是设置参数:adjust-position="false",然后软键盘弹起时,页面就不会自动上推,然后通过焦点,获取键盘高度,设置标签样式:position: relative;后就通过bottom: 0;来控制输入框的位置

  1. 第一步,textarea标签,代码如下,以下参数不懂是啥的请前往该链接查看---》textarea
    <textarea   
    style="position: relative;bottom: 0;height: 140rpx;"  
    :style="textareaStyle"  
    auto-height="true"          
    adjust-position="false"   
    hold-keyboard="true"   
    cursor-spacing="0"   
    maxlength="100"   
    @focus="textareaFocus"   
    @blur="textareaBlur"  
    />

    2.第二步,就是获取焦点、失去焦点的这两个方法了

            textareaFocus(e) {  
                               //点击输入框时,获取键盘高度,设置距离底部的高度为键盘的高度  
                this.textareaStyle= 'bottom: '+e.detail.height+'px;';  
            },  
            textareaBlur(e){  
                                //失去焦点时,设置距离底部为0  
                this.inputClassParent = 'bottom: 0px;';  
            },
继续阅读 »

话不多说,效果图如下

底部输入框

点击输入框后软键盘弹起

实现的原理,就是设置参数:adjust-position="false",然后软键盘弹起时,页面就不会自动上推,然后通过焦点,获取键盘高度,设置标签样式:position: relative;后就通过bottom: 0;来控制输入框的位置

  1. 第一步,textarea标签,代码如下,以下参数不懂是啥的请前往该链接查看---》textarea
    <textarea   
    style="position: relative;bottom: 0;height: 140rpx;"  
    :style="textareaStyle"  
    auto-height="true"          
    adjust-position="false"   
    hold-keyboard="true"   
    cursor-spacing="0"   
    maxlength="100"   
    @focus="textareaFocus"   
    @blur="textareaBlur"  
    />

    2.第二步,就是获取焦点、失去焦点的这两个方法了

            textareaFocus(e) {  
                               //点击输入框时,获取键盘高度,设置距离底部的高度为键盘的高度  
                this.textareaStyle= 'bottom: '+e.detail.height+'px;';  
            },  
            textareaBlur(e){  
                                //失去焦点时,设置距离底部为0  
                this.inputClassParent = 'bottom: 0px;';  
            },
收起阅读 »

找长期兼职开发者

外包

要求:
1.开发过UNI产品

  1. 有项目开发经验
  2. 认真负责
  3. 开发时间充裕,不影响项目交付
  4. 有项目基础审美

有意向的联系:13216672697

我司是外包公司,已与UNI平台多名开发者合作,因项目压力大,需要长期外包,付款爽快,信誉,可以去问。

继续阅读 »

要求:
1.开发过UNI产品

  1. 有项目开发经验
  2. 认真负责
  3. 开发时间充裕,不影响项目交付
  4. 有项目基础审美

有意向的联系:13216672697

我司是外包公司,已与UNI平台多名开发者合作,因项目压力大,需要长期外包,付款爽快,信誉,可以去问。

收起阅读 »

图片设置懒加载后,微信小程序端无法获取未加载的预设图片高度

在开发双向联动功能需要预获取盒子高度而存入容器时,由于图片设置了懒加载,在微信小程序端无法获取到该图片预设高度而会获取图片原始高度,导致图片父级元素高度不一(首屏加载的图片可以获取到预设高度)。而app端、h5端正常
解决方案:方案1.不设懒加载,方案2:给image的父级元素加高 ,方案3:给官方提议修复此问题,而让其更好的跨端

继续阅读 »

在开发双向联动功能需要预获取盒子高度而存入容器时,由于图片设置了懒加载,在微信小程序端无法获取到该图片预设高度而会获取图片原始高度,导致图片父级元素高度不一(首屏加载的图片可以获取到预设高度)。而app端、h5端正常
解决方案:方案1.不设懒加载,方案2:给image的父级元素加高 ,方案3:给官方提议修复此问题,而让其更好的跨端

收起阅读 »

即时通讯 用哪个框架比较好 有做个类似的朋友 指导下

即时通讯 用哪个框架比较好 有做个类似的朋友 指导下

即时通讯 用哪个框架比较好 有做个类似的朋友 指导下

5.28后HbuilderX的WebView调试,会一直卡在加载中。问题解决方案

WebView调试 HBuilderX

很多小伙伴在5.28号开始webview调试的时候会一直卡在加载中这个界面无法正常进行调试。
经过排查,非HBuilderX的问题。
最后结论,chrome在28号凌晨进行了更新,将版本更新至了83.0.4103.61.这个版本和HBuilderX的webView调试产生了冲突。
只需要将chrome浏览器降低版本至78.0.3904.70或者更低即可。这里提供78.0.3904.70的资源包。

链接:资源包地址 提取码:o9yl

下载文件后,在进程中关闭所有chrome相关的进程。并在chrome的文件夹位置,
如图所示将原先的这两个画方框的文件删掉或者改个名字做备份(我这里加上666做备份)。
把链接中压缩包解压,把这两个文件粘贴至文件夹中即可。

再次打开浏览器,查看版本是否更改成功。
打开HBuilderX进行调试(第一次会失败)
关闭,再次进行调试(2秒左右延迟)
好了,你现在又可以进行正常的webView调试了!

继续阅读 »

很多小伙伴在5.28号开始webview调试的时候会一直卡在加载中这个界面无法正常进行调试。
经过排查,非HBuilderX的问题。
最后结论,chrome在28号凌晨进行了更新,将版本更新至了83.0.4103.61.这个版本和HBuilderX的webView调试产生了冲突。
只需要将chrome浏览器降低版本至78.0.3904.70或者更低即可。这里提供78.0.3904.70的资源包。

链接:资源包地址 提取码:o9yl

下载文件后,在进程中关闭所有chrome相关的进程。并在chrome的文件夹位置,
如图所示将原先的这两个画方框的文件删掉或者改个名字做备份(我这里加上666做备份)。
把链接中压缩包解压,把这两个文件粘贴至文件夹中即可。

再次打开浏览器,查看版本是否更改成功。
打开HBuilderX进行调试(第一次会失败)
关闭,再次进行调试(2秒左右延迟)
好了,你现在又可以进行正常的webView调试了!

收起阅读 »

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

.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

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