HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

引入uniapp项目写的H5页面 uni.postMessage 无法使用

uni.postMessage

在uniapp 项目中 引入使用uniapp开发打包部署成的H5页面
按照官方文档
引入https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js脚本
后会存在冲突,导致uni.postMessage 无法使用
本人踩坑后修改其源码解决了此冲突, 制作成npm 包,直接安装使用即可

安装: npm i y_uniwebview
引入: import y_uni from "y_uniwebview"

使用:y_uni.postMessage()

继续阅读 »

在uniapp 项目中 引入使用uniapp开发打包部署成的H5页面
按照官方文档
引入https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js脚本
后会存在冲突,导致uni.postMessage 无法使用
本人踩坑后修改其源码解决了此冲突, 制作成npm 包,直接安装使用即可

安装: npm i y_uniwebview
引入: import y_uni from "y_uniwebview"

使用:y_uni.postMessage()

收起阅读 »

uni可用的new URL(),直接获取url中的参数等信息

插件传送门 uni可用的new URL()

// 从自己所放到路径引入,检查路径和文件名是否正确,错误请自己修改  
import URL from '@/js_sdk/cainiao-url/url.js'  

const url = new URL('https://www.aaa.com:8989/bbb/ccc/ddd.html?e=1&f=2&g#h=3&i=4&j?k=5#l=6&e=4')  

console.log(url)
{  
  "href": "https://www.aaa.com:8989/bbb/ccc/ddd.html?e=1&f=2&g#h=3&i=4&j?k=5#l=6&e=4",  
  "origin": "https://www.aaa.com",  
  "protocol": "https:",  
  "host": "www.aaa.com",  
  "port": "8989",  
  "pathname": "/bbb/ccc/ddd.html",  
  "search": "?e=1&f=2&g&k=5",  
  "hash": "#h=3&i=4&j&l=6&e=4",  
  "params": {  
    "h": "3",  
    "i": "4",  
    "l": "6",  
    "e": "1",  
    "f": "2",  
    "k": "5"  
  }  
}
继续阅读 »

插件传送门 uni可用的new URL()

// 从自己所放到路径引入,检查路径和文件名是否正确,错误请自己修改  
import URL from '@/js_sdk/cainiao-url/url.js'  

const url = new URL('https://www.aaa.com:8989/bbb/ccc/ddd.html?e=1&f=2&g#h=3&i=4&j?k=5#l=6&e=4')  

console.log(url)
{  
  "href": "https://www.aaa.com:8989/bbb/ccc/ddd.html?e=1&f=2&g#h=3&i=4&j?k=5#l=6&e=4",  
  "origin": "https://www.aaa.com",  
  "protocol": "https:",  
  "host": "www.aaa.com",  
  "port": "8989",  
  "pathname": "/bbb/ccc/ddd.html",  
  "search": "?e=1&f=2&g&k=5",  
  "hash": "#h=3&i=4&j&l=6&e=4",  
  "params": {  
    "h": "3",  
    "i": "4",  
    "l": "6",  
    "e": "1",  
    "f": "2",  
    "k": "5"  
  }  
}
收起阅读 »

新版 3.8.7 插件下载 网络失败的问题

网络

日志为
http request QUrl("http://update.liuyingyong.cn/hbuilderx/upgrade_repositories/3.8.7.20230703/win32/plugins/index.json?tmp=16312") : connect to server timeout
2023-09-13 10:36:16.084 [WARNING:] http request QUrl("http://update.liuyingyong.cn/hbuilderx/alpha/win32/update/index.json?tmp=38166091") : connect to server timeout
解决方案:开VPN下

继续阅读 »

日志为
http request QUrl("http://update.liuyingyong.cn/hbuilderx/upgrade_repositories/3.8.7.20230703/win32/plugins/index.json?tmp=16312") : connect to server timeout
2023-09-13 10:36:16.084 [WARNING:] http request QUrl("http://update.liuyingyong.cn/hbuilderx/alpha/win32/update/index.json?tmp=38166091") : connect to server timeout
解决方案:开VPN下

收起阅读 »

在 uniapp 中使用 unplugin-vue-components 编译成小程序代码后异常缺失 js 文件

自动导入配置
我在 vite.config.ts 中配置了自动生成类型声明的组件后,代码可以实现类型提示高亮
高亮
但在小程序中会出现以下报错:[ app.json 文件内容错误] app.json: 未找到 ["pages"][0] 对应的 pages/index/index.js 文件(env: macOS,mp,1.06.2307260; lib: 3.0.2)
小程序报错
我寻找到 dist/dev/mp-weixin/pages/index/index 中发现编译后并没有生成 index.js 文件导致的
异常编译
当我尝试注释掉 vite.config.js 中的配置后就是正常的,如下图
正常编译

在此向询问一下有遇到过该问题的大佬是如何解决,或者是否有更好的办法来实现自动导入组件后 自动生成组件的类型声明,感谢!

继续阅读 »

自动导入配置
我在 vite.config.ts 中配置了自动生成类型声明的组件后,代码可以实现类型提示高亮
高亮
但在小程序中会出现以下报错:[ app.json 文件内容错误] app.json: 未找到 ["pages"][0] 对应的 pages/index/index.js 文件(env: macOS,mp,1.06.2307260; lib: 3.0.2)
小程序报错
我寻找到 dist/dev/mp-weixin/pages/index/index 中发现编译后并没有生成 index.js 文件导致的
异常编译
当我尝试注释掉 vite.config.js 中的配置后就是正常的,如下图
正常编译

在此向询问一下有遇到过该问题的大佬是如何解决,或者是否有更好的办法来实现自动导入组件后 自动生成组件的类型声明,感谢!

收起阅读 »

uni-app中 使用echarts 使用dataZoom 时无法拖动

uniapp

今天使用Echarts时,公司有需求,数据多的时候可以横向滑动,找到相关案列,使用正常,但是复制代码到uniapp里面之后,无法滑动。

然后找了很久的答案,终于解决了。

在main.js里面把下面这串代码加入,即可解决问题。

继续阅读 »

今天使用Echarts时,公司有需求,数据多的时候可以横向滑动,找到相关案列,使用正常,但是复制代码到uniapp里面之后,无法滑动。

然后找了很久的答案,终于解决了。

在main.js里面把下面这串代码加入,即可解决问题。

收起阅读 »

来来来,给你们看看云端打包的速度

[HBuilder] 11:03:55.857 项目 xxxx的打包状态:
[HBuilder] 11:03:55.857 时间: 2023-09-12 10:41:20 类型: Android云端证书 正在云端打包
[HBuilder] 11:03:55.857 预计2-5分钟完成打包。如项目使用了App原生插件,打包时间可能会较长,请耐心等待。

[HBuilder] 11:04:53.821 项目 xxxx的打包状态:
[HBuilder] 11:04:53.821 时间: 2023-09-12 10:41:20 类型: Android云端证书 正在云端打包
[HBuilder] 11:04:53.821 预计2-5分钟完成打包。如项目使用了App原生插件,打包时间可能会较长,请耐心等待。

[HBuilder] 11:05:53.630 项目 xxxx的打包状态:
[HBuilder] 11:05:53.630 时间: 2023-09-12 10:41:20 类型: Android云端证书 正在云端打包
[HBuilder] 11:05:53.630 预计2-5分钟完成打包。如项目使用了App原生插件,打包时间可能会较长,请耐心等待。

这种速度真垃圾
首先声明,我这应用里面不包含原生插件,不包含第三方东西
这速度,吃屎估计都赶不上热乎的吧

继续阅读 »

[HBuilder] 11:03:55.857 项目 xxxx的打包状态:
[HBuilder] 11:03:55.857 时间: 2023-09-12 10:41:20 类型: Android云端证书 正在云端打包
[HBuilder] 11:03:55.857 预计2-5分钟完成打包。如项目使用了App原生插件,打包时间可能会较长,请耐心等待。

[HBuilder] 11:04:53.821 项目 xxxx的打包状态:
[HBuilder] 11:04:53.821 时间: 2023-09-12 10:41:20 类型: Android云端证书 正在云端打包
[HBuilder] 11:04:53.821 预计2-5分钟完成打包。如项目使用了App原生插件,打包时间可能会较长,请耐心等待。

[HBuilder] 11:05:53.630 项目 xxxx的打包状态:
[HBuilder] 11:05:53.630 时间: 2023-09-12 10:41:20 类型: Android云端证书 正在云端打包
[HBuilder] 11:05:53.630 预计2-5分钟完成打包。如项目使用了App原生插件,打包时间可能会较长,请耐心等待。

这种速度真垃圾
首先声明,我这应用里面不包含原生插件,不包含第三方东西
这速度,吃屎估计都赶不上热乎的吧

收起阅读 »

app启动图

storyboard

1.安卓用android studio工具,就是不太好画,对图形内容有要求;

2.ios用Xcode做,Xcode下面有个预览,可以看看在各个手机的展示效果,就可以看到了。

1.安卓用android studio工具,就是不太好画,对图形内容有要求;

2.ios用Xcode做,Xcode下面有个预览,可以看看在各个手机的展示效果,就可以看到了。

小程序分包显示不出来的原因!—— 竟然如此简单?

bug提交 bug反馈 微信小程序 uni_app 分包

长话短说,偶然发现uni-app文档中分包的内容与小程序的内容不一样

具体如下:

该图 为uni-app开发文档中的

注意:"subPackages" 中的P为大写

下面这张图为 微信小程序开发文档中的

注意:"subpackages" 中的p为小写

如果没仔细看文档的话 可能会找半天bug...

因为一个字母大小写的原因导致 分包没有显示出来!!!

继续阅读 »

长话短说,偶然发现uni-app文档中分包的内容与小程序的内容不一样

具体如下:

该图 为uni-app开发文档中的

注意:"subPackages" 中的P为大写

下面这张图为 微信小程序开发文档中的

注意:"subpackages" 中的p为小写

如果没仔细看文档的话 可能会找半天bug...

因为一个字母大小写的原因导致 分包没有显示出来!!!

收起阅读 »

【经验分享】HX 源代码格式化用法

经验分享 格式化 HBuilderX技巧

作为一枚强迫症程序员,如果源代码格式不能精细控制,那是不可接受的。

HBuilderX 是一款功能强大的 IDE 工具,它提供了多种途径用于对源代码格式进行控制,但要完全驾驭它还需要一些经验。
我这里把个人摸索的结果做个小结,希望有人能觉得有用。

主要考虑的文件类型:

  • .js
  • .css
  • .vue

主要考虑的格式:

  • 缩进用空格而不是 tab
  • 缩进 2 个空格

HX 中编辑代码时,有几处设置可以控制格式风格,优先级从低到高:

  1. 主菜单【重排代码格式】,实际采用的是 %AppData%\Roaming\HBuilder X\extensions\format\jsbeautifyrc.js
  2. 主菜单【编辑-缩进】里面设置
  3. 项目中的 .jsbeautifyrc 配置文件
  4. 项目中的 .eslintrc.js 配置文件(需安装 eslint-js 和 eslint-plugin-vue 插件)

其中 1/2/3 是在 HX 里【重排代码格式】时起作用,4 是在保存文件时自动触发(如果开启了的话)。

考虑到格式风格的选择与项目相关,所以最好是在项目的根目录下放置 .jsbeautifyrc.eslintrc.js 配置文件。

下面的配置文件可以解决大部分问题:

// .jsbeautifyrc  
{  
  "js": {  
    "indent_size": 2,  
    "indent_char": " ",  
    "indent_with_tabs": false,  
    "jslint_happy": true  
  },  
  "css": {  
    "indent_size": 2,  
    "indent_char": " ",  
    "indent_with_tabs": false  
  }  
}
// .eslintrc.js  
module.exports = {  
  "extends": "plugin:vue/vue3-recommended",  
  "rules":{  
    'vue/html-indent': ['error', 2, {  
      baseIndent: 0  
    }],  
    'vue/first-attribute-linebreak': ['error', {  
      singleline: 'ignore',  
      multiline: 'below'  
    }],  
    'vue/max-attributes-per-line': ['error', {  
      singleline: 3,  
      multiline: 1  
    }],  
    'vue/script-indent': ['error', 2, {  
      baseIndent: 0  
    }],  
    'no-trailing-spaces': 'error',  
    'no-multi-spaces': 'error',  
    'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],  
    'no-tabs': 'error',  
    'indent': ['error', 2],  
  }  
}

注意事项

在 HX 的编辑器中打开 .js 文件时,如果进行【重排代码格式】操作,是 jsbeautify 在起作用,而在保存时的自动重排,是 eslint-js 插件在起作用。

如果两者的格式设置冲突的话,后者会最终胜出,但操作过程会比较困惑。

所以应尽量设置成保持一致,且一般不用【重排代码格式】,不过有些混乱的代码可能需要先用【重排代码格式】来整理一下效果会更好。

继续阅读 »

作为一枚强迫症程序员,如果源代码格式不能精细控制,那是不可接受的。

HBuilderX 是一款功能强大的 IDE 工具,它提供了多种途径用于对源代码格式进行控制,但要完全驾驭它还需要一些经验。
我这里把个人摸索的结果做个小结,希望有人能觉得有用。

主要考虑的文件类型:

  • .js
  • .css
  • .vue

主要考虑的格式:

  • 缩进用空格而不是 tab
  • 缩进 2 个空格

HX 中编辑代码时,有几处设置可以控制格式风格,优先级从低到高:

  1. 主菜单【重排代码格式】,实际采用的是 %AppData%\Roaming\HBuilder X\extensions\format\jsbeautifyrc.js
  2. 主菜单【编辑-缩进】里面设置
  3. 项目中的 .jsbeautifyrc 配置文件
  4. 项目中的 .eslintrc.js 配置文件(需安装 eslint-js 和 eslint-plugin-vue 插件)

其中 1/2/3 是在 HX 里【重排代码格式】时起作用,4 是在保存文件时自动触发(如果开启了的话)。

考虑到格式风格的选择与项目相关,所以最好是在项目的根目录下放置 .jsbeautifyrc.eslintrc.js 配置文件。

下面的配置文件可以解决大部分问题:

// .jsbeautifyrc  
{  
  "js": {  
    "indent_size": 2,  
    "indent_char": " ",  
    "indent_with_tabs": false,  
    "jslint_happy": true  
  },  
  "css": {  
    "indent_size": 2,  
    "indent_char": " ",  
    "indent_with_tabs": false  
  }  
}
// .eslintrc.js  
module.exports = {  
  "extends": "plugin:vue/vue3-recommended",  
  "rules":{  
    'vue/html-indent': ['error', 2, {  
      baseIndent: 0  
    }],  
    'vue/first-attribute-linebreak': ['error', {  
      singleline: 'ignore',  
      multiline: 'below'  
    }],  
    'vue/max-attributes-per-line': ['error', {  
      singleline: 3,  
      multiline: 1  
    }],  
    'vue/script-indent': ['error', 2, {  
      baseIndent: 0  
    }],  
    'no-trailing-spaces': 'error',  
    'no-multi-spaces': 'error',  
    'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],  
    'no-tabs': 'error',  
    'indent': ['error', 2],  
  }  
}

注意事项

在 HX 的编辑器中打开 .js 文件时,如果进行【重排代码格式】操作,是 jsbeautify 在起作用,而在保存时的自动重排,是 eslint-js 插件在起作用。

如果两者的格式设置冲突的话,后者会最终胜出,但操作过程会比较困惑。

所以应尽量设置成保持一致,且一般不用【重排代码格式】,不过有些混乱的代码可能需要先用【重排代码格式】来整理一下效果会更好。

收起阅读 »

h5腾讯地图 选点下方加载不出来 可能的原因

地图

如果使用的key是你的第二个项目,需要手动分配额度,否则就会超额,因为额度默认都在第一个key上,出现地图选点下方内容空白的原因!

如果使用的key是你的第二个项目,需要手动分配额度,否则就会超额,因为额度默认都在第一个key上,出现地图选点下方内容空白的原因!

APP 备案公钥、签名 MD5获取方法。

签名

一、IOS 系统获取 Bundle ID、平台公钥、签名 MD5 值的指引

  1. 获取 Bundle ID:使用 APP 对应的 IOS 开发者账号登录 Developer 控制台,找到下图标识符(英文),单击进入 Certificates,Identifiers&Profiles 页面。

  1. 在 Certificates,Identifiers&Profiles 页面,单击 Identifiers,其中 IDENTIFIER 列对应的就是 Bundle ID。如下图所示:

  1. 获取公钥与签名 SHA1 值:在计划资源中,单击证书(英文),进入 Certificates 页面。

  1. 在 Certificates 页面,可查看证书详情,并下载 APP 对应的证书。

  1. 通过查看证书详细信息,可获取公钥和签名 SHA1 值。IOS 的 APP 公钥,如下图所示:

若公共密钥未完整显示,可以先单击省略号,如果仍然未能完整显示出来,请复制省略号前面显示出的数据进行填写。

  1. IOS 的 APP签名 MD5 值(SHA-1),如下图所示:

二、安卓系统获取包名、平台公钥、签名 MD5 值的指引

Windows 平台

公钥和 MD5 值可以通过安卓开发工具、Keytool、Jadx-GUI 等多种工具获取,本文以 jadx-gui 为例。

  1. 下载 jadx-gui 工具 ,点击此处 下载 jadx-gui 工具。

  1. 下载完成后,解压压缩包,双击 jadx-gui-1.4.7.exe 运行。

  1. 运行后,在页面左上方单击文件 > 打开文件,打开 APK 包。

  1. 打开 APK 包后,找到并单击 AndroidManifest.xml,查看 APP 包名。

  1. 打开 APK 包后,找到并单击 APK signature,查看平台公钥和签名 MD5 值。

macOS 平台

  1. 打开终端,运行如下命令安装 jadx。
    brew install jadx
  2. 安装完成后,在终端运行如下命令打开 jadx。
    jadx-gui
  3. 运行后,单击Open file,打开 APK 包。

  1. 打开 APK 包后,找到并单击 Resources,找到并单击 AndroidManifest.xml,查看 APP 包名。

  1. 打开 APK 包后,找到并单击 APK signature,查看平台公钥和签名 MD5 值。

来自腾讯云备案《APP 特征信息填写参考规范》

继续阅读 »

一、IOS 系统获取 Bundle ID、平台公钥、签名 MD5 值的指引

  1. 获取 Bundle ID:使用 APP 对应的 IOS 开发者账号登录 Developer 控制台,找到下图标识符(英文),单击进入 Certificates,Identifiers&Profiles 页面。

  1. 在 Certificates,Identifiers&Profiles 页面,单击 Identifiers,其中 IDENTIFIER 列对应的就是 Bundle ID。如下图所示:

  1. 获取公钥与签名 SHA1 值:在计划资源中,单击证书(英文),进入 Certificates 页面。

  1. 在 Certificates 页面,可查看证书详情,并下载 APP 对应的证书。

  1. 通过查看证书详细信息,可获取公钥和签名 SHA1 值。IOS 的 APP 公钥,如下图所示:

若公共密钥未完整显示,可以先单击省略号,如果仍然未能完整显示出来,请复制省略号前面显示出的数据进行填写。

  1. IOS 的 APP签名 MD5 值(SHA-1),如下图所示:

二、安卓系统获取包名、平台公钥、签名 MD5 值的指引

Windows 平台

公钥和 MD5 值可以通过安卓开发工具、Keytool、Jadx-GUI 等多种工具获取,本文以 jadx-gui 为例。

  1. 下载 jadx-gui 工具 ,点击此处 下载 jadx-gui 工具。

  1. 下载完成后,解压压缩包,双击 jadx-gui-1.4.7.exe 运行。

  1. 运行后,在页面左上方单击文件 > 打开文件,打开 APK 包。

  1. 打开 APK 包后,找到并单击 AndroidManifest.xml,查看 APP 包名。

  1. 打开 APK 包后,找到并单击 APK signature,查看平台公钥和签名 MD5 值。

macOS 平台

  1. 打开终端,运行如下命令安装 jadx。
    brew install jadx
  2. 安装完成后,在终端运行如下命令打开 jadx。
    jadx-gui
  3. 运行后,单击Open file,打开 APK 包。

  1. 打开 APK 包后,找到并单击 Resources,找到并单击 AndroidManifest.xml,查看 APP 包名。

  1. 打开 APK 包后,找到并单击 APK signature,查看平台公钥和签名 MD5 值。

来自腾讯云备案《APP 特征信息填写参考规范》

收起阅读 »