HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

w-picker组件微信小程序兼容性问题

很多项目中的选择器用的全部是Dcloud插件市场的 w-picker组件,这个组件功能非常的强大能满足大部分选择器的使用场景。
最近发现了一个bug,微信小程序w-picker下拉选择数据时,偶然出现选中的数据依然是上次的老数据而不是最新的数据

经过深入研究发现bug出现原因: picker-view 组件的 @change 事件仅在用户完成滑动操作后触发。
当系统出现异常情况时,通常是由于用户滑动操作过于迅速,并在滑动尚未结束时点击了右上角的”确认按钮“。
在此情形下,由于 @change 事件未被触发,系统无法获取滑动后更新的值,因此实际获取到的仍然是滑动前的原始值。

解决方案:
picker-view 上增加属性: immediate-change="true"
immediate-change:是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。

注意事项:
也就是说 uniapp的picker-view 组件在小程序上都会存在这种问题,根据我们的实际业务场景来使用immediate-change属性,请查看picker-view组件详细介绍

继续阅读 »

很多项目中的选择器用的全部是Dcloud插件市场的 w-picker组件,这个组件功能非常的强大能满足大部分选择器的使用场景。
最近发现了一个bug,微信小程序w-picker下拉选择数据时,偶然出现选中的数据依然是上次的老数据而不是最新的数据

经过深入研究发现bug出现原因: picker-view 组件的 @change 事件仅在用户完成滑动操作后触发。
当系统出现异常情况时,通常是由于用户滑动操作过于迅速,并在滑动尚未结束时点击了右上角的”确认按钮“。
在此情形下,由于 @change 事件未被触发,系统无法获取滑动后更新的值,因此实际获取到的仍然是滑动前的原始值。

解决方案:
picker-view 上增加属性: immediate-change="true"
immediate-change:是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。

注意事项:
也就是说 uniapp的picker-view 组件在小程序上都会存在这种问题,根据我们的实际业务场景来使用immediate-change属性,请查看picker-view组件详细介绍

收起阅读 »

应用发起转让,会发到对方的邮箱里有一个地址,这个地址是可以接收的

这地方要是有短信通知一下,去邮箱接收就好了,使用体验太不好了, 接收方如果不及时看到邮件根本不知道

这地方要是有短信通知一下,去邮箱接收就好了,使用体验太不好了, 接收方如果不及时看到邮件根本不知道

关于在 setup中使用 getCurrentInstance,结果返回为null的问题

import { reactive, ref, getCurrentInstance } from 'vue'

const install = getCurrentInstance()

getCurrentInstance应该像这样在代码一开始就调用,如果放到各种异步回调的函数中 就会报null

继续阅读 »

import { reactive, ref, getCurrentInstance } from 'vue'

const install = getCurrentInstance()

getCurrentInstance应该像这样在代码一开始就调用,如果放到各种异步回调的函数中 就会报null

收起阅读 »

uniapp+vue3跨三端仿微信app聊天程序【h5+小程序+app端】

uni_app vite vue3 uniapp uni-app

uniapp-vue3-wechat:基于uni-app+vite5+vue3+uv-ui纯手写搭建仿微信app界面聊天实例。集成 聊天、通讯录、我、朋友圈等功能模块。支持编译运行到H5+小程序端+App端。实现消息/emo、仿微信长按语音动效、图片/视频预览、红包等功能。

项目知识点

  • 编辑器:HbuilderX 4.75
  • 跨端技术:uni-app+vue3+pinia2+vite5
  • 状态管理:pinia2
  • 组件库:uni-ui+uv-ui(uniapp+vue3组件库)
  • 弹框组件:uv3-popup(自定义uniapp+vue3多端弹框组件)
  • 自定义组件:uv3-navbar导航栏+uv3-tabbar菜单栏
  • 缓存技术:pinia-plugin-unistorage
  • 编译支持:h5+小程序+app端

项目框架目录

使用uni-app+vue3创建项目模板,采用vue3 setup语法编码。

uniapp-wechat聊天项目已经更新到我的原创作品集。

uni-app+vue3+pinia2+uv-ui跨三端仿微信app聊天

热文推荐

Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用
最新版Flutter3.32+Dart3.8跨平台仿微信app聊天界面|朋友圈
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
原创uniapp+vue3+deepseek+uv-ui跨端实战仿deepseek/豆包流式ai聊天对话助手。
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
Electron32-Vue3OS桌面版os系统|vue3+electron+arco客户端OS管理模板
Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用
tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序

继续阅读 »

uniapp-vue3-wechat:基于uni-app+vite5+vue3+uv-ui纯手写搭建仿微信app界面聊天实例。集成 聊天、通讯录、我、朋友圈等功能模块。支持编译运行到H5+小程序端+App端。实现消息/emo、仿微信长按语音动效、图片/视频预览、红包等功能。

项目知识点

  • 编辑器:HbuilderX 4.75
  • 跨端技术:uni-app+vue3+pinia2+vite5
  • 状态管理:pinia2
  • 组件库:uni-ui+uv-ui(uniapp+vue3组件库)
  • 弹框组件:uv3-popup(自定义uniapp+vue3多端弹框组件)
  • 自定义组件:uv3-navbar导航栏+uv3-tabbar菜单栏
  • 缓存技术:pinia-plugin-unistorage
  • 编译支持:h5+小程序+app端

项目框架目录

使用uni-app+vue3创建项目模板,采用vue3 setup语法编码。

uniapp-wechat聊天项目已经更新到我的原创作品集。

uni-app+vue3+pinia2+uv-ui跨三端仿微信app聊天

热文推荐

Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用
最新版Flutter3.32+Dart3.8跨平台仿微信app聊天界面|朋友圈
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
原创uniapp+vue3+deepseek+uv-ui跨端实战仿deepseek/豆包流式ai聊天对话助手。
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
Electron32-Vue3OS桌面版os系统|vue3+electron+arco客户端OS管理模板
Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用
tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序

收起阅读 »

windows创建ios证书和上架app store的教程

iOS证书

使用uniapp开发ios应用,云打包的时候需要提供证书profile文件(描述文件)和私钥证书p12文件。

然而这两个文件需要使用mac OS系统的电脑来生成,其实使用windows电脑也可以生成这两个文件,包括上架也是可以的。

首先来说生成证书的方法,生成证书首先要有苹果开发者账号,而苹果开发者账号来自己苹果开发者中心。假如你们公司还没有苹果开发者账号,请先参考这篇文章进入苹果开发者官网申请一个账号:

https://juejin.cn/post/7529496810265575458

申请账号应该是最麻烦的,申请完账号后,下面创建证书和上架就容易得多了。

首先来搞证书和证书profile文件

由于我们没有苹果电脑,因此我们使用香蕉云编来协助生成证书:

一、创建证书流程大致是这样:
(1)登录苹果开发者中心页面,进入证书页面,如下图:

(2)然后开始创建证书,创建证书第一步是选择证书的类型,这里固定选择ios distribution ad hoc and app store connect类型,不要选择其他的类型。

(3)点击下一步,需要提供一个csr文件,这时候就需要使用香蕉云编来辅助生成这个csr文件了:

https://www.yunedit.com/createcert

生成后,将这个csr文件下载到本地

然后继续刚才的步骤,选择这个csr文件,就可以生成证书了

(4)将第(3)步生成的证书下载下来,发现是.cer格式的,而不是p12格式,因此我们还需要使用香蕉云编,将这个cer文件转化为p12文件。

(5)重新登录香蕉云编,上传刚才的cer文件,就可以使用生成p12功能,转化为p12格式的私钥证书了。如下图所示:

二、创建profile文件(描述文件)的步骤。

(6)进入到苹果开发者中心,找到identifiers模块,如下图所示:

这个界面是管理appId的界面,在这里新建一个appId. appId的描述可以随便填,关键的appId需要填写uni.xxxxxxx或com.xxxxx.yyy这样的包名的格式,需要跟我们在uniapp里打包填写的AppId一致

(7) 创建完APPID 后,点击profiles模块,开始创建profile文件了

创建profile文件的时候,选择app store类型(假如想创建测试类型可以问下香蕉云编的客服或者看香蕉云编的教程)。

(8)点击下一步,会要我们选择APPID和选择证书,选择APPID比较直观,不容易选错,但是选择证书很容易选错。所示我们截图看看,选择证书的界面是怎样的,见到这个界面不要点太快,不要选错了:

好了,没什么意外,profile文件也生成成功了。

三、最后,说下上架的的流程,由于上架的流程也比较多,新手一时间可能消化不了,上架可以参考这篇文章:

https://blog.csdn.net/weixin_48914851/article/details/149223552

继续阅读 »

使用uniapp开发ios应用,云打包的时候需要提供证书profile文件(描述文件)和私钥证书p12文件。

然而这两个文件需要使用mac OS系统的电脑来生成,其实使用windows电脑也可以生成这两个文件,包括上架也是可以的。

首先来说生成证书的方法,生成证书首先要有苹果开发者账号,而苹果开发者账号来自己苹果开发者中心。假如你们公司还没有苹果开发者账号,请先参考这篇文章进入苹果开发者官网申请一个账号:

https://juejin.cn/post/7529496810265575458

申请账号应该是最麻烦的,申请完账号后,下面创建证书和上架就容易得多了。

首先来搞证书和证书profile文件

由于我们没有苹果电脑,因此我们使用香蕉云编来协助生成证书:

一、创建证书流程大致是这样:
(1)登录苹果开发者中心页面,进入证书页面,如下图:

(2)然后开始创建证书,创建证书第一步是选择证书的类型,这里固定选择ios distribution ad hoc and app store connect类型,不要选择其他的类型。

(3)点击下一步,需要提供一个csr文件,这时候就需要使用香蕉云编来辅助生成这个csr文件了:

https://www.yunedit.com/createcert

生成后,将这个csr文件下载到本地

然后继续刚才的步骤,选择这个csr文件,就可以生成证书了

(4)将第(3)步生成的证书下载下来,发现是.cer格式的,而不是p12格式,因此我们还需要使用香蕉云编,将这个cer文件转化为p12文件。

(5)重新登录香蕉云编,上传刚才的cer文件,就可以使用生成p12功能,转化为p12格式的私钥证书了。如下图所示:

二、创建profile文件(描述文件)的步骤。

(6)进入到苹果开发者中心,找到identifiers模块,如下图所示:

这个界面是管理appId的界面,在这里新建一个appId. appId的描述可以随便填,关键的appId需要填写uni.xxxxxxx或com.xxxxx.yyy这样的包名的格式,需要跟我们在uniapp里打包填写的AppId一致

(7) 创建完APPID 后,点击profiles模块,开始创建profile文件了

创建profile文件的时候,选择app store类型(假如想创建测试类型可以问下香蕉云编的客服或者看香蕉云编的教程)。

(8)点击下一步,会要我们选择APPID和选择证书,选择APPID比较直观,不容易选错,但是选择证书很容易选错。所示我们截图看看,选择证书的界面是怎样的,见到这个界面不要点太快,不要选错了:

好了,没什么意外,profile文件也生成成功了。

三、最后,说下上架的的流程,由于上架的流程也比较多,新手一时间可能消化不了,上架可以参考这篇文章:

https://blog.csdn.net/weixin_48914851/article/details/149223552

收起阅读 »

Vue3 H5打包后assets static文件夹中有重复图片

uniapp

Vue3 H5打包后assets static文件夹中有重复图片

Vue3 H5打包后assets static文件夹中有重复图片

借助外部工具, 优化HBuilder X 编辑的快捷使用 --alt+鼠标左键

HBuilderX 快捷键

适用环境: window

工具: autohotkey;

网址: (https://www.autohotkey.com/)

比如有个非常脑残的设计 alt+鼠标左键跳转 而且无法修改这个快捷键, 这个不能忍,

只能借助外部工具实现 crlt+ 鼠标左键

下面是常用的几个快捷键分享:

  1. crlt+ 鼠标左键 : 跳转文件

  2. crlt+r : ios真机运行

  3. crlt+e: 安卓真机运行

  4. 输入l 回车/空格 : 直接输出console.log()

#Requires AutoHotkey v2.0  

; ^t::  
; {  
;     Send "My First Script"  
; }  
; ^t:: MsgBox "test"  

; OutputVar := InputBox("What is your first name?", "Question 1").Value  
; MsgBox "That's an awesome name, " OutputVar "."  

; ::yx::test@example.com  

GroupAdd "CODE", "ahk_exe Code.exe"    ;vscode环境  
GroupAdd "HB", "ahk_exe HBuilderX.exe" ;HB环境  

#HotIf WinActive("ahk_group CODE")  
; :*:l::console.log(){Left}  ; 直接触发了无需任何按键  
; :o:l::console.log(){Left}    ; o忽略后续输入触发的按键  

#HotIf  

#HotIf WinActive("ahk_group HB")  
^r:: Send "^r5"              ; 执行ios运行真机  
^e:: Send "^r4"              ; 执行andriod运行真机  
; :*:l::console.log(){Left}  ; 直接触发了无需任何按键  
:o:l::console.log(){Left}    ; o忽略后续输入触发的按键  

^LButton:: {  ; Ctrl+左键热键  
    SendPlay "{Ctrl Up}"  
    Sleep 100  
    Send "{Alt down}"      ; 持续按下Alt键 [6]()  
    Sleep 100              ; 等待100ms确保光标变成小手  
    Send "{Click Left}"          ; 模拟鼠标右键点击 [6]()  
    Sleep 100               ; 保持右键按下状态  
    Send "{Alt up}"        ; 释放Alt键  
}  

^Space:: { ;唤起云打包  
    Send "!u"         ; Alt+f 打开「发行」菜单  
    Sleep 100         ; 等待菜单展开  
    Send "p"          ; 发送「云打包」的快捷键字母(具体根据菜单定义)  
    ; ControlFocus "App打包"  
    Sleep 300  
    MouseMove 132, 430, 0  
    Click  
    Send "123456{Tab}"  
    Send 123456  

    ; ios 相关输入  
    ; Sleep 500  
    ; MouseMove 128, 136  ;148105  
    ; Click  

    ; Sleep 300  
    ; MouseMove 145, 370, 0  
    ; Click  
    ; Send 123456  
}  

#HotIf
继续阅读 »

适用环境: window

工具: autohotkey;

网址: (https://www.autohotkey.com/)

比如有个非常脑残的设计 alt+鼠标左键跳转 而且无法修改这个快捷键, 这个不能忍,

只能借助外部工具实现 crlt+ 鼠标左键

下面是常用的几个快捷键分享:

  1. crlt+ 鼠标左键 : 跳转文件

  2. crlt+r : ios真机运行

  3. crlt+e: 安卓真机运行

  4. 输入l 回车/空格 : 直接输出console.log()

#Requires AutoHotkey v2.0  

; ^t::  
; {  
;     Send "My First Script"  
; }  
; ^t:: MsgBox "test"  

; OutputVar := InputBox("What is your first name?", "Question 1").Value  
; MsgBox "That's an awesome name, " OutputVar "."  

; ::yx::test@example.com  

GroupAdd "CODE", "ahk_exe Code.exe"    ;vscode环境  
GroupAdd "HB", "ahk_exe HBuilderX.exe" ;HB环境  

#HotIf WinActive("ahk_group CODE")  
; :*:l::console.log(){Left}  ; 直接触发了无需任何按键  
; :o:l::console.log(){Left}    ; o忽略后续输入触发的按键  

#HotIf  

#HotIf WinActive("ahk_group HB")  
^r:: Send "^r5"              ; 执行ios运行真机  
^e:: Send "^r4"              ; 执行andriod运行真机  
; :*:l::console.log(){Left}  ; 直接触发了无需任何按键  
:o:l::console.log(){Left}    ; o忽略后续输入触发的按键  

^LButton:: {  ; Ctrl+左键热键  
    SendPlay "{Ctrl Up}"  
    Sleep 100  
    Send "{Alt down}"      ; 持续按下Alt键 [6]()  
    Sleep 100              ; 等待100ms确保光标变成小手  
    Send "{Click Left}"          ; 模拟鼠标右键点击 [6]()  
    Sleep 100               ; 保持右键按下状态  
    Send "{Alt up}"        ; 释放Alt键  
}  

^Space:: { ;唤起云打包  
    Send "!u"         ; Alt+f 打开「发行」菜单  
    Sleep 100         ; 等待菜单展开  
    Send "p"          ; 发送「云打包」的快捷键字母(具体根据菜单定义)  
    ; ControlFocus "App打包"  
    Sleep 300  
    MouseMove 132, 430, 0  
    Click  
    Send "123456{Tab}"  
    Send 123456  

    ; ios 相关输入  
    ; Sleep 500  
    ; MouseMove 128, 136  ;148105  
    ; Click  

    ; Sleep 300  
    ; MouseMove 145, 370, 0  
    ; Click  
    ; Send 123456  
}  

#HotIf
收起阅读 »

editor无法被键盘顶起(app端解决方案,仍有部分机型有小问题)

uniapp editor

接手的项目碰到editor聚焦不被顶起的问题,在社区找到这个 #editor无法被键盘顶起
根据这个问题排查了一下,目前有以下几种情况:

  1. 在别的页面有输入框发生聚焦后,直接离开页面,editor每次聚焦都不会顶起
  2. 在别的页面有输入框发生聚焦失焦后,离开页面,editor第一次聚焦不会顶起

解决办法:

app端:在有editor组件的页面调用以下方法

我的editor组件所在页面往后跳转还有带有input框的页面,所以我将这一部分代码放在onShow里面

    let webview = this.$scope.$getAppWebview()  
    webview.setSoftinputTemporary({mode:'adjustResize'})// 这里mode传任意值/不传任何参数 都可以生效

但是仍有部分机型还会出现以下问题(如小米15):
在密码框失焦后,editor第一次获取焦点仍不会上推页面

继续阅读 »

接手的项目碰到editor聚焦不被顶起的问题,在社区找到这个 #editor无法被键盘顶起
根据这个问题排查了一下,目前有以下几种情况:

  1. 在别的页面有输入框发生聚焦后,直接离开页面,editor每次聚焦都不会顶起
  2. 在别的页面有输入框发生聚焦失焦后,离开页面,editor第一次聚焦不会顶起

解决办法:

app端:在有editor组件的页面调用以下方法

我的editor组件所在页面往后跳转还有带有input框的页面,所以我将这一部分代码放在onShow里面

    let webview = this.$scope.$getAppWebview()  
    webview.setSoftinputTemporary({mode:'adjustResize'})// 这里mode传任意值/不传任何参数 都可以生效

但是仍有部分机型还会出现以下问题(如小米15):
在密码框失焦后,editor第一次获取焦点仍不会上推页面

收起阅读 »

vue3 uni-popup拿不到ref的看过来

vue3

翻了半天的帖子,看到各种神人说原因,没一个说到点上的。
拿不到Ref的最重要原因是:你没有重启HBuilder和设置uni-popup的type
安装完uni-popup记得重启HBuilder和设置uni-popup的type属性就好了。

翻了半天的帖子,看到各种神人说原因,没一个说到点上的。
拿不到Ref的最重要原因是:你没有重启HBuilder和设置uni-popup的type
安装完uni-popup记得重启HBuilder和设置uni-popup的type属性就好了。

uni-admin后台 日期选择控件显示不全

bug反馈

uni-admin后台 日期选择控件显示不全 这个显眼的bug官方没测试???????

/uni_modules/uni-table/components/uni-th/filter-dropdown.vue

<uni-datetime-picker ref="datetimepicker" :value="dateRange" type="datetimerange" return-type="timestamp" @change="datetimechange" @maskClick="timepickerclose">
<view></view>
</uni-datetime-picker>

搞了半天 加个宽度好了

style="width: 580px;"

继续阅读 »

uni-admin后台 日期选择控件显示不全 这个显眼的bug官方没测试???????

/uni_modules/uni-table/components/uni-th/filter-dropdown.vue

<uni-datetime-picker ref="datetimepicker" :value="dateRange" type="datetimerange" return-type="timestamp" @change="datetimechange" @maskClick="timepickerclose">
<view></view>
</uni-datetime-picker>

搞了半天 加个宽度好了

style="width: 580px;"

收起阅读 »

使用uniapp打包的APP查询公钥的方法

uniapp

现在APP上架,不管是原生应用也好,uniapp开发的应用也好,上架前都需要备案。

而备案的时候的一个很重要的技术参数,就是APP的公钥、MD5值和SHA1值这些参数需要填写。

无论是公钥、MD5值还是SHA1值这些信息其实都是可以通过打包的证书查询。

但是网上很多使用命令将证书的公钥查出来的方法,或者是使用java代码将公钥查出来,都是不能用的,因为通过这些方法查出来的只是原始格式的公钥,base64格式的公钥。并不是上架需要填写的格式。

这里,可以使用香蕉云编来在线查询公钥的值,上传证书即可获取。

IOS的公钥的查询工具(包含MD5和sha1值、sha256值的查询):
https://www.yunedit.com/iosmd5

安卓公钥的查询工具:
https://www.yunedit.com/androidmd5

继续阅读 »

现在APP上架,不管是原生应用也好,uniapp开发的应用也好,上架前都需要备案。

而备案的时候的一个很重要的技术参数,就是APP的公钥、MD5值和SHA1值这些参数需要填写。

无论是公钥、MD5值还是SHA1值这些信息其实都是可以通过打包的证书查询。

但是网上很多使用命令将证书的公钥查出来的方法,或者是使用java代码将公钥查出来,都是不能用的,因为通过这些方法查出来的只是原始格式的公钥,base64格式的公钥。并不是上架需要填写的格式。

这里,可以使用香蕉云编来在线查询公钥的值,上传证书即可获取。

IOS的公钥的查询工具(包含MD5和sha1值、sha256值的查询):
https://www.yunedit.com/iosmd5

安卓公钥的查询工具:
https://www.yunedit.com/androidmd5

收起阅读 »

大佬们,云控件如何初始化

我现在控制台一直报at process.processTicksAndRejections (node:internal/process/task_queues:95:5),也登录不上admin项目

我现在控制台一直报at process.processTicksAndRejections (node:internal/process/task_queues:95:5),也登录不上admin项目