HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

提个建议。。。HX能否取消鼠标中间拖动文件的功能- - 滚动中键不小心按了下 结果文件就被拖乱了。。。又不能撤销 完全懵逼了

提个建议。。。HX能否取消鼠标中间拖动文件的功能- - 滚动中键不小心按了下 结果文件就被拖乱了。。。又不能撤销 完全懵逼了

提个建议。。。HX能否取消鼠标中间拖动文件的功能- - 滚动中键不小心按了下 结果文件就被拖乱了。。。又不能撤销 完全懵逼了

出现starting development server的分析

uni_app

使用uni-cli创建项目,更新了 @dcloudio/uni-* 等依赖版本为最新版2.0.1-34720220422002

这时候运行项目,编译/构建,一直处于loading状态

考虑可能是uni-app相关依赖的版本问题,开始选择性降低版本尝试,在尝试到2.0.0-32920211029004
编译/构建正常

继续阅读 »

使用uni-cli创建项目,更新了 @dcloudio/uni-* 等依赖版本为最新版2.0.1-34720220422002

这时候运行项目,编译/构建,一直处于loading状态

考虑可能是uni-app相关依赖的版本问题,开始选择性降低版本尝试,在尝试到2.0.0-32920211029004
编译/构建正常

收起阅读 »

【uni-admin管理系统】schema2code生成代码有BUG的解决方案

schema schema2code

用过schema2code生成管理系统页面的人,大概率会碰到这样一种情况吧:
比如下面这个是schema文件中一个字段的规则

  "foreignKey": "goods-list._id",  
  "enum": {  
       "collection": "goods-list",  
       "where": "type==10",  
      "field": "name as text,_id as value"  
  }

此时直接生成的list文件会存在无法正确显示正确的枚举值。
每次如果都要自己去手动改,就很麻烦。而且如果后续这个表新增了字段,再次生成后,又会破坏原本改好的内容。
而且schema2code插件作者一直也没更新了,这个生成代码的槽点不止这一个地方。

解决方案:

将上面的代码规则替换成如下:

"componentForEdit": {  
                "name": "uni-data-checkbox",  
                "props": {  
                    "collection": "goods-list",  
                    "where": "type==20",  
                    "field": "name as text,_id as value"  
                }  
            },  
            "componentForShow": {  
                "name": "daxiang-query-first",  
                "props": {  
                    "collection": "goods-list",  
                    "where": "type==20",  
                    "valueKey": "_id",  
                    "showField": "name"  
                }  
            }

此代码是使用了daxiang-query-first这个插件,解决在列表中显示枚举值。
插件详见:
daxiang-query-first

继续阅读 »

用过schema2code生成管理系统页面的人,大概率会碰到这样一种情况吧:
比如下面这个是schema文件中一个字段的规则

  "foreignKey": "goods-list._id",  
  "enum": {  
       "collection": "goods-list",  
       "where": "type==10",  
      "field": "name as text,_id as value"  
  }

此时直接生成的list文件会存在无法正确显示正确的枚举值。
每次如果都要自己去手动改,就很麻烦。而且如果后续这个表新增了字段,再次生成后,又会破坏原本改好的内容。
而且schema2code插件作者一直也没更新了,这个生成代码的槽点不止这一个地方。

解决方案:

将上面的代码规则替换成如下:

"componentForEdit": {  
                "name": "uni-data-checkbox",  
                "props": {  
                    "collection": "goods-list",  
                    "where": "type==20",  
                    "field": "name as text,_id as value"  
                }  
            },  
            "componentForShow": {  
                "name": "daxiang-query-first",  
                "props": {  
                    "collection": "goods-list",  
                    "where": "type==20",  
                    "valueKey": "_id",  
                    "showField": "name"  
                }  
            }

此代码是使用了daxiang-query-first这个插件,解决在列表中显示枚举值。
插件详见:
daxiang-query-first

收起阅读 »

小程序脚手架案例 (uni-ui)

uni_app

uni-ui常用精简版脚手架

uni-ui常用精简版脚手架

后台录屏、应用外录屏、直播屏幕(ios)

后台录屏、应用外录屏、直播屏幕(ios) :https://ext.dcloud.net.cn/plugin?id=8149

后台录屏、应用外录屏、直播屏幕(ios) :https://ext.dcloud.net.cn/plugin?id=8149

官方这用词写的有点LOW!

HBuilderX

可以是“为极客而生”之类的,什么叫“为懒人?为你?”,太影响官方的形象了!不通顺,也有诋毁“码农”之意!虽然这个“懒人”是“快捷开发”的意思,但从字面上也有让人觉得不舒服!

可以是“为极客而生”之类的,什么叫“为懒人?为你?”,太影响官方的形象了!不通顺,也有诋毁“码农”之意!虽然这个“懒人”是“快捷开发”的意思,但从字面上也有让人觉得不舒服!

离线打包 无法播放视频

按官网文档引用 media-release.aar、weex_videoplayer-release.aar 添加配置 <feature name="VideoPlayer" value="io.dcloud.media.MediaFeatureImpl"/>

proguard-rules.pro 中添加

-keep class simijkplayer.{
public <fields>;
public <methods>;
}
-keep class tv.danmaku.ijk.media.
{
<fields>;
<methods>;
}

继续阅读 »

按官网文档引用 media-release.aar、weex_videoplayer-release.aar 添加配置 <feature name="VideoPlayer" value="io.dcloud.media.MediaFeatureImpl"/>

proguard-rules.pro 中添加

-keep class simijkplayer.{
public <fields>;
public <methods>;
}
-keep class tv.danmaku.ijk.media.
{
<fields>;
<methods>;
}

收起阅读 »

NXCLOUD牛信云——国际短信验证码服务商,专享通道,即时送达

即时通信

一、什么是国际短信验证码?

国际短信验证码很好理解,就是用户在进行注册、登录或修改密码等操作的时候,都需要验证码确认操作是否属于本人的一个安全验证方式。这种验证方式目前广泛运用于众多APP中,不仅是出海企业,更是众多海外用户所信赖的验证方式。

二、牛信云出海国际短信验证码的功能有哪些?

①助力海外用户快速登录账号:在出海国际短信验证码还未使用到账号登录中时,人们都是进行账号和密码登录,同时通过图形或字母等验证方式进行辅助保障,过程十分繁琐,海外用户很难做到在短时间内实现账号登录。出海国际短信验证码的诞生帮助人们解决了一部分登录难题,海外用户现在登录APP账号,只需要输入手机号码,然后获取验证码,将正确的验证码填入,即可成功登录。这种登录方式不仅方便且十分快捷,深受众多海外用户喜爱。

②保障海外用户的账号安全:在人们心中,出海国际短信验证码较大的作用便是其可以很好地保障海外用户的账号安全。海外用户不管是在登录账号、密码修改,或是在操作账号变更等情况,只要海外用户的验证码不泄露,账号的安全性能还是很高的。这都是得益于手机号码实行一机一码制,海外用户无论是在操作哪些机密设置时,都是需要依靠出海国际短信验证码验证,其安全性还是很强的。

③防止海外用户恶意注册:以往出海企业在推出新APP的时候,总有针对新用户发送一些福利,而这个时候总有些非法分子想要薅取出海企业羊毛,不断申请注册新账号领取福利,出海企业发现这个漏洞却无法弥补,出海国际短信验证码的诞生,则很好地帮助了出海企业有效制止此类事件。现在企业发放对新用户的福利,一个手机号码只能领取一次,无法再实现重复领取。不仅有效防止了用户恶意注册,还保障了出海企业的利益。

牛信云以科技为基础,以产品为驱动,通过开放API接口,将底层通信能力SDK化,向开发者及企业级用户提供安全、稳定、可靠的一站式出海云通信服务。为了方便开发者调用,牛信云还为跨境电商、出海游戏、在线会议、在线社交、视频直播、金融支付、本地生活等行业提供不同的场景化解决方案,将通信云技术普惠化和实用化,助力中国品牌迅速拓展和占领海外市场,实现高效出海。

面对充满竞争与瞬息万变的全球市场,牛信云积极拥抱变化,始终为进步和卓越而努力,以出海通信为基石,争分夺秒地沿着数字化服务生态前进,推动业务与世界不懈向前,为中国出海企业提供一站式的通信解决方案,与合作伙伴一道,共同前进。

继续阅读 »

一、什么是国际短信验证码?

国际短信验证码很好理解,就是用户在进行注册、登录或修改密码等操作的时候,都需要验证码确认操作是否属于本人的一个安全验证方式。这种验证方式目前广泛运用于众多APP中,不仅是出海企业,更是众多海外用户所信赖的验证方式。

二、牛信云出海国际短信验证码的功能有哪些?

①助力海外用户快速登录账号:在出海国际短信验证码还未使用到账号登录中时,人们都是进行账号和密码登录,同时通过图形或字母等验证方式进行辅助保障,过程十分繁琐,海外用户很难做到在短时间内实现账号登录。出海国际短信验证码的诞生帮助人们解决了一部分登录难题,海外用户现在登录APP账号,只需要输入手机号码,然后获取验证码,将正确的验证码填入,即可成功登录。这种登录方式不仅方便且十分快捷,深受众多海外用户喜爱。

②保障海外用户的账号安全:在人们心中,出海国际短信验证码较大的作用便是其可以很好地保障海外用户的账号安全。海外用户不管是在登录账号、密码修改,或是在操作账号变更等情况,只要海外用户的验证码不泄露,账号的安全性能还是很高的。这都是得益于手机号码实行一机一码制,海外用户无论是在操作哪些机密设置时,都是需要依靠出海国际短信验证码验证,其安全性还是很强的。

③防止海外用户恶意注册:以往出海企业在推出新APP的时候,总有针对新用户发送一些福利,而这个时候总有些非法分子想要薅取出海企业羊毛,不断申请注册新账号领取福利,出海企业发现这个漏洞却无法弥补,出海国际短信验证码的诞生,则很好地帮助了出海企业有效制止此类事件。现在企业发放对新用户的福利,一个手机号码只能领取一次,无法再实现重复领取。不仅有效防止了用户恶意注册,还保障了出海企业的利益。

牛信云以科技为基础,以产品为驱动,通过开放API接口,将底层通信能力SDK化,向开发者及企业级用户提供安全、稳定、可靠的一站式出海云通信服务。为了方便开发者调用,牛信云还为跨境电商、出海游戏、在线会议、在线社交、视频直播、金融支付、本地生活等行业提供不同的场景化解决方案,将通信云技术普惠化和实用化,助力中国品牌迅速拓展和占领海外市场,实现高效出海。

面对充满竞争与瞬息万变的全球市场,牛信云积极拥抱变化,始终为进步和卓越而努力,以出海通信为基石,争分夺秒地沿着数字化服务生态前进,推动业务与世界不懈向前,为中国出海企业提供一站式的通信解决方案,与合作伙伴一道,共同前进。

收起阅读 »

uniapp APP + H5 在线预览文档 兼容 最麻烦的微信浏览器

    //在线预览文档  
    online_preview(){  

        //#ifndef H5  
        uni.showLoading({ title: '加载中...' })//出现加载中图标  
        let str = this.allUrl  
        uni.downloadFile({  
                url: str, //要预览的PDF的地址  
                success: function(res) {  
                    console.log('预览成功',res)  

                    if (res.statusCode === 200) {   
                        var Path = res.tempFilePath //返回的文件临时地址,用于后面打开本地预览所用  
                        uni.openDocument({  
                            filePath: Path, //要打开的文件路径  
                            showMenu: false, //右上角是否有可以转发分享的功能  
                            success: function(res) {  
                                uni.hideLoading()//关闭加载中图标  
                                uni.showToast({  
                                    title: '打开成功',  
                                    icon: 'none'  
                                })  
                            },  
                            fail: function(res) {  
                                uni.hideLoading()//关闭加载中图标  
                                uni.showToast({  
                                    title: '打开失败,请下载wps再试',  
                                    icon: 'none'  
                                })  
                                console.log('打开失败',res) //打开失败  
                            }  
                        })  
                    }  
                },  
                fail: function(res) {  
                    uni.hideLoading()//关闭加载中图标  
                    uni.showToast({  
                        title: '加载失败,请稍后再试',  
                        icon: 'none'  
                    })  
                    console.log('加载失败',res) //预览失败  
                }  
            })  
        // #endif  
        //#ifdef H5   
            let resultNew= encodeURIComponent(this.allUrl)  
            this.allUrl2 = 'http://view.officeapps.live.com/op/view.aspx?src='+ resultNew  
            window.open(this.allUrl2)  
        // #endif  
    },
继续阅读 »
    //在线预览文档  
    online_preview(){  

        //#ifndef H5  
        uni.showLoading({ title: '加载中...' })//出现加载中图标  
        let str = this.allUrl  
        uni.downloadFile({  
                url: str, //要预览的PDF的地址  
                success: function(res) {  
                    console.log('预览成功',res)  

                    if (res.statusCode === 200) {   
                        var Path = res.tempFilePath //返回的文件临时地址,用于后面打开本地预览所用  
                        uni.openDocument({  
                            filePath: Path, //要打开的文件路径  
                            showMenu: false, //右上角是否有可以转发分享的功能  
                            success: function(res) {  
                                uni.hideLoading()//关闭加载中图标  
                                uni.showToast({  
                                    title: '打开成功',  
                                    icon: 'none'  
                                })  
                            },  
                            fail: function(res) {  
                                uni.hideLoading()//关闭加载中图标  
                                uni.showToast({  
                                    title: '打开失败,请下载wps再试',  
                                    icon: 'none'  
                                })  
                                console.log('打开失败',res) //打开失败  
                            }  
                        })  
                    }  
                },  
                fail: function(res) {  
                    uni.hideLoading()//关闭加载中图标  
                    uni.showToast({  
                        title: '加载失败,请稍后再试',  
                        icon: 'none'  
                    })  
                    console.log('加载失败',res) //预览失败  
                }  
            })  
        // #endif  
        //#ifdef H5   
            let resultNew= encodeURIComponent(this.allUrl)  
            this.allUrl2 = 'http://view.officeapps.live.com/op/view.aspx?src='+ resultNew  
            window.open(this.allUrl2)  
        // #endif  
    },
收起阅读 »

addInterceptor 拦截器提供异步支持

拦截器 hook Interceptor addInterceptor

需求背景

在开发中很多场景都会使用到Interceptor拦截器。例如:拦截请求、拦截uni API、权限控制。

原理解析

通过Interceptor实现,https://github.com/dcloudio/uni-app/blob/alpha/src/core/helpers/interceptor.js我们可以看到。

invoke可以接收一个promise。那么我们就可以在invoke中返回一个Promise来处理异步方法

uni.addInterceptor('navigateTo', {  
    invoke(args) {  
        return new Promise((resolve) => {   

                resolve(args);  

        });  
    },  
});

注意 invokepromise返回的invoke参数必须要传。

Demo

以拦截navigateTo方法为例,跳转之前需要从后台请求是否有权限

uni.addInterceptor('navigateTo', {  
    invoke(args) {  
        return new Promise((resolve) => {  
            // 模拟请求   
            setTimeout(() => {  
                args.url = '/pages/home/index';  
                resolve(args);  
            }, 2000);  
        });  
    },  
});
继续阅读 »

需求背景

在开发中很多场景都会使用到Interceptor拦截器。例如:拦截请求、拦截uni API、权限控制。

原理解析

通过Interceptor实现,https://github.com/dcloudio/uni-app/blob/alpha/src/core/helpers/interceptor.js我们可以看到。

invoke可以接收一个promise。那么我们就可以在invoke中返回一个Promise来处理异步方法

uni.addInterceptor('navigateTo', {  
    invoke(args) {  
        return new Promise((resolve) => {   

                resolve(args);  

        });  
    },  
});

注意 invokepromise返回的invoke参数必须要传。

Demo

以拦截navigateTo方法为例,跳转之前需要从后台请求是否有权限

uni.addInterceptor('navigateTo', {  
    invoke(args) {  
        return new Promise((resolve) => {  
            // 模拟请求   
            setTimeout(() => {  
                args.url = '/pages/home/index';  
                resolve(args);  
            }, 2000);  
        });  
    },  
});
收起阅读 »

可视化uniapp 自动生成代码,组件、模板拖拽布局,并保存设计

uniapp 布局

**免费使用可视化uniapp 自动生成代码项目
1.可视化拖拽表单,基础组件、模板组件,自动生成布局
2.自定义修改组件的内容 和组件的样式
3,可以保存你修改后的内容,保存你的设计
4.一键导出项目全部代码,可以直接运行
5.查看导出代码的历史记录,可以继续编辑
6.查看源码可以看到修改后的样式自动变化
7.可视化创建文件,选中文件把代码保存在文件中
8.多个页面uniapp代码同时导出
9.自动生成路由配置,可以实现页面之间的跳转
————————————————

体验地址:https://we7.diyhey.com/admin/index


继续阅读 »

**免费使用可视化uniapp 自动生成代码项目
1.可视化拖拽表单,基础组件、模板组件,自动生成布局
2.自定义修改组件的内容 和组件的样式
3,可以保存你修改后的内容,保存你的设计
4.一键导出项目全部代码,可以直接运行
5.查看导出代码的历史记录,可以继续编辑
6.查看源码可以看到修改后的样式自动变化
7.可视化创建文件,选中文件把代码保存在文件中
8.多个页面uniapp代码同时导出
9.自动生成路由配置,可以实现页面之间的跳转
————————————————

体验地址:https://we7.diyhey.com/admin/index


收起阅读 »

uni-app subNVue 动态打开原生子窗体指南

subnvue

需求背景

uni-app subNVue 原生子窗体开发指南文档中列举了subNVue在开发过程中能解决的很多问题。
但在现实生活中还有几个问题迫切的需要解决。例如:
1、免配置page.json,动态打开subNVue
2、subNVue被关闭后,无法再次打开
3、适用场景非常多,更多玩法等你开发

原理解析

正常的subNVue需要在page.json中配置到对应需要使用subNVue的页面下。但这也制约了我们将subNVue写成通用组件。还有多个页面使用,每个页面都得配的麻烦。
通过阅读Uni-app源码,我们可以看到一种全新被雪藏起来的调用方式,代码位于https://github.com/dcloudio/uni-app/blob/dev/src/platforms/app-plus/helpers/page.js

const style = {  
 uniNView: {  
      // eslint-disable-next-line  
      path: `${typeof VUE_APP_TEMPLATE_PATH === 'string' ? VUE_APP_TEMPLATE_PATH : ''}/${url}.js`,  
      defaultFontSize: 16,  
      viewport: plus_.screen.resolutionWidth  
    }  
}  
plus.webview.create('', pageId, style)

当用html5+create webview方法时,在style里传uniNView字段,则代表这个webview是虚拟的,会使用nvue来渲染。渲染的这个js文件是nvue编译出来的(你也可以理解为将subNVue页面打包成了js,然后交给webview通过NVue去渲染)

使用方法

1、声明subNVue页面,生成uniNView渲染页面的js文件

page.json中声明subNVue页面,声明之后,uni-app会将nvue页面打包为js, 这个js存放位置就是uniNView path所打开文件的位置


目录结构:

├── components  
│   └── sub-nvue  
│       └── sub-nvue.nvue

2、打开subNVue

测试工程见附件

继续阅读 »

需求背景

uni-app subNVue 原生子窗体开发指南文档中列举了subNVue在开发过程中能解决的很多问题。
但在现实生活中还有几个问题迫切的需要解决。例如:
1、免配置page.json,动态打开subNVue
2、subNVue被关闭后,无法再次打开
3、适用场景非常多,更多玩法等你开发

原理解析

正常的subNVue需要在page.json中配置到对应需要使用subNVue的页面下。但这也制约了我们将subNVue写成通用组件。还有多个页面使用,每个页面都得配的麻烦。
通过阅读Uni-app源码,我们可以看到一种全新被雪藏起来的调用方式,代码位于https://github.com/dcloudio/uni-app/blob/dev/src/platforms/app-plus/helpers/page.js

const style = {  
 uniNView: {  
      // eslint-disable-next-line  
      path: `${typeof VUE_APP_TEMPLATE_PATH === 'string' ? VUE_APP_TEMPLATE_PATH : ''}/${url}.js`,  
      defaultFontSize: 16,  
      viewport: plus_.screen.resolutionWidth  
    }  
}  
plus.webview.create('', pageId, style)

当用html5+create webview方法时,在style里传uniNView字段,则代表这个webview是虚拟的,会使用nvue来渲染。渲染的这个js文件是nvue编译出来的(你也可以理解为将subNVue页面打包成了js,然后交给webview通过NVue去渲染)

使用方法

1、声明subNVue页面,生成uniNView渲染页面的js文件

page.json中声明subNVue页面,声明之后,uni-app会将nvue页面打包为js, 这个js存放位置就是uniNView path所打开文件的位置


目录结构:

├── components  
│   └── sub-nvue  
│       └── sub-nvue.nvue

2、打开subNVue

测试工程见附件

收起阅读 »