HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

求插件,uni-app,vue3

插件需求

需求-TreeSelect 树形选择

  1. 选择任意级别,任何节点都可以被选择
  2. 可筛选,模糊搜索,可递归搜索

需求-TreeSelect 树形选择

  1. 选择任意级别,任何节点都可以被选择
  2. 可筛选,模糊搜索,可递归搜索

uni-app如何连接mumu模拟器12调试

uniapp mumu模拟器

1. mumu模拟器下载与安装

进入mumu浏览器官方网站下载安装,官方下载连接

2.mumu模拟器设置

a.MuMu模拟器ADB端口信息规则

模拟器端口为动态端口,一般模拟器本体(即多开器内序号0)的端口为16384,多开的模拟器会在此基础上加32,如:

0号16384,1号16416,2号16448,以此类推;

如果模拟器端口被占用了,会在原端口加1,如:

16384被占用,加1,即16385;

另,多开的端口不受占用后的端口影响,依旧在16384的基础上加32。

b.找到自己安装的模拟器的ADB端口
很重要:

c.MuMu模拟器12如何连接adb

执行adb连接命令:

第一步,打开adb安装路径,参考下图,点击地址栏输入CMD,再点击回车键呼出命令提示符窗口;

第二步,在命令提示符窗口内输入adb.exe connect 127.0.0.1:XXXXX,之后点击回车。

注:XXXXX为你安装的模拟器端口号,请参考打开的模拟器问题诊断内展示端口号或MuMu多开器12内的ADB端口信息后再输入。

【自动脚本】
将下段代码另存为.bat文件,双击即可执行。主要更换自己的adb路径和端口

start cmd /k "cd/d D:\Program Files\Netease\MuMuPlayer-12.0\shell && adb connect 127.0.0.1:16384"

3.uni-app 运行设置

打开HBuilder X 依次找到 工具 -->设置 -->运行设置 ,找到ADB路径和Android模拟器端口,

注意:此处的adb路径
(1)可以使用mumu模拟器的路径 \Netease\MuMuPlayer-12.0\shell,
(2)可以使用AndroidSDK的 \android-sdk\platform-tools
(3)可以使用HBuilder 的默认路径

4.运行uni-app项目-运行到手机或模拟器

常规操作,运行到模拟器即可看到Android设备,选中即可运行。

总结,我先安装的Android studio,但是辜负我一腔热忱,调试半天属实不好用,转而使用mumu模拟器,轻快好省,推荐。

继续阅读 »

1. mumu模拟器下载与安装

进入mumu浏览器官方网站下载安装,官方下载连接

2.mumu模拟器设置

a.MuMu模拟器ADB端口信息规则

模拟器端口为动态端口,一般模拟器本体(即多开器内序号0)的端口为16384,多开的模拟器会在此基础上加32,如:

0号16384,1号16416,2号16448,以此类推;

如果模拟器端口被占用了,会在原端口加1,如:

16384被占用,加1,即16385;

另,多开的端口不受占用后的端口影响,依旧在16384的基础上加32。

b.找到自己安装的模拟器的ADB端口
很重要:

c.MuMu模拟器12如何连接adb

执行adb连接命令:

第一步,打开adb安装路径,参考下图,点击地址栏输入CMD,再点击回车键呼出命令提示符窗口;

第二步,在命令提示符窗口内输入adb.exe connect 127.0.0.1:XXXXX,之后点击回车。

注:XXXXX为你安装的模拟器端口号,请参考打开的模拟器问题诊断内展示端口号或MuMu多开器12内的ADB端口信息后再输入。

【自动脚本】
将下段代码另存为.bat文件,双击即可执行。主要更换自己的adb路径和端口

start cmd /k "cd/d D:\Program Files\Netease\MuMuPlayer-12.0\shell && adb connect 127.0.0.1:16384"

3.uni-app 运行设置

打开HBuilder X 依次找到 工具 -->设置 -->运行设置 ,找到ADB路径和Android模拟器端口,

注意:此处的adb路径
(1)可以使用mumu模拟器的路径 \Netease\MuMuPlayer-12.0\shell,
(2)可以使用AndroidSDK的 \android-sdk\platform-tools
(3)可以使用HBuilder 的默认路径

4.运行uni-app项目-运行到手机或模拟器

常规操作,运行到模拟器即可看到Android设备,选中即可运行。

总结,我先安装的Android studio,但是辜负我一腔热忱,调试半天属实不好用,转而使用mumu模拟器,轻快好省,推荐。

收起阅读 »

【新人分享】uni-starter实现登录后返回登录前页面的方法

common/appInit.js内新建拦截器

uni.addInterceptor('navigateTo', {  
        invoke(args) {  
            let redirectUrl = ''  
            if (uni.getStorageSync('uniIdRedirectUrl2')) {  
                redirectUrl = '?uniIdRedirectUrl=' + decodeURIComponent(uni.getStorageSync(  
                    'uniIdRedirectUrl2'))  
                console.log("缓存页 1->" + uni.getStorageSync('uniIdRedirectUrl2'))  
            } else {  
                console.log("uniIdRedirectUrl不存在")  
            }  

            let pages = getCurrentPages() //获取加载的页面  
            let newPages = pages.map(item => item.route)  
            let nowUrl = args.url //这个是当前页面  
            let lastPage = newPages.length && newPages[newPages.length - 1] //这个是上一个页面  

            //当 当前页面不是登录页时,缓存当前页    当 当前页是登录页,上一页不是登录页时,缓存上一页  
            if (!nowUrl.includes("/login")) {  
                uni.setStorageSync('uniIdRedirectUrl2', '/' + nowUrl);  
            } else if (!lastPage.includes("/login")) {  
                uni.setStorageSync('uniIdRedirectUrl2', '/' + lastPage);  
            }  

            console.log("缓存页 2->" + uni.getStorageSync('uniIdRedirectUrl2'))  

            //当 当前页是登录页 且页面不含上页信息时 加上返回页地址  
            if (nowUrl.includes("/login") && !nowUrl.includes("?uniIdRedirectUrl=")) {  
                console.log("遇到login拼接新地址->" + uni.getStorageSync('uniIdRedirectUrl2'))  
                args.url = nowUrl + redirectUrl  
            }  
        },  
        success(args) {  
            console.log("success", args)  
        },  
        fail(err) {  
            console.log('interceptor-fail', err)  
        },  
        complete(res) {  
            console.log('interceptor-complete', res)  
        }  
    })

此方法用户名密码登录时有效,微信登录还没找到问题出在哪?有路过的高手请指教一下,免得我们新人苦苦摸索,谢谢啦

继续阅读 »

common/appInit.js内新建拦截器

uni.addInterceptor('navigateTo', {  
        invoke(args) {  
            let redirectUrl = ''  
            if (uni.getStorageSync('uniIdRedirectUrl2')) {  
                redirectUrl = '?uniIdRedirectUrl=' + decodeURIComponent(uni.getStorageSync(  
                    'uniIdRedirectUrl2'))  
                console.log("缓存页 1->" + uni.getStorageSync('uniIdRedirectUrl2'))  
            } else {  
                console.log("uniIdRedirectUrl不存在")  
            }  

            let pages = getCurrentPages() //获取加载的页面  
            let newPages = pages.map(item => item.route)  
            let nowUrl = args.url //这个是当前页面  
            let lastPage = newPages.length && newPages[newPages.length - 1] //这个是上一个页面  

            //当 当前页面不是登录页时,缓存当前页    当 当前页是登录页,上一页不是登录页时,缓存上一页  
            if (!nowUrl.includes("/login")) {  
                uni.setStorageSync('uniIdRedirectUrl2', '/' + nowUrl);  
            } else if (!lastPage.includes("/login")) {  
                uni.setStorageSync('uniIdRedirectUrl2', '/' + lastPage);  
            }  

            console.log("缓存页 2->" + uni.getStorageSync('uniIdRedirectUrl2'))  

            //当 当前页是登录页 且页面不含上页信息时 加上返回页地址  
            if (nowUrl.includes("/login") && !nowUrl.includes("?uniIdRedirectUrl=")) {  
                console.log("遇到login拼接新地址->" + uni.getStorageSync('uniIdRedirectUrl2'))  
                args.url = nowUrl + redirectUrl  
            }  
        },  
        success(args) {  
            console.log("success", args)  
        },  
        fail(err) {  
            console.log('interceptor-fail', err)  
        },  
        complete(res) {  
            console.log('interceptor-complete', res)  
        }  
    })

此方法用户名密码登录时有效,微信登录还没找到问题出在哪?有路过的高手请指教一下,免得我们新人苦苦摸索,谢谢啦

收起阅读 »

关于编辑器3.8.12打包APP报毒问题

风险

经反复测试
1.使用传统打包方式(上传代码及证书)打包的安装包在所有手机管家都会报中等病毒感染
2.使用快速安心打包则绿色安全

报中等病毒,风险名称
Android.Virus.Gray.Mixopteroidea

具体原因不详,分享经验,仅供参考

经反复测试
1.使用传统打包方式(上传代码及证书)打包的安装包在所有手机管家都会报中等病毒感染
2.使用快速安心打包则绿色安全

报中等病毒,风险名称
Android.Virus.Gray.Mixopteroidea

具体原因不详,分享经验,仅供参考

离线打包场景 plus.runtime.install 安装失败

App升级 升级更新 uniapp离线打包 离线打包 App离线打包

这个问题好久了,找了好多资料没有解决,准备想着等项目结束了要是还搞不定就抛弃离线打包了。

今天偶然在文档里发现了一个关键的信息,貌似跟安装不了有关系。

首先我的SDK版本是3.8.7,是从旧版本升级上来的,这个版本很关键,按照之前的旧文档配置的离线打包环境,升级3.8.7后,只替换了已经存在的 aar,导致缺少了 3.8.7 版本中一个关键的 install-apk-release.aar 包,然后死活安装不了,也没有具体的报错信息。

https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android.html#%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83

说起来我还真是碰巧,正好赶上了这个版本差。

继续阅读 »

这个问题好久了,找了好多资料没有解决,准备想着等项目结束了要是还搞不定就抛弃离线打包了。

今天偶然在文档里发现了一个关键的信息,貌似跟安装不了有关系。

首先我的SDK版本是3.8.7,是从旧版本升级上来的,这个版本很关键,按照之前的旧文档配置的离线打包环境,升级3.8.7后,只替换了已经存在的 aar,导致缺少了 3.8.7 版本中一个关键的 install-apk-release.aar 包,然后死活安装不了,也没有具体的报错信息。

https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android.html#%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83

说起来我还真是碰巧,正好赶上了这个版本差。

收起阅读 »

Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件

自定义导航栏 导航栏 自定义模板组 tabbar

TC-tabBar

请观看

<img src="https://mp-5833fa1d-07f4-49f6-b120-c94019485776.cdn.bspapp.com/截图/tabbargif.gif" width="300" height="570"></img>

使用教程

第一步

引入组件

<template>  
    <TC-tabBar :zhi="zhi"></TC-tabBar>  
</template>  

第二步

将给zhi赋值进行传送给组件

备注:zhi按照底部按钮对应的页面中填写该按钮的索引(从0开始)

<script>  

    export default {  

        data() {  
            return {  
            zhi:1    //填写对应按钮的索引  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

第三步

在uni_modules/TC-tabBar/components/TC-tabBar/TC-tabBar中自行修改自己对应的页面路径

<img src="https://mp-5833fa1d-07f4-49f6-b120-c94019485776.cdn.bspapp.com/截图/1.png"></img>

部分代码

<img src="https://mp-5833fa1d-07f4-49f6-b120-c94019485776.cdn.bspapp.com/截图/tabbar1.png"></img>
<img src="https://mp-5833fa1d-07f4-49f6-b120-c94019485776.cdn.bspapp.com/截图/tabbar2.png"></img>

V:ANKR6699

<img src="https://mp-5833fa1d-07f4-49f6-b120-c94019485776.cdn.bspapp.com/techuang.jpg"></img>

链接:https://ext.dcloud.net.cn/plugin?id=14784

继续阅读 »

TC-tabBar

请观看

<img src="https://mp-5833fa1d-07f4-49f6-b120-c94019485776.cdn.bspapp.com/截图/tabbargif.gif" width="300" height="570"></img>

使用教程

第一步

引入组件

<template>  
    <TC-tabBar :zhi="zhi"></TC-tabBar>  
</template>  

第二步

将给zhi赋值进行传送给组件

备注:zhi按照底部按钮对应的页面中填写该按钮的索引(从0开始)

<script>  

    export default {  

        data() {  
            return {  
            zhi:1    //填写对应按钮的索引  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

第三步

在uni_modules/TC-tabBar/components/TC-tabBar/TC-tabBar中自行修改自己对应的页面路径

<img src="https://mp-5833fa1d-07f4-49f6-b120-c94019485776.cdn.bspapp.com/截图/1.png"></img>

部分代码

<img src="https://mp-5833fa1d-07f4-49f6-b120-c94019485776.cdn.bspapp.com/截图/tabbar1.png"></img>
<img src="https://mp-5833fa1d-07f4-49f6-b120-c94019485776.cdn.bspapp.com/截图/tabbar2.png"></img>

V:ANKR6699

<img src="https://mp-5833fa1d-07f4-49f6-b120-c94019485776.cdn.bspapp.com/techuang.jpg"></img>

链接:https://ext.dcloud.net.cn/plugin?id=14784

收起阅读 »

Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker

表单 组件 uniapp


使用教程
可以将组件拷贝到components内引用组件即可,也可以复制代码进行使用。
部分代码

链接:点击跳转

继续阅读 »


使用教程
可以将组件拷贝到components内引用组件即可,也可以复制代码进行使用。
部分代码

链接:点击跳转

收起阅读 »

安卓软件彻底重启

重启app,会杀掉所有进程以及服务后重启软件;plus.runtime.restart()只能重新加载,并非彻底重启,导致之前的服务进程无法退出

   const main = plus.android.runtimeMainActivity();  
   const Intent = plus.android.importClass("android.content.Intent");  
   const Process = plus.android.importClass("android.os.Process");  
   const intentMainActivity = new Intent(Intent.ACTION_MAIN);  
   const packageName = main.getPackageName();  
   intentMainActivity.setClassName(packageName, "io.dcloud.PandoraEntry");  
   intentMainActivity.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);  
   main.startActivity(intentMainActivity);  
   Process.killProcess(Process.myPid());
继续阅读 »

重启app,会杀掉所有进程以及服务后重启软件;plus.runtime.restart()只能重新加载,并非彻底重启,导致之前的服务进程无法退出

   const main = plus.android.runtimeMainActivity();  
   const Intent = plus.android.importClass("android.content.Intent");  
   const Process = plus.android.importClass("android.os.Process");  
   const intentMainActivity = new Intent(Intent.ACTION_MAIN);  
   const packageName = main.getPackageName();  
   intentMainActivity.setClassName(packageName, "io.dcloud.PandoraEntry");  
   intentMainActivity.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);  
   main.startActivity(intentMainActivity);  
   Process.killProcess(Process.myPid());
收起阅读 »

分享:一款基于uni-app开发的史上最前国庆头像推荐给大家

uniapp插件 uniapp 微信app 头像裁剪 微信小程序

体验地址:


使用教程:
进入微信小程序之后点击“点我生成”按钮,之后,滑动头像框


最后点击保存头像即可

继续阅读 »

体验地址:


使用教程:
进入微信小程序之后点击“点我生成”按钮,之后,滑动头像框


最后点击保存头像即可

收起阅读 »

分享:基于uni-app开发的国庆微信头像小程序

微信小程序 头像裁剪 uniapp uniapp原生插件

2023微信国庆节头像来了,太漂亮,赶紧设置


每年都会给大家分享国庆节头像,今年同样给大家找了一些精美的模板,但是样式要比之前增加很多,可选择种类也多了很多。

制作方法:

1、工具地址:扫描下方小程序二维码,快来体验吧!

2、使用教程:
扫码上方小程序二维码,点击“点我生成按钮”,授权生成,滚动上方热门头像并点击头像框选择喜欢的头像框

3、最后点击保存头像即可
快来试试吧,给你的头像增添一抹中国红!

继续阅读 »

2023微信国庆节头像来了,太漂亮,赶紧设置


每年都会给大家分享国庆节头像,今年同样给大家找了一些精美的模板,但是样式要比之前增加很多,可选择种类也多了很多。

制作方法:

1、工具地址:扫描下方小程序二维码,快来体验吧!

2、使用教程:
扫码上方小程序二维码,点击“点我生成按钮”,授权生成,滚动上方热门头像并点击头像框选择喜欢的头像框

3、最后点击保存头像即可
快来试试吧,给你的头像增添一抹中国红!

收起阅读 »

Wot Design Uni 组件库新增了 Circle 环形进度条组件

uni_app ui组件

Circle 环形进度条

圆环形的进度条组件,支持进度渐变动画。

地址

Github
文档网站
插件市场

基础用法

通过v-model表示进度条的当前进度,text属性控制进度条中间文字内容。

<wd-circle v-model="current" :text="`进度:${current}%`"></wd-circle>
const current = ref<number>(10)

宽度控制

通过strokeWidth属性来控制进度条宽度,默认10px

<wd-circle v-model="current" :strokeWidth="15"></wd-circle>

颜色定制

通过color属性控制进度条颜色,默认#1C64FD,通过layerColor属性控制进度条轨道颜色,默认#EBEEF5

<wd-circle v-model="current" color="#1C64FD" layer-color="#EBEEF5"></wd-circle>

渐变色

color属性支持传入对象格式来定义渐变色。

<wd-circle v-model="current" :color="gradientColor"></wd-circle>
const gradientColor = {  
  '0%': '#ffd01e',  
  '100%': '#ee0a24'  
}

进度条展开方向

通过clockwise属性控制进度条展开方向,clockwisefalse时,进度会从逆时针方向开始。

<wd-circle v-model="current" :clockwise="false"></wd-circle>

大小定制

通过size属性控制进度条圆环直径,默认100px

<wd-circle v-model="current" :size="300"></wd-circle>

组件效果

Attributes

参数 说明 类型 可选值 默认值 最低版本
v-model |modelValue 当前进度 number - 0 0.1.19
customClass 自定义class string - - 0.1.19
customStyle 自定义style string - - 0.1.19
rate 目标进度 number | string - 100 0.1.19
size 圆环直径,默认单位为 px number - 100 0.1.19
color 进度条颜色 string | Record<string, string> - #4d80f0 0.1.19
layerColor 轨道颜色 string - #EBEEF5 0.1.19
fill 填充颜色 string - #ffffff 0.1.19
speed 动画速度(单位为 rate/s) number - 50 0.1.19
text 文字 string - - 0.1.19
strokeWidth 进度条宽度,单位px number - 10 0.1.19
strokeLinecap 进度条端点的形状 string butt | round | square round 0.1.19
clockwise 是否顺时针增加 boolean - true 0.1.19

结语

目前Wot Design Uni组件库还在完善中,同时也期待有兴趣的小伙伴参与到组件库的建设中,近期的计划可见【重点】接下来要做的事 .

继续阅读 »

Circle 环形进度条

圆环形的进度条组件,支持进度渐变动画。

地址

Github
文档网站
插件市场

基础用法

通过v-model表示进度条的当前进度,text属性控制进度条中间文字内容。

<wd-circle v-model="current" :text="`进度:${current}%`"></wd-circle>
const current = ref<number>(10)

宽度控制

通过strokeWidth属性来控制进度条宽度,默认10px

<wd-circle v-model="current" :strokeWidth="15"></wd-circle>

颜色定制

通过color属性控制进度条颜色,默认#1C64FD,通过layerColor属性控制进度条轨道颜色,默认#EBEEF5

<wd-circle v-model="current" color="#1C64FD" layer-color="#EBEEF5"></wd-circle>

渐变色

color属性支持传入对象格式来定义渐变色。

<wd-circle v-model="current" :color="gradientColor"></wd-circle>
const gradientColor = {  
  '0%': '#ffd01e',  
  '100%': '#ee0a24'  
}

进度条展开方向

通过clockwise属性控制进度条展开方向,clockwisefalse时,进度会从逆时针方向开始。

<wd-circle v-model="current" :clockwise="false"></wd-circle>

大小定制

通过size属性控制进度条圆环直径,默认100px

<wd-circle v-model="current" :size="300"></wd-circle>

组件效果

Attributes

参数 说明 类型 可选值 默认值 最低版本
v-model |modelValue 当前进度 number - 0 0.1.19
customClass 自定义class string - - 0.1.19
customStyle 自定义style string - - 0.1.19
rate 目标进度 number | string - 100 0.1.19
size 圆环直径,默认单位为 px number - 100 0.1.19
color 进度条颜色 string | Record<string, string> - #4d80f0 0.1.19
layerColor 轨道颜色 string - #EBEEF5 0.1.19
fill 填充颜色 string - #ffffff 0.1.19
speed 动画速度(单位为 rate/s) number - 50 0.1.19
text 文字 string - - 0.1.19
strokeWidth 进度条宽度,单位px number - 10 0.1.19
strokeLinecap 进度条端点的形状 string butt | round | square round 0.1.19
clockwise 是否顺时针增加 boolean - true 0.1.19

结语

目前Wot Design Uni组件库还在完善中,同时也期待有兴趣的小伙伴参与到组件库的建设中,近期的计划可见【重点】接下来要做的事 .

收起阅读 »

Error: Not Found:Page[6][-1;-1;-1,27,28,29][WARN] : at newSDK/uniapp-sdk-4.1控制台报错解决

场景: c页面写了苹果支付的逻辑,在onshow里写了plus.payment.getChannels类似于获取apple支付权限,然后在成功的回调里一直报错Error: Not Found:Page[6][-1;-1;-1,27,28,29][WARN] : at newSDK/uniapp-sdk-4.1
刚开始以为是苹果支付的配置之类的地方出错了, 但检查了一圈发现没问题, 然后把报错放到百度上搜, 网上的意思是组件的加载方面出错了,然后猜测是进入页面过快, onshow里的逻辑没走完, 但尝试后发现也不是.
因为c页面原本调试时,是从a页面跳转过来的, 逻辑本来是好的. 但后来需求改变, 现在从b页面跳过来. 因为只改了跳转相关的逻辑,所以写好了没测试.
结论, 因为b页面用的u-button组件跳转,同时设置了:ripple="true" ripple-bg-color="rgba(255,255,255,0.1)" ,这是设置按钮点击样式的属性, 只要把这两个属性删了就可以了.
虽然报错解决,但其实很不能理解, 只是点击样式, 居然会影响到跳转页面的逻辑.

继续阅读 »

场景: c页面写了苹果支付的逻辑,在onshow里写了plus.payment.getChannels类似于获取apple支付权限,然后在成功的回调里一直报错Error: Not Found:Page[6][-1;-1;-1,27,28,29][WARN] : at newSDK/uniapp-sdk-4.1
刚开始以为是苹果支付的配置之类的地方出错了, 但检查了一圈发现没问题, 然后把报错放到百度上搜, 网上的意思是组件的加载方面出错了,然后猜测是进入页面过快, onshow里的逻辑没走完, 但尝试后发现也不是.
因为c页面原本调试时,是从a页面跳转过来的, 逻辑本来是好的. 但后来需求改变, 现在从b页面跳过来. 因为只改了跳转相关的逻辑,所以写好了没测试.
结论, 因为b页面用的u-button组件跳转,同时设置了:ripple="true" ripple-bg-color="rgba(255,255,255,0.1)" ,这是设置按钮点击样式的属性, 只要把这两个属性删了就可以了.
虽然报错解决,但其实很不能理解, 只是点击样式, 居然会影响到跳转页面的逻辑.

收起阅读 »