HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

几时添加支持其他编程语言,如 c、c++、cmd、Bash/Shell、Go、Python、PHP、Java、JavaScript、TypeScript等各种语言

几时添加支持其他编程语言,如 c、c++、cmd、Bash/Shell、Go、Python、PHP、Java、JavaScript、TypeScript等各种语言

几时添加支持其他编程语言,如 c、c++、cmd、Bash/Shell、Go、Python、PHP、Java、JavaScript、TypeScript等各种语言

关于u--input在APP下无法使用后置插槽

问题:
如果使用u--input组件并且使用后置插槽,那么在真机中将会渲染成【undefined】.

过程:
在DCLOUD社区、百度、uview-ui官方QQ频道和QQ群寻找答案均未果,后来仔细查看官方文档中的【input组件】部分发现端倪,于是决定使用【u-input】组件试试,在真机渲染后发现是正常的。

不知道是使用方法不对还是理解没有那么透彻,可能是对【u--input】与【u-input】没有那么上心吧,总之这样是可以正常使用了。如果参照本方法还是无法解决的话,可能是版本不同的原因,也可能是其她的原因。

继续阅读 »

问题:
如果使用u--input组件并且使用后置插槽,那么在真机中将会渲染成【undefined】.

过程:
在DCLOUD社区、百度、uview-ui官方QQ频道和QQ群寻找答案均未果,后来仔细查看官方文档中的【input组件】部分发现端倪,于是决定使用【u-input】组件试试,在真机渲染后发现是正常的。

不知道是使用方法不对还是理解没有那么透彻,可能是对【u--input】与【u-input】没有那么上心吧,总之这样是可以正常使用了。如果参照本方法还是无法解决的话,可能是版本不同的原因,也可能是其她的原因。

收起阅读 »

文件上传 切片分段 APP

上传文件

说明

使用 5+api
目前仅测试了app,测试也不完整,这里只是提供一个方法

利用 5+app 中 file.slice方法切片,再转化成base64上传,而我需要的正好就是base64格式

就当是记录一下

代码如下

/**  
 * 上传文件  
 * @param {Object} url需要绝对路径  
 */  
function Upload(url) {  
    return new Promise(async (resolve, reject) => {  
        let file;  
        try {  
            url = verifyFileUrl(url)  
            file = await getFileManagerSync(url);  
            let size = file.size,  
                chunk = 1048576,  
                current = 0;  
            // 开始切片  
            while (current < size) {  
                let tmp = file.slice(current, Math.min(current   chunk, size));  
                // 切片后返回的也是 file 对象,直接读取内容  
                let base64 = await file_reader_as_data_url(tmp);  
                let r = await UpFile(base64);  
                current  = chunk   1;  
            }  
            resolve('上传成功')  
        } catch (e) {  
            reject(e)  
        } finally {  
            if (file !== undefined) file.close();  
        }  
    })  
}  

/**  
 * 上传到服务器方法  
 * @param {Object} base64  
 */  
function UpFile(base64){  
    // 文件上传  
}  

/**  
 * 文件路径 可能是 file://store/  开头  
 * @param {Object} str 文件路径  
 */  
function verifyFileUrl(str) {  
    if (str.startsWith('file://')) {  
        str = str.substring(7)  
    }  
    return str  
}  

/**  
 * 使用5 app 获取file对象  
 * @param {Object} fileName  
 */  
function getFileManagerSync(fileName) {  
    return new Promise((resolve, reject) => {  
        plus.io.resolveLocalFileSystemURL(fileName, function(fs) {  
            fs.file(function(file) {  
                resolve((file))  
            })  
        }, err => {  
            reject(err)  
        })  
    })  
}  

/**  
 *  读取文件对象的 base64字符串  
 * @param {Object} file 5 app 的 文件对象  
 */  
function file_reader_as_data_url(file){  
    return new Promise((resolve,reject)=>{  
        try{  
            let fileReader =new plus.io.FileReader();  
            fileReader.onloadend = function(evt) {  
                resolve(evt.target.result)  
            };  
            fileReader.readAsDataURL(file,'UTF-8');  
        }catch(e){  
            //TODO handle the exception  
            reject(e)  
        }  
    })  
}
继续阅读 »

说明

使用 5+api
目前仅测试了app,测试也不完整,这里只是提供一个方法

利用 5+app 中 file.slice方法切片,再转化成base64上传,而我需要的正好就是base64格式

就当是记录一下

代码如下

/**  
 * 上传文件  
 * @param {Object} url需要绝对路径  
 */  
function Upload(url) {  
    return new Promise(async (resolve, reject) => {  
        let file;  
        try {  
            url = verifyFileUrl(url)  
            file = await getFileManagerSync(url);  
            let size = file.size,  
                chunk = 1048576,  
                current = 0;  
            // 开始切片  
            while (current < size) {  
                let tmp = file.slice(current, Math.min(current   chunk, size));  
                // 切片后返回的也是 file 对象,直接读取内容  
                let base64 = await file_reader_as_data_url(tmp);  
                let r = await UpFile(base64);  
                current  = chunk   1;  
            }  
            resolve('上传成功')  
        } catch (e) {  
            reject(e)  
        } finally {  
            if (file !== undefined) file.close();  
        }  
    })  
}  

/**  
 * 上传到服务器方法  
 * @param {Object} base64  
 */  
function UpFile(base64){  
    // 文件上传  
}  

/**  
 * 文件路径 可能是 file://store/  开头  
 * @param {Object} str 文件路径  
 */  
function verifyFileUrl(str) {  
    if (str.startsWith('file://')) {  
        str = str.substring(7)  
    }  
    return str  
}  

/**  
 * 使用5 app 获取file对象  
 * @param {Object} fileName  
 */  
function getFileManagerSync(fileName) {  
    return new Promise((resolve, reject) => {  
        plus.io.resolveLocalFileSystemURL(fileName, function(fs) {  
            fs.file(function(file) {  
                resolve((file))  
            })  
        }, err => {  
            reject(err)  
        })  
    })  
}  

/**  
 *  读取文件对象的 base64字符串  
 * @param {Object} file 5 app 的 文件对象  
 */  
function file_reader_as_data_url(file){  
    return new Promise((resolve,reject)=>{  
        try{  
            let fileReader =new plus.io.FileReader();  
            fileReader.onloadend = function(evt) {  
                resolve(evt.target.result)  
            };  
            fileReader.readAsDataURL(file,'UTF-8');  
        }catch(e){  
            //TODO handle the exception  
            reject(e)  
        }  
    })  
}
收起阅读 »

Ask chatGPT, 无需任何配置直接使用

ChatGPT HBuilderX

插件地址

chatGPT插件地址:https://ext.dcloud.net.cn/plugin?id=11702

预览

编辑器内选中需求,生成代码

编辑器,比如css文件,选中需求,点击【Coding ChatGPT】,即可获取对应代码。

使用action指令

编辑器,选中您要操作的文本,然后点击HBuilderX顶部菜单【工具】【Ask chatGPT】【打开action】,然后选择操作。

插件设置

HBuilderX顶部菜单【工具】【Ask chatGPT】【设置ApiKey和proxyURL】

新建对话

新建action

如何使用?

HBuilderX顶部菜单【工具】【Ask chatGPT】,即可打开chatGPT聊天视图。

继续阅读 »

插件地址

chatGPT插件地址:https://ext.dcloud.net.cn/plugin?id=11702

预览

编辑器内选中需求,生成代码

编辑器,比如css文件,选中需求,点击【Coding ChatGPT】,即可获取对应代码。

使用action指令

编辑器,选中您要操作的文本,然后点击HBuilderX顶部菜单【工具】【Ask chatGPT】【打开action】,然后选择操作。

插件设置

HBuilderX顶部菜单【工具】【Ask chatGPT】【设置ApiKey和proxyURL】

新建对话

新建action

如何使用?

HBuilderX顶部菜单【工具】【Ask chatGPT】,即可打开chatGPT聊天视图。

收起阅读 »

旧的问题在官方没有回复?

开发者中心

旧的问题在官方没有回复,要新社区有何用?浪费资源,官方的人一点都不负责,要么提供代码,要么重新上传资料,要他们技术有何用?????

旧的问题在官方没有回复,要新社区有何用?浪费资源,官方的人一点都不负责,要么提供代码,要么重新上传资料,要他们技术有何用?????

ios16.4系统mui picker选择器有遮挡问题

picker mui

解决方案:将mui.picker.css文件

.mui-picker-inner {
position: relative;
width: 100%;
height: 100%;
/ 16.4及以上注释 /
/ -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
-webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent)
/
}

继续阅读 »

解决方案:将mui.picker.css文件

.mui-picker-inner {
position: relative;
width: 100%;
height: 100%;
/ 16.4及以上注释 /
/ -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
-webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent)
/
}

收起阅读 »

自定义调试基座,基础开屏广告设置,真机调试不显示的解决办法

uni_app 教程

uni-ad广告后台↓
https://uniad.dcloud.net.cn/list/app

登录成功后进入管理页面,点击左侧菜单栏“广告设置”,选择此账号下 需要开通广告的app,点击“开通广告”(已开通过广告的点击“应用详情”)

未开通的


已开通的(不喜欢的广告类型可以不勾选)

后台准备好了之后,HBuilderX重新打包项目即可,实测自定义基座打包真机运行可用

如果一切准备好了,开屏广告仍不显示,参考下图

参考问题原文:https://ask.dcloud.net.cn/question/151908

继续阅读 »

uni-ad广告后台↓
https://uniad.dcloud.net.cn/list/app

登录成功后进入管理页面,点击左侧菜单栏“广告设置”,选择此账号下 需要开通广告的app,点击“开通广告”(已开通过广告的点击“应用详情”)

未开通的


已开通的(不喜欢的广告类型可以不勾选)

后台准备好了之后,HBuilderX重新打包项目即可,实测自定义基座打包真机运行可用

如果一切准备好了,开屏广告仍不显示,参考下图

参考问题原文:https://ask.dcloud.net.cn/question/151908

收起阅读 »

web-view与网页间通信

1、web-view支持网络网页和本地网页,本地网页要求必须放在【uni-app 项目根目录->hybrid->html 文件夹下或者 static 目录下】
2、要引入官方给的js文件‘
<!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件。 -->
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK,必须引用。 -->
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
【注意版本】
3、代码--例子

3.1 uni-app 中web-view壳子【XXX.vue】:

3.2 静态网页代码【inner.html】

点击按钮“发送消息[这个OK,关闭页面]”, 则返回xxx.vue,然后在返回到index页面。

4、uni-app向目标页面传参,目前我是放在路径里的,如【path:'http://192.168.10.76:8020/test-front/inner.html?para=' + (new Date()).getTime(),】

继续阅读 »

1、web-view支持网络网页和本地网页,本地网页要求必须放在【uni-app 项目根目录->hybrid->html 文件夹下或者 static 目录下】
2、要引入官方给的js文件‘
<!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件。 -->
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK,必须引用。 -->
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
【注意版本】
3、代码--例子

3.1 uni-app 中web-view壳子【XXX.vue】:

3.2 静态网页代码【inner.html】

点击按钮“发送消息[这个OK,关闭页面]”, 则返回xxx.vue,然后在返回到index页面。

4、uni-app向目标页面传参,目前我是放在路径里的,如【path:'http://192.168.10.76:8020/test-front/inner.html?para=' + (new Date()).getTime(),】

收起阅读 »

恳请官方大大仔细打磨一下uni.chooseImage、uni.previewImage 函数

图片压缩

首先声明,这不算BUG,我也没有能力及精力提BUG。
三无业余爱好者,以前用uniapp写了个微信小程序,so easy,用了3年了,非常好用及稳定,虽然客户不多,但都是死忠粉。
前几天考虑到有些客户说不喜欢用微信,心想就把他封装成app吧。这个框架就是好。
刚好前两天下雨,稍稍改好,封装成功。
结果在使用中却发现了问题,就是传上去的图片很喜欢旋转。
开始排查问题,开始怀疑是uni.chooseImage的问题,但仔细对照官方例子,没发现问题。不过我后来发现了,我自己后台对接的是php,里面也用到了压缩图片。把压缩图片的代码注释了就好了。这样表面上看起来手机上上传的图片是正的,因为我还有电脑桌面端,但桌面端看那个图片还是旋转的。
哎呀,搞晕了,长话短说吧,uni.chooseImage、uni.previewImage 配合,如果服务器图片没压缩的话,表面上手机上看来是都是正的,其实云盘图片还是旋转的。
如果图片服务器压缩了,刚才手机上显示的是直接旋转的,云图也是旋转的。
把未压缩的通过原图下载下来,图片本身比原手机图片还要大,1.2M的竟然干到了3.4M。
还有,通过uni.chooseImage回调的图片,预览时大多都是一个黑框框,很不美观。黑框框里一个小图片。
感谢官方大大做出这么好的框架,但能优化的更好就好了。

我的手机是红米K30的,经常造成旋转的图片是平时照的全屏图片。
我个人认为是uni.chooseImage的压缩算法还值得优化。

继续阅读 »

首先声明,这不算BUG,我也没有能力及精力提BUG。
三无业余爱好者,以前用uniapp写了个微信小程序,so easy,用了3年了,非常好用及稳定,虽然客户不多,但都是死忠粉。
前几天考虑到有些客户说不喜欢用微信,心想就把他封装成app吧。这个框架就是好。
刚好前两天下雨,稍稍改好,封装成功。
结果在使用中却发现了问题,就是传上去的图片很喜欢旋转。
开始排查问题,开始怀疑是uni.chooseImage的问题,但仔细对照官方例子,没发现问题。不过我后来发现了,我自己后台对接的是php,里面也用到了压缩图片。把压缩图片的代码注释了就好了。这样表面上看起来手机上上传的图片是正的,因为我还有电脑桌面端,但桌面端看那个图片还是旋转的。
哎呀,搞晕了,长话短说吧,uni.chooseImage、uni.previewImage 配合,如果服务器图片没压缩的话,表面上手机上看来是都是正的,其实云盘图片还是旋转的。
如果图片服务器压缩了,刚才手机上显示的是直接旋转的,云图也是旋转的。
把未压缩的通过原图下载下来,图片本身比原手机图片还要大,1.2M的竟然干到了3.4M。
还有,通过uni.chooseImage回调的图片,预览时大多都是一个黑框框,很不美观。黑框框里一个小图片。
感谢官方大大做出这么好的框架,但能优化的更好就好了。

我的手机是红米K30的,经常造成旋转的图片是平时照的全屏图片。
我个人认为是uni.chooseImage的压缩算法还值得优化。

收起阅读 »

超简单!Android Studio 查看证书SHA1,MD5等信息

Android证书

下载 Android 离线SDK - 正式版
解压后,用 Android Studio 导入 HBuilder-Integrate-AS
具体操作如下图:

如果 Gradle 面板目录中没有 signingReport 文件,请按一下操作:
File -> Settings -> Experimental -> Only include test tasks in the Gradle task list generated during Gradle Sync【取消勾选】 保存
保存后记得要同步一下:File -> Settings -> Sync Project with Gradle Files

继续阅读 »

下载 Android 离线SDK - 正式版
解压后,用 Android Studio 导入 HBuilder-Integrate-AS
具体操作如下图:

如果 Gradle 面板目录中没有 signingReport 文件,请按一下操作:
File -> Settings -> Experimental -> Only include test tasks in the Gradle task list generated during Gradle Sync【取消勾选】 保存
保存后记得要同步一下:File -> Settings -> Sync Project with Gradle Files

收起阅读 »