HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

更新后alt+鼠标左键,点击方法名跳不到定义处,选中项目点右键-重新构建项目索引,就可以了~赞

HBuilder HBuilderX

记录一下:
alt+鼠标左键,点击方法名跳不到定义处
解决办法:选中项目点右键-重新构建项目索引,就可以了~赞

参考:https://ask.dcloud.net.cn/article/5

记录一下:
alt+鼠标左键,点击方法名跳不到定义处
解决办法:选中项目点右键-重新构建项目索引,就可以了~赞

参考:https://ask.dcloud.net.cn/article/5

安卓uni.previewImage预览file://本地图片失败,一直转圈

uni_app

背景

自己开发的安卓原生插件,会返回安卓绝对路径形式的图片,如:file:///data/user/0/com.sample.test/cache/20220316.jpg
这是在应用的cache目录下直接写入的图片。
返回到uniapp端后,在template中通过<image>组件能正常显示图片。但通过uni.previewImage预览图片的话会一直转圈:


参数为:

{  
    "current": 0,  
    "urls": ["file:///data/user/0/com.sample.test/cache/20220316.jpg",  
        "file:///data/user/0/com.sample.test/cache/20220316_2.jpg",  
    ]  
}

接口返回:{"errMsg":"previewImage:ok"},没有错误。

解决方法

uni.previewImage只支持预览uniapp沙盒目录下的文件,即 只支持下面的目录和子目录下的图片预览:

  • PRIVATE_WWW 对应相对路径URL为"_www"开头的地址
  • PRIVATE_DOC 对应相对路径URL为"_doc"开头的地址
  • PUBLIC_DOCUMENTS 对应相对路径URL为"_documents"开头的地址
  • PUBLIC_DOWNLOADS 对应相对路径URL为"_downloads"开头的地址

所以原生插件生成图片时,将图片写入上面任意一个目录下即可。
以“_doc”为例,获取绝对路径可通过下面方式:

File parentDir = new File(mUniSDKInstance.rewriteUri(Uri.parse("_doc/"), URIAdapter.FILE).getPath());  

成功!

完整代码

原生安卓端
注意需要在app/src/main/assets/dcloud_uniplugins.json文件中注册原生插件。

import android.graphics.Bitmap;  
import android.graphics.BitmapFactory;  
import android.graphics.Canvas;  
import android.graphics.Color;  
import android.net.Uri;  
import com.alibaba.fastjson.JSONObject;  
import com.taobao.weex.adapter.URIAdapter;  
import java.io.File;  
import java.io.FileOutputStream;  
import java.util.HashMap;  

import io.dcloud.feature.uniapp.annotation.UniJSMethod;  
import io.dcloud.feature.uniapp.bridge.UniJSCallback;  
import io.dcloud.feature.uniapp.common.UniModule;  

public class MyImgUni extends UniModule {  

    @UniJSMethod(uiThread = false)  
    public void getNativeImg(JSONObject opts, UniJSCallback callback) {  
        if (callback == null) return;  
        if (opts == null) {  
            callback.invoke(new HashMap<String, String>() {{  
                put("error", "`opts` required!");  
            }});  
            return;  
        }  
        try {  
            String imgPath = opts.getString("path");  
            if(imgPath.startsWith("_")){  
                // 将沙盒路径转为uri路径  
                imgPath = mUniSDKInstance.rewriteUri(Uri.parse(imgPath), URIAdapter.FILE).toString();  
            }  
            // 转为绝对路径  
            imgPath = imgPath.replace("file://", "");  
            Bitmap bitmap = BitmapFactory.decodeFile(imgPath);  

            // 对图片进行处理  
            Bitmap outImg = bitmap.copy(Bitmap.Config.ARGB_8888, true);  
            Canvas canvas = new Canvas(outImg);  
            canvas.drawColor(Color.argb(170, 255, 0, 0));  

            // 【重点】获得输出目录(这里需要时沙盒目录,否则无法使用uni.previewImage预览)  
            File parentDir = new File(mUniSDKInstance.rewriteUri(Uri.parse("_doc/"), URIAdapter.FILE).getPath());  
            // 创建输出图片  
            File outFile = new File(parentDir, "newImg.jpg");  
            try (FileOutputStream outputStream = new FileOutputStream(outFile)) {  
                outImg.compress(Bitmap.CompressFormat.JPEG, 80, outputStream);  
            }  
            callback.invoke(new HashMap<String, String>() {{  
                put("resPath", "file://" + outFile.getAbsolutePath());  
            }});  
        } catch (Exception e) {  
            callback.invoke(new HashMap<String, String>() {{  
                put("error", e.toString());  
            }});  
        }  
    }  
}  

uniapp端调用(使用static目录下的一个图片测试)

                const handler = uni.requireNativePlugin('img-handle');  
                const ntvData = {path: '_www/static/inner/office_green_sm.png'};  
                handler.getNativeImg(ntvData, ({error, resPath}) => {  
                    if(error){  
                        console.error('handle img error:', error);  
                        return;  
                    }  
                    uni.previewImage({  
                        current: 0,  
                        urls:[resPath]  
                    })  
                });
继续阅读 »

背景

自己开发的安卓原生插件,会返回安卓绝对路径形式的图片,如:file:///data/user/0/com.sample.test/cache/20220316.jpg
这是在应用的cache目录下直接写入的图片。
返回到uniapp端后,在template中通过<image>组件能正常显示图片。但通过uni.previewImage预览图片的话会一直转圈:


参数为:

{  
    "current": 0,  
    "urls": ["file:///data/user/0/com.sample.test/cache/20220316.jpg",  
        "file:///data/user/0/com.sample.test/cache/20220316_2.jpg",  
    ]  
}

接口返回:{"errMsg":"previewImage:ok"},没有错误。

解决方法

uni.previewImage只支持预览uniapp沙盒目录下的文件,即 只支持下面的目录和子目录下的图片预览:

  • PRIVATE_WWW 对应相对路径URL为"_www"开头的地址
  • PRIVATE_DOC 对应相对路径URL为"_doc"开头的地址
  • PUBLIC_DOCUMENTS 对应相对路径URL为"_documents"开头的地址
  • PUBLIC_DOWNLOADS 对应相对路径URL为"_downloads"开头的地址

所以原生插件生成图片时,将图片写入上面任意一个目录下即可。
以“_doc”为例,获取绝对路径可通过下面方式:

File parentDir = new File(mUniSDKInstance.rewriteUri(Uri.parse("_doc/"), URIAdapter.FILE).getPath());  

成功!

完整代码

原生安卓端
注意需要在app/src/main/assets/dcloud_uniplugins.json文件中注册原生插件。

import android.graphics.Bitmap;  
import android.graphics.BitmapFactory;  
import android.graphics.Canvas;  
import android.graphics.Color;  
import android.net.Uri;  
import com.alibaba.fastjson.JSONObject;  
import com.taobao.weex.adapter.URIAdapter;  
import java.io.File;  
import java.io.FileOutputStream;  
import java.util.HashMap;  

import io.dcloud.feature.uniapp.annotation.UniJSMethod;  
import io.dcloud.feature.uniapp.bridge.UniJSCallback;  
import io.dcloud.feature.uniapp.common.UniModule;  

public class MyImgUni extends UniModule {  

    @UniJSMethod(uiThread = false)  
    public void getNativeImg(JSONObject opts, UniJSCallback callback) {  
        if (callback == null) return;  
        if (opts == null) {  
            callback.invoke(new HashMap<String, String>() {{  
                put("error", "`opts` required!");  
            }});  
            return;  
        }  
        try {  
            String imgPath = opts.getString("path");  
            if(imgPath.startsWith("_")){  
                // 将沙盒路径转为uri路径  
                imgPath = mUniSDKInstance.rewriteUri(Uri.parse(imgPath), URIAdapter.FILE).toString();  
            }  
            // 转为绝对路径  
            imgPath = imgPath.replace("file://", "");  
            Bitmap bitmap = BitmapFactory.decodeFile(imgPath);  

            // 对图片进行处理  
            Bitmap outImg = bitmap.copy(Bitmap.Config.ARGB_8888, true);  
            Canvas canvas = new Canvas(outImg);  
            canvas.drawColor(Color.argb(170, 255, 0, 0));  

            // 【重点】获得输出目录(这里需要时沙盒目录,否则无法使用uni.previewImage预览)  
            File parentDir = new File(mUniSDKInstance.rewriteUri(Uri.parse("_doc/"), URIAdapter.FILE).getPath());  
            // 创建输出图片  
            File outFile = new File(parentDir, "newImg.jpg");  
            try (FileOutputStream outputStream = new FileOutputStream(outFile)) {  
                outImg.compress(Bitmap.CompressFormat.JPEG, 80, outputStream);  
            }  
            callback.invoke(new HashMap<String, String>() {{  
                put("resPath", "file://" + outFile.getAbsolutePath());  
            }});  
        } catch (Exception e) {  
            callback.invoke(new HashMap<String, String>() {{  
                put("error", e.toString());  
            }});  
        }  
    }  
}  

uniapp端调用(使用static目录下的一个图片测试)

                const handler = uni.requireNativePlugin('img-handle');  
                const ntvData = {path: '_www/static/inner/office_green_sm.png'};  
                handler.getNativeImg(ntvData, ({error, resPath}) => {  
                    if(error){  
                        console.error('handle img error:', error);  
                        return;  
                    }  
                    uni.previewImage({  
                        current: 0,  
                        urls:[resPath]  
                    })  
                });
收起阅读 »

app端打开微信客服

微信 App 客服

1.先申请立即去申请
2.在‘开始接入’找到‘在微信外接入’选项进入,填写完成,就可以获取到客服地址url
3.在企业信息里面查看企业ID也就是下面的corpid
4.打自定义包测试。

// #ifdef APP-PLUS  
            let sweixin = null  
            plus.share.getServices(res=>{  
                sweixin = res.find(i => i.id === 'weixin')  
                if(sweixin){  
                    sweixin.openCustomerServiceChat({  
                        corpid: '企业ID',  
                        url: '客服地址',  
                    },suc=>{  
                        console.log("success",JSON.stringify(res))  
                    },err=>{  
                        console.log("error",JSON.stringify(err))  
                    })  
                }else{  
                    plus.nativeUI.alert('当前环境不支持微信操作!')  
                }  
            },function(){  
                uni.showToast({title: "获取服务失败,不支持该操作。"+JSON.stringify(e), icon: 'error'})  
            })  
            // #endif
继续阅读 »

1.先申请立即去申请
2.在‘开始接入’找到‘在微信外接入’选项进入,填写完成,就可以获取到客服地址url
3.在企业信息里面查看企业ID也就是下面的corpid
4.打自定义包测试。

// #ifdef APP-PLUS  
            let sweixin = null  
            plus.share.getServices(res=>{  
                sweixin = res.find(i => i.id === 'weixin')  
                if(sweixin){  
                    sweixin.openCustomerServiceChat({  
                        corpid: '企业ID',  
                        url: '客服地址',  
                    },suc=>{  
                        console.log("success",JSON.stringify(res))  
                    },err=>{  
                        console.log("error",JSON.stringify(err))  
                    })  
                }else{  
                    plus.nativeUI.alert('当前环境不支持微信操作!')  
                }  
            },function(){  
                uni.showToast({title: "获取服务失败,不支持该操作。"+JSON.stringify(e), icon: 'error'})  
            })  
            // #endif
收起阅读 »

uniapp安卓端获取本地文件base64转化成字节数组

Android base64

通过文件选择插件获取本地文件路径 文件选择插件

//this.pathArr[0].url 为文件路径  
void plus.io.resolveLocalFileSystemURL(this.pathArr[0].url, (FileEntry) => {  
                    FileEntry.file((file) => {  
                        var fileReader = new plus.io.FileReader();  

                        fileReader.readAsDataURL(file);  
                        fileReader.onloadend = function(evt) {  
                                                //evt.target.result 为 base64数据  
                            _this.base64Toutf8(evt.target.result)  
                        }  
                    })  

                });  
            },
//根据base64转字节数组  
            base64Toutf8(base64) {  
                               //去除base64文件头  
                base64 = base64.replace(/^data:+.+;base64,/, "");  
                var strArr = [];  
                var n = 256;  
                var l = base64.length;  
                console.log(base64)  
                console.log(l)  
                for (let i = 0; i < l / n; i++) {  
                    let a = base64.slice(n * i, n * (i + 1))  
                    strArr.push(a)  
                }  
                let byteArr = []  
                let byteArr2=[]  
                let Base64 = plus.android.importClass("java.util.Base64");  
                let decoder = Base64.getDecoder();  
                for (let k = 0; k < strArr.length; k++) {  
                    let bytes = decoder.decode(strArr[k]);  
                    if (bytes !== null) {  
                        for (let j = 0; j < bytes.length; j++) {  
                            bytes[j] = bytes[j] & 0xFF  
                        }  
                        byteArr.push(...bytes)  
                    } else {  
                        console.log(strArr[k])  
                    }  
                }  

            },
继续阅读 »

通过文件选择插件获取本地文件路径 文件选择插件

//this.pathArr[0].url 为文件路径  
void plus.io.resolveLocalFileSystemURL(this.pathArr[0].url, (FileEntry) => {  
                    FileEntry.file((file) => {  
                        var fileReader = new plus.io.FileReader();  

                        fileReader.readAsDataURL(file);  
                        fileReader.onloadend = function(evt) {  
                                                //evt.target.result 为 base64数据  
                            _this.base64Toutf8(evt.target.result)  
                        }  
                    })  

                });  
            },
//根据base64转字节数组  
            base64Toutf8(base64) {  
                               //去除base64文件头  
                base64 = base64.replace(/^data:+.+;base64,/, "");  
                var strArr = [];  
                var n = 256;  
                var l = base64.length;  
                console.log(base64)  
                console.log(l)  
                for (let i = 0; i < l / n; i++) {  
                    let a = base64.slice(n * i, n * (i + 1))  
                    strArr.push(a)  
                }  
                let byteArr = []  
                let byteArr2=[]  
                let Base64 = plus.android.importClass("java.util.Base64");  
                let decoder = Base64.getDecoder();  
                for (let k = 0; k < strArr.length; k++) {  
                    let bytes = decoder.decode(strArr[k]);  
                    if (bytes !== null) {  
                        for (let j = 0; j < bytes.length; j++) {  
                            bytes[j] = bytes[j] & 0xFF  
                        }  
                        byteArr.push(...bytes)  
                    } else {  
                        console.log(strArr[k])  
                    }  
                }  

            },
收起阅读 »

长期招聘全职uniapp开发,主要为APP。月薪2W到3W。

招聘 uniapp

长期招聘全职uniapp开发,主要为APP。月薪2W到3W。

**需远程连接进行开发,可个人,可签合同。

要求:
3年及以上开发经验

uniapp技术栈:必须熟练掌握以下 (npro和uview,nvue,sass,unicloud)

项目经验丰富,能够快速理解并上手他人项目,对项目进行继续开发。

时间充裕,工作态度认真,代码逻辑严谨**

有意者联系V:oyo476

有人监工,不适合划水。

继续阅读 »

长期招聘全职uniapp开发,主要为APP。月薪2W到3W。

**需远程连接进行开发,可个人,可签合同。

要求:
3年及以上开发经验

uniapp技术栈:必须熟练掌握以下 (npro和uview,nvue,sass,unicloud)

项目经验丰富,能够快速理解并上手他人项目,对项目进行继续开发。

时间充裕,工作态度认真,代码逻辑严谨**

有意者联系V:oyo476

有人监工,不适合划水。

收起阅读 »

发现一款可以生成uniapp项目代码的工具

http://wtm.plus

可以在线拖拽制作页面,能在线预览,并且可以下载完整的uniapp项目代码,可以直接用hbuilder打开运行的。

http://wtm.plus

可以在线拖拽制作页面,能在线预览,并且可以下载完整的uniapp项目代码,可以直接用hbuilder打开运行的。

nvue map 高德地图组件升级、离线个性化地图、离线设置样式文件、可使用nvue map 所有功能

nvue map 高德地图组件升级、离线个性化地图、离线设置样式文件、可使用nvue map 所有功能:https://ext.dcloud.net.cn/plugin?id=7637

继续阅读 »

nvue map 高德地图组件升级、离线个性化地图、离线设置样式文件、可使用nvue map 所有功能:https://ext.dcloud.net.cn/plugin?id=7637

收起阅读 »

【报Bug】uni.getSystemInfoSync().safeAreaInsets.bottom为 -48 的错误

bug反馈

【报Bug】uni.getSystemInfoSync().safeAreaInsets.bottom为 -48 的错误 Hbuilder v3.3.11

【报Bug】uni.getSystemInfoSync().safeAreaInsets.bottom为 -48 的错误 Hbuilder v3.3.11

android端实体返回键阻止返回上一页且实现点击两次退出

nativeUI

在页面中加入一下代码:

data() {  
            return {  
                backButtonPress: 0  
            }  
        }  

......  

onBackPress() {  
            this.backButtonPress ++  
            if (this.backButtonPress > 1) {  
                plus.runtime.quit()  
            } else {  
                plus.nativeUI.toast(this.$t('app.quit'))  
            }  
            setTimeout(() => {  
                this.backButtonPress = 0;  
            }, 2000)  
            return true  
        }

将backButtonPress设置为0的延时处理,设置为2000毫秒,为了和plus.nativeUI.toast默认的显示时长保持一致:

https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast
https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.ToastStyles

duration: (String 类型 )提示消息框显示的时间
可选值为"long"、"short",值为"long"时显示时间约为3.5s,值为"short"时显示时间约为2s,未设置时默认值为"short"。

继续阅读 »

在页面中加入一下代码:

data() {  
            return {  
                backButtonPress: 0  
            }  
        }  

......  

onBackPress() {  
            this.backButtonPress ++  
            if (this.backButtonPress > 1) {  
                plus.runtime.quit()  
            } else {  
                plus.nativeUI.toast(this.$t('app.quit'))  
            }  
            setTimeout(() => {  
                this.backButtonPress = 0;  
            }, 2000)  
            return true  
        }

将backButtonPress设置为0的延时处理,设置为2000毫秒,为了和plus.nativeUI.toast默认的显示时长保持一致:

https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast
https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.ToastStyles

duration: (String 类型 )提示消息框显示的时间
可选值为"long"、"short",值为"long"时显示时间约为3.5s,值为"short"时显示时间约为2s,未设置时默认值为"short"。

收起阅读 »

uni-app 实现Map地图聚合功能,可自定义聚合图标样式,支持app的nvue/微信小程序的vue/H5,可以设置或定 死地图的俯视角度/倾斜角度

uni-app 实现Map地图聚合功能,可自定义聚合图标样式,支持app的nvue/微信小程序的vue/H5,可以设置或定 死地图的俯视角度/倾斜角度

由于uni-app的api兼容性,造成个平台的聚合样式可能不同

有偿提供源码

QQ:543610866

继续阅读 »

uni-app 实现Map地图聚合功能,可自定义聚合图标样式,支持app的nvue/微信小程序的vue/H5,可以设置或定 死地图的俯视角度/倾斜角度

由于uni-app的api兼容性,造成个平台的聚合样式可能不同

有偿提供源码

QQ:543610866

收起阅读 »

界面建议

增加一个菜单或选项卡组或复选按钮组,可以选择在IDE中显示的标签。这样可以减少非必要标签的拥挤,减少开发者的视觉干扰,因为同名不同项目按“页面名-项目名”取名的标签也不需要这样的格式了,进一步节省了视觉空间,除非同名页面的两个项目都是同时显示的。

增加一个菜单或选项卡组或复选按钮组,可以选择在IDE中显示的标签。这样可以减少非必要标签的拥挤,减少开发者的视觉干扰,因为同名不同项目按“页面名-项目名”取名的标签也不需要这样的格式了,进一步节省了视觉空间,除非同名页面的两个项目都是同时显示的。