HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

关于解决在安卓(华为,荣耀)等部分机型上的显示白屏或错乱的问题

白屏

【现象】
在页面切换时,随机性出现显示白屏或者错乱。js代码能够正常运行,控制台能正常输出。

【代码写法】
使用rem作为单位,并且使用类似以下代码来实现在不同机型上的大小问题。

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'

【原因】
显示白屏或错乱的原因,是因为上面这段代码计算出来的fontSize可能为0,导致元素无法正常显示。这个在其他浏览器上是从未出现过的,建议官方修复。

【解决办法】
在官方没有修复之前,可以使用以下代码替换上述代码来解决。

(function setFontSize() {  
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'  
    if(document.documentElement.clientWidth === 0) {  
      setTimeout(setFontSize, 100)  
    }  
  })()
继续阅读 »

【现象】
在页面切换时,随机性出现显示白屏或者错乱。js代码能够正常运行,控制台能正常输出。

【代码写法】
使用rem作为单位,并且使用类似以下代码来实现在不同机型上的大小问题。

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'

【原因】
显示白屏或错乱的原因,是因为上面这段代码计算出来的fontSize可能为0,导致元素无法正常显示。这个在其他浏览器上是从未出现过的,建议官方修复。

【解决办法】
在官方没有修复之前,可以使用以下代码替换上述代码来解决。

(function setFontSize() {  
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'  
    if(document.documentElement.clientWidth === 0) {  
      setTimeout(setFontSize, 100)  
    }  
  })()
收起阅读 »

uniwebview传参到html5网页

uniapp

需求就是,在uniapp 下 打开一个h5网页 并且携带登录信息

具体信息可以参考:http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create

var webviewId = "__uniapp__service_browser";  
var style = {}  

var params = {  
    preload:{  
        data:"jalon8888",  
        timestamp: new Date().getTime(),  
    }  
}  
var url = "你的网址哟~"  
plus.webview.create(url,webviewID,style,params)

然后在HTML5网页下,使用如下方法获取

先参考文档 引入uni-webview.js ( https://uniapp.dcloud.io/component/web-view )

开始获取参数

var data = plus.webview.getWebviewById( "__uniapp__service_browser" ).preload;  
console.log( JSON.stringify( data ) )

这种不是实时的,只是利用了5+创建webview时的参数(extras) 而已 。还不知道有啥弊端不,一般来说 可以传参 比如 登录信息、设备信息 这种基本无需实时获取的参数

继续阅读 »

需求就是,在uniapp 下 打开一个h5网页 并且携带登录信息

具体信息可以参考:http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create

var webviewId = "__uniapp__service_browser";  
var style = {}  

var params = {  
    preload:{  
        data:"jalon8888",  
        timestamp: new Date().getTime(),  
    }  
}  
var url = "你的网址哟~"  
plus.webview.create(url,webviewID,style,params)

然后在HTML5网页下,使用如下方法获取

先参考文档 引入uni-webview.js ( https://uniapp.dcloud.io/component/web-view )

开始获取参数

var data = plus.webview.getWebviewById( "__uniapp__service_browser" ).preload;  
console.log( JSON.stringify( data ) )

这种不是实时的,只是利用了5+创建webview时的参数(extras) 而已 。还不知道有啥弊端不,一般来说 可以传参 比如 登录信息、设备信息 这种基本无需实时获取的参数

收起阅读 »

ThorUI组件库分享,含微信小程序原生版

模板 ui组件 组件 小程序 uniapp 技术分享 源码分享

ThorUI组件库分享,含微信小程序原生版

ThorUI uni版本插件市场
ThorUI 小程序版本插件市场

更新日志

V1.5.1(2020-06-06)

1.日历组件支持农历(古历)。

2.sticky吸顶组件新增wxs实现(tui-sticky-wxs)。

3.新增圆形进度条组件renderjs实现(App、H5端)与canvas 2d实现(小程序端)以及nuve版本。

4.图片裁剪组件优化,手势事件改为wxs实现。

5.级联选择器组件优化,支持设置默认选中。

6.新增图片颜色分析器组件,传入图片分析图片色彩。

7.新增中文转拼音组件,可处理多音字。

8.新增update页面(App端资源更新页面)。

9.解决H5端异步请求数据后复制文本(clipboard)报错bug。
解决方案:
①.新增参数event,调用方法时传入此参数;
②.异步请求转同步。

10.修复其它已知bug。

注:自1.4.2版本之后,ThorUI只对uni-app版本进行开源,小程序原生版付费会员才可使用(¥29.99),1.4.2版本之前不受影响。
如若需要,请联系QQ:3168647172。

部分功能截图

V1.5.0 (2020-05-12)

1.新增日历组件 。

2.新增图片裁剪组件。

3.新增头像、图片组合组件。

4.新增顶部NavationBar导航组件。

5.新增圆形进度条组件。

6.新增底部导航组件。

7.新增级联选择组件cascade-selection。

8.新增步骤条组件。

9.新增气泡框组件。

10.countdown倒计时组件优化,可只显示秒数倒计时。

11.回到顶部组件优化,新增回首页,分享按钮,可自定义控制显示。

12.日期时间选择组件优化,新增秒数选择,单位可置顶展示。

13.新增垂直分类菜单左右联动联动案例。

14.地图支持H5。

15.表单验证优化:非必填情况下,如果值为空,则不进行校验,不为空则进行校验。

16.发布H5、QQ小程序以及Android App。H5地址:https://www.thorui.cn/h5/#/ ,QQ小程序搜索ThorUI,apk前往https://www.thorui.cn/ 下载。

17.针对支付宝小程序做了部分优化调整。

18.nvue支持uni-app编译模式。

19.新增自定义tabbar使用模板,小程序参考:https://github.com/dingyong0214/AfterSale ,uni-app参考:https://github.com/dingyong0214/tabbar-uniapp。

20.引入优化uParse。

21.搜索页面新增关键词高亮显示。

22.新增navbar上拉加载下拉刷新案例。

23.v3编译支持。

24.支持easycom组件模式,直接在页面中使用组件,无需引入注册。

25.优化sticky组件,新增普通案例和异步加载案例。

26.整体优化调整,项目重构,部分模板完善。

部分功能截图

V1.4.2

1.modal组件优化,宽高以及padding值可设置

2.rate评分组件支持小数,如4星半,4.6星等

3.tabs组件优化

4.商城模板新增优惠券页面

5.商城模板新增订单详情页面

6.分包,解决小程序预览时包体积超出限制的问题

功能截图

V1.4.1

1.新增文档相关链接信息。

2.新增骨架屏组件(extend=>骨架屏)。

3.新增网络请求示例。

4.调整sticky组件,支持索引列表吸顶效果。

5.新增吸顶&索引列表,非scroll-view实现(code[首页]=>索引列表=>索引&吸顶效果)。

6.已知问题修复以及优化。

功能截图

V1.4.0

1.新增日期时间选择器组件。

2.H5新增复制文本功能。

3.新增悬浮按钮组件。

4.新增Tabbar组件。

5.新增tabs标签页组件。

6.新增折叠面板组件。

7.新增图片上传组件。

8.NumberBox组件优化调整。

9.Modal组件优化调整。

10.sticky组件优化调整。

11.countdown组件优化调整。

12.商城模板新增购物车、我的、提交订单、支付成功、我的订单、地址列表、新增地址、设置、用户信息等页面。

13.修改已知bug。

功能截图

V1.3.2

1.修复H5端发行报错的问题。

2.扩展基础组件(保留了之前版本):alert、tips、button、toast。

3.新增表单验证功能,只需配置相应验证即可。

4.新增返回顶部组件,nvue返回顶部看首页[nvue商品列表]。

5.优化部分页面,修复已知bug。

功能截图

V1.3.0

1.新增倒计时组件:时分秒倒计时,支持设置大小,颜色等。

2.新增分隔符组件:Divider分隔符,可设置占据高度,线条宽度,颜色等。

3.新增卡片轮播:包含顶部轮播,秒杀商品轮播等。

4.nvue下拉刷新优化。

5.修复已知bug。

V1.2.2

1.新增组件Modal弹框:可设置按钮数,按钮样式,提示文字样式等,还可自定义弹框内容。

2.修复部分已知bug。

V1.2.1

1.修复部分兼容性问题。

2.修复部分已知bug。

V1.2.0

1.新增组件NumberBox数字框:可设置步长,支持浮点数,支持调整样式(可单独设置)。

2.新增组件Rate评分:可设置星星数,可设置大小颜色。

3.新增聊天模板,包含:消息列表,好友列表,聊天界面等。

4.新增商城模板,包含:商城首页,商城列表,商城详情等。

5.优化部分体验。

V1.1.0

1.将基础组件移出扩展,单独出来。

2.扩展改为单独tab bar选项extend。

3.新增滚动消息(extend=>滚动消息):包括顶部通告栏,滚动新闻,以及搜索框中出现的热搜产品。

4.新增弹层下拉选择(extend=>弹层下拉选择):包含顶部下拉选择列表、输入框下拉选择以及底部分享弹层。

5.新增ActionSheet操作菜单(extend=>ActionSheet):可加入提示信息,可单独设置字体样式。

6.新增新闻模板(extend=>新闻模板):包含新闻列表,新闻详情,评论等。

7.部分功能优化,修复已知bug。

V1.0.0

1.【地图】新增拖拽定位功能

2.【扩展】新增基础组件,包括:字体图标,按钮,Grid宫格,List列表,Card卡片...

3.【扩展】新增数字键盘

4.【扩展】新增时间轴

5.完善thor(个人中心)功能,包括:关于Thor UI,模拟登录,GitHub地址复制,赞赏,反馈,更新日志等

6.已知bug修复,以及部分功能优化

商城模板部分截图

商城首页

新闻模板部分截图

聊天模板截图

组件功能部分截图

消息提示 吸顶容器 数字键盘 锁频键盘 时间轴
消息滚动 弹层,下拉选择 抽奖转盘 抽屉 滑动菜单
二维码生成 地图-拖拽定位 地图-周边地点 基础组件 索引列表-城市选择
索引列表 顶部选项卡 rate评分 数字输入框
继续阅读 »

ThorUI组件库分享,含微信小程序原生版

ThorUI uni版本插件市场
ThorUI 小程序版本插件市场

更新日志

V1.5.1(2020-06-06)

1.日历组件支持农历(古历)。

2.sticky吸顶组件新增wxs实现(tui-sticky-wxs)。

3.新增圆形进度条组件renderjs实现(App、H5端)与canvas 2d实现(小程序端)以及nuve版本。

4.图片裁剪组件优化,手势事件改为wxs实现。

5.级联选择器组件优化,支持设置默认选中。

6.新增图片颜色分析器组件,传入图片分析图片色彩。

7.新增中文转拼音组件,可处理多音字。

8.新增update页面(App端资源更新页面)。

9.解决H5端异步请求数据后复制文本(clipboard)报错bug。
解决方案:
①.新增参数event,调用方法时传入此参数;
②.异步请求转同步。

10.修复其它已知bug。

注:自1.4.2版本之后,ThorUI只对uni-app版本进行开源,小程序原生版付费会员才可使用(¥29.99),1.4.2版本之前不受影响。
如若需要,请联系QQ:3168647172。

部分功能截图

V1.5.0 (2020-05-12)

1.新增日历组件 。

2.新增图片裁剪组件。

3.新增头像、图片组合组件。

4.新增顶部NavationBar导航组件。

5.新增圆形进度条组件。

6.新增底部导航组件。

7.新增级联选择组件cascade-selection。

8.新增步骤条组件。

9.新增气泡框组件。

10.countdown倒计时组件优化,可只显示秒数倒计时。

11.回到顶部组件优化,新增回首页,分享按钮,可自定义控制显示。

12.日期时间选择组件优化,新增秒数选择,单位可置顶展示。

13.新增垂直分类菜单左右联动联动案例。

14.地图支持H5。

15.表单验证优化:非必填情况下,如果值为空,则不进行校验,不为空则进行校验。

16.发布H5、QQ小程序以及Android App。H5地址:https://www.thorui.cn/h5/#/ ,QQ小程序搜索ThorUI,apk前往https://www.thorui.cn/ 下载。

17.针对支付宝小程序做了部分优化调整。

18.nvue支持uni-app编译模式。

19.新增自定义tabbar使用模板,小程序参考:https://github.com/dingyong0214/AfterSale ,uni-app参考:https://github.com/dingyong0214/tabbar-uniapp。

20.引入优化uParse。

21.搜索页面新增关键词高亮显示。

22.新增navbar上拉加载下拉刷新案例。

23.v3编译支持。

24.支持easycom组件模式,直接在页面中使用组件,无需引入注册。

25.优化sticky组件,新增普通案例和异步加载案例。

26.整体优化调整,项目重构,部分模板完善。

部分功能截图

V1.4.2

1.modal组件优化,宽高以及padding值可设置

2.rate评分组件支持小数,如4星半,4.6星等

3.tabs组件优化

4.商城模板新增优惠券页面

5.商城模板新增订单详情页面

6.分包,解决小程序预览时包体积超出限制的问题

功能截图

V1.4.1

1.新增文档相关链接信息。

2.新增骨架屏组件(extend=>骨架屏)。

3.新增网络请求示例。

4.调整sticky组件,支持索引列表吸顶效果。

5.新增吸顶&索引列表,非scroll-view实现(code[首页]=>索引列表=>索引&吸顶效果)。

6.已知问题修复以及优化。

功能截图

V1.4.0

1.新增日期时间选择器组件。

2.H5新增复制文本功能。

3.新增悬浮按钮组件。

4.新增Tabbar组件。

5.新增tabs标签页组件。

6.新增折叠面板组件。

7.新增图片上传组件。

8.NumberBox组件优化调整。

9.Modal组件优化调整。

10.sticky组件优化调整。

11.countdown组件优化调整。

12.商城模板新增购物车、我的、提交订单、支付成功、我的订单、地址列表、新增地址、设置、用户信息等页面。

13.修改已知bug。

功能截图

V1.3.2

1.修复H5端发行报错的问题。

2.扩展基础组件(保留了之前版本):alert、tips、button、toast。

3.新增表单验证功能,只需配置相应验证即可。

4.新增返回顶部组件,nvue返回顶部看首页[nvue商品列表]。

5.优化部分页面,修复已知bug。

功能截图

V1.3.0

1.新增倒计时组件:时分秒倒计时,支持设置大小,颜色等。

2.新增分隔符组件:Divider分隔符,可设置占据高度,线条宽度,颜色等。

3.新增卡片轮播:包含顶部轮播,秒杀商品轮播等。

4.nvue下拉刷新优化。

5.修复已知bug。

V1.2.2

1.新增组件Modal弹框:可设置按钮数,按钮样式,提示文字样式等,还可自定义弹框内容。

2.修复部分已知bug。

V1.2.1

1.修复部分兼容性问题。

2.修复部分已知bug。

V1.2.0

1.新增组件NumberBox数字框:可设置步长,支持浮点数,支持调整样式(可单独设置)。

2.新增组件Rate评分:可设置星星数,可设置大小颜色。

3.新增聊天模板,包含:消息列表,好友列表,聊天界面等。

4.新增商城模板,包含:商城首页,商城列表,商城详情等。

5.优化部分体验。

V1.1.0

1.将基础组件移出扩展,单独出来。

2.扩展改为单独tab bar选项extend。

3.新增滚动消息(extend=>滚动消息):包括顶部通告栏,滚动新闻,以及搜索框中出现的热搜产品。

4.新增弹层下拉选择(extend=>弹层下拉选择):包含顶部下拉选择列表、输入框下拉选择以及底部分享弹层。

5.新增ActionSheet操作菜单(extend=>ActionSheet):可加入提示信息,可单独设置字体样式。

6.新增新闻模板(extend=>新闻模板):包含新闻列表,新闻详情,评论等。

7.部分功能优化,修复已知bug。

V1.0.0

1.【地图】新增拖拽定位功能

2.【扩展】新增基础组件,包括:字体图标,按钮,Grid宫格,List列表,Card卡片...

3.【扩展】新增数字键盘

4.【扩展】新增时间轴

5.完善thor(个人中心)功能,包括:关于Thor UI,模拟登录,GitHub地址复制,赞赏,反馈,更新日志等

6.已知bug修复,以及部分功能优化

商城模板部分截图

商城首页

新闻模板部分截图

聊天模板截图

组件功能部分截图

消息提示 吸顶容器 数字键盘 锁频键盘 时间轴
消息滚动 弹层,下拉选择 抽奖转盘 抽屉 滑动菜单
二维码生成 地图-拖拽定位 地图-周边地点 基础组件 索引列表-城市选择
索引列表 顶部选项卡 rate评分 数字输入框
收起阅读 »

showToast 提示 ios端闪退,不支持长内容!

uni_app iOS App

uni.showToast({title: res.data.err,icon: "none",position: "bottom"});

提示内容: 不能回复自己发布的问题,你可以修改问题内容

ios端会闪退
安卓端正常支持

继续阅读 »

uni.showToast({title: res.data.err,icon: "none",position: "bottom"});

提示内容: 不能回复自己发布的问题,你可以修改问题内容

ios端会闪退
安卓端正常支持

收起阅读 »

Hbuilder雅蓝主题

主题

自制Hbuilder雅蓝主题,需要的拿走

自制Hbuilder雅蓝主题,需要的拿走

ios 跳转app应用权限界面 判断用户是否开启定位权限

uniapp

ios 打开app应用权限


var cllocationManger = plus.ios.importClass("CLLocationManager");    
            var enable = cllocationManger.locationServicesEnabled();    
            var status = cllocationManger.authorizationStatus();    
            console.log("enable:" + enable);    
            console.log("status:" + status);    
            if (enable && status != 2) {    

                console.log("手机系统的定位已经打开");    
            } else {   
                console.log("手机系统的定位没有打开");  
                                 //  定位没有开启时  提示用户是否开启  
                  plus.nativeUI.confirm("定位权限没有开启,是否去开启?", function(e) {    
                        if (e.index == 0) {    
                            var UIApplication = plus.ios.importClass("UIApplication");    
                            var application2 = UIApplication.sharedApplication();    
                            var NSURL2 = plus.ios.importClass("NSURL");                          
                              var setting2 = NSURL2.URLWithString("app-settings:"); // 打开应用权限  
                            application2.openURL(setting2);    
                            plus.ios.deleteObject(setting2);    
                            plus.ios.deleteObject(NSURL2);    
                            plus.ios.deleteObject(application2);    
                        }    
                    }, {    
                        "buttons": ["不开启", "去设置"],    
                        "verticalAlign": "center"    
                    });    
            }    
                         plus.ios.deleteObject(cllocationManger);   
继续阅读 »

ios 打开app应用权限


var cllocationManger = plus.ios.importClass("CLLocationManager");    
            var enable = cllocationManger.locationServicesEnabled();    
            var status = cllocationManger.authorizationStatus();    
            console.log("enable:" + enable);    
            console.log("status:" + status);    
            if (enable && status != 2) {    

                console.log("手机系统的定位已经打开");    
            } else {   
                console.log("手机系统的定位没有打开");  
                                 //  定位没有开启时  提示用户是否开启  
                  plus.nativeUI.confirm("定位权限没有开启,是否去开启?", function(e) {    
                        if (e.index == 0) {    
                            var UIApplication = plus.ios.importClass("UIApplication");    
                            var application2 = UIApplication.sharedApplication();    
                            var NSURL2 = plus.ios.importClass("NSURL");                          
                              var setting2 = NSURL2.URLWithString("app-settings:"); // 打开应用权限  
                            application2.openURL(setting2);    
                            plus.ios.deleteObject(setting2);    
                            plus.ios.deleteObject(NSURL2);    
                            plus.ios.deleteObject(application2);    
                        }    
                    }, {    
                        "buttons": ["不开启", "去设置"],    
                        "verticalAlign": "center"    
                    });    
            }    
                         plus.ios.deleteObject(cllocationManger);   
收起阅读 »

高薪招聘深圳uni-app人才

uni_app

岗位职责:
1、使用最新的 Web 前端技术负责产品的开发工作,包括前端js、html5开发工作;
2、持续优化前端页面体验和访问速度,搭建高性能、高可用和安全的前端技术架构。

任职要求:
1、有良好的逻辑思维能力;
2、具备扎实且与时俱进的Javascript 基础;
3、能熟练使用hbuilderx软件,精通uni-app前端框架;
4、关注前端动态,至少非常熟练使用一种前端框架,包括但不限于:React, Vue, Angular ...;
5、熟悉各种Web客户端,尤其是主流移动端浏览器的开发模式和特性;
熟练的调试和工程化功底;
6、有写测试的习惯,且在项目中有过实践经历;
7、熟悉HTTP协议,了解TCP/IP的基本工作原理;熟悉常用WEB开发调试工具;

继续阅读 »

岗位职责:
1、使用最新的 Web 前端技术负责产品的开发工作,包括前端js、html5开发工作;
2、持续优化前端页面体验和访问速度,搭建高性能、高可用和安全的前端技术架构。

任职要求:
1、有良好的逻辑思维能力;
2、具备扎实且与时俱进的Javascript 基础;
3、能熟练使用hbuilderx软件,精通uni-app前端框架;
4、关注前端动态,至少非常熟练使用一种前端框架,包括但不限于:React, Vue, Angular ...;
5、熟悉各种Web客户端,尤其是主流移动端浏览器的开发模式和特性;
熟练的调试和工程化功底;
6、有写测试的习惯,且在项目中有过实践经历;
7、熟悉HTTP协议,了解TCP/IP的基本工作原理;熟悉常用WEB开发调试工具;

收起阅读 »

在 ios 真机运行时在 page.json 下给 nvue 页面配置 pullToRefresh 下拉刷新会导致 app 卡死

在 ios 真机运行下,给 nvue 页面配置 pullToRefresh 会导致 app 卡死退出,其他情况正常,即 android 真机运行环境以及 vue 页面正常

解决方法:去掉 nvue 页面的 pullToRefresh 配置即可

继续阅读 »

在 ios 真机运行下,给 nvue 页面配置 pullToRefresh 会导致 app 卡死退出,其他情况正常,即 android 真机运行环境以及 vue 页面正常

解决方法:去掉 nvue 页面的 pullToRefresh 配置即可

收起阅读 »

已找到

招聘

已找到

已找到

IOS离线打包库文件精简

离线打包 iOS

研究了几天IOS离线打包,总算是初步走通了,真是历尽千辛万苦,尤其打包文件精简过程。

这里抱怨一句:官方出的文档能不能详细点?能不能别那么多bug?做事情能不能认真一点?

以下是我精简出来的包,打包出来的文件和云端打包大小差别不大了,如果发现还可以精简的里方欢迎补充:

我的项目用到了蓝牙,如果不需要用蓝牙的可以把liblibBlueTooth.a这个文件也去掉

继续阅读 »

研究了几天IOS离线打包,总算是初步走通了,真是历尽千辛万苦,尤其打包文件精简过程。

这里抱怨一句:官方出的文档能不能详细点?能不能别那么多bug?做事情能不能认真一点?

以下是我精简出来的包,打包出来的文件和云端打包大小差别不大了,如果发现还可以精简的里方欢迎补充:

我的项目用到了蓝牙,如果不需要用蓝牙的可以把liblibBlueTooth.a这个文件也去掉

收起阅读 »

【分享】uniapp迁移QQ小程序

uniapp没有兼容QQ小程序,
但是QQ小程序本身是兼容微信小程序的,
所以考虑生成微信小程序后直接搞到QQ小程序内,
发现效果还不错,
但是请注意,
每个页面和组件必须有js/json/wxml/wxss四个文件,否则会报错。

uniapp没有兼容QQ小程序,
但是QQ小程序本身是兼容微信小程序的,
所以考虑生成微信小程序后直接搞到QQ小程序内,
发现效果还不错,
但是请注意,
每个页面和组件必须有js/json/wxml/wxss四个文件,否则会报错。