HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

reportJSException >>>> instanceId:1, exception function:dc_checkappkey, exception: 解决经验

自定义基座 安卓

参考https://nativesupport.dcloud.net.cn/AppDocs/usesdk/appkey.html,确认appid+应用包名+签名sha1三者必须与申请填写的信息一致

我的是AS中打自定义基座,放到HB中。运行报错:reportJSException >>>> instanceId:1, exception function:dc_checkappkey, exception:

我的原因是有两个appid文件夹,就是\app\src\main\assets\apps下有两个文件夹(因为有两个不同的appid但是都是一套代码,想省事,没移除另一个)。需要在\app\src\main\assets\apps中保持且只能有一个文件夹__UNI__xxxxx

另,AS中打包自定义基座要把debug-server-release.aar添加到lib中,参考https://ask.dcloud.net.cn/article/35482

继续阅读 »

参考https://nativesupport.dcloud.net.cn/AppDocs/usesdk/appkey.html,确认appid+应用包名+签名sha1三者必须与申请填写的信息一致

我的是AS中打自定义基座,放到HB中。运行报错:reportJSException >>>> instanceId:1, exception function:dc_checkappkey, exception:

我的原因是有两个appid文件夹,就是\app\src\main\assets\apps下有两个文件夹(因为有两个不同的appid但是都是一套代码,想省事,没移除另一个)。需要在\app\src\main\assets\apps中保持且只能有一个文件夹__UNI__xxxxx

另,AS中打包自定义基座要把debug-server-release.aar添加到lib中,参考https://ask.dcloud.net.cn/article/35482

收起阅读 »

关于uniapp升级vue3项目后renderjs使用报错的一些个人经验

在写下这篇经验之前我的项目都是基于vue2的,这个过程中使用renderjs也没有报什么错;直到我在uniapp使用 vue3项目并将之前的项目迁移过来的时候;就发生了一堆魔幻的事情;当然大部分都在可控的范围内;但是其中有个别组件内部使用了 renderjs的文件就没那么幸运了,一直报什么找不到我定义的renderjs模块,
<span style="color:red;">uniapp-view-umd.js 巴拉巴拉的</span>
他只是给你提示这个错误的话,你是根本玩不转的,因为你只知道 这个错,但是根本就没有给你定位到具体的文件地方;起初我在想是不是在uniapp里面使用vue3是不对的;基于这个猜想我单独弄了一个demo也是vue3的,在里面写了一个组件;简单的使用了 renderjs来进行逻辑层和视图层之间的通信;发现是可以走的通的;那么就说明在uniapp使用vue3项目是可以正常使用renderjs的,那么这下问题排查就只能是代码写法和语法报错上去查找了;

然而找了一圈我发现自己写的代码没有问题;那么我在一想是不是第三方包的问题;果不其然我在控制台看到了一个错误;说是什么<span style="color:red">process is underined</span> 我的vue3是基于vite搭建的,默认 是不支持这个process的;所以报错;那么我在vite.config.js里面define里面定义了一下 ;具体定义方法可以在网上查找了一下;不过我是直接找到了最新下载的插件,直接把里面的判断给关掉了;不用procee去判断;此时再去运行项目发现就不再报错;

还有一点值得提的就是,如果在使用renderjs的组件内部有时候引用的插件也会导致这个错误;所以需要大家在使用rendrjs的地方一个注释引用的插件的方式去排查;

继续阅读 »

在写下这篇经验之前我的项目都是基于vue2的,这个过程中使用renderjs也没有报什么错;直到我在uniapp使用 vue3项目并将之前的项目迁移过来的时候;就发生了一堆魔幻的事情;当然大部分都在可控的范围内;但是其中有个别组件内部使用了 renderjs的文件就没那么幸运了,一直报什么找不到我定义的renderjs模块,
<span style="color:red;">uniapp-view-umd.js 巴拉巴拉的</span>
他只是给你提示这个错误的话,你是根本玩不转的,因为你只知道 这个错,但是根本就没有给你定位到具体的文件地方;起初我在想是不是在uniapp里面使用vue3是不对的;基于这个猜想我单独弄了一个demo也是vue3的,在里面写了一个组件;简单的使用了 renderjs来进行逻辑层和视图层之间的通信;发现是可以走的通的;那么就说明在uniapp使用vue3项目是可以正常使用renderjs的,那么这下问题排查就只能是代码写法和语法报错上去查找了;

然而找了一圈我发现自己写的代码没有问题;那么我在一想是不是第三方包的问题;果不其然我在控制台看到了一个错误;说是什么<span style="color:red">process is underined</span> 我的vue3是基于vite搭建的,默认 是不支持这个process的;所以报错;那么我在vite.config.js里面define里面定义了一下 ;具体定义方法可以在网上查找了一下;不过我是直接找到了最新下载的插件,直接把里面的判断给关掉了;不用procee去判断;此时再去运行项目发现就不再报错;

还有一点值得提的就是,如果在使用renderjs的组件内部有时候引用的插件也会导致这个错误;所以需要大家在使用rendrjs的地方一个注释引用的插件的方式去排查;

收起阅读 »

#插件需求# 建议组件实现一个类似android compose的ui组件

ui框架

建议组件实现一个类似android compose的ui组件

建议组件实现一个类似android compose的ui组件

购买的插件默认给出的包名是错误的,和实际打包的包名不一致,怎么更换

uniapp插件

购买的插件默认给出的包名是错误的,和实际打包的包名不一致,怎么更换?

购买的插件默认给出的包名是错误的,和实际打包的包名不一致,怎么更换?

vue3.5+tauri2.0+arco桌面版OS系统|vite6.0+tauri2仿macos/windows桌面

vite vue3

经过了三周的爆肝研发,我的又一款原创跨平台重磅新作tauri2.1+vite6+vue3 setup+pinia2+arco.design桌面客户端OS管理系统Tauri2Vue3OS,正式宣告完结了。支持macoswindows两种桌面风格。

Tauri2.0-Vue3-MacOS桌面端os平台|tauri2+vite6.0+arco电脑版OS管理系统

img

img

vue3-tauri2-os系统提供macos和windows11桌面风格、自研拖拽式栅格桌面引擎、封装tauri2多窗口管理、自定义json配置桌面/Dock菜单。

img

img

实现技术

  • 技术框架:vite^6.0.3+vue^3.5.13+vue-router^4.5.0
  • 跨平台框架:tauri^2.1.1
  • 组件库:@arco-design/web-vue^2.56.3 (字节桌面版vue3组件库)
  • 状态管理:pinia^2.3.0
  • 拖拽插件:sortablejs^1.15.6
  • 滑屏组件:swiper^11.1.15
  • 图表组件:echarts^5.5.1
  • markdown编辑器:md-editor-v3^5.1.1
  • 模拟数据:mockjs^1.1.0

img

img

tauri2.0-vue3os已经正式发布到我的原创作品集,感兴趣的可以去看看。

https://gf.bilibili.com/item/detail/1107621011

项目框架目录结构

使用最新版tauri2.0跨平台框架技术,整合vite6构建工具。
img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

tauri2.0-vue3os布局模板

img

<script setup>  
  import { appState } from '@/pinia/modules/app'  

  // 引入布局模板  
  import MacosLayout from './template/macos.vue'  
  import WindowsLayout from './template/windows.vue'  

  const appstate = appState()  

  const DeskLayout = {  
    macos: MacosLayout,  
    windows: WindowsLayout  
  }  
</script>  

<template>  
  <div class="vu__container flexbox" :style="{'--themeSkin': appstate.config.skin}">  
    <component :is="DeskLayout[appstate.config.layout]" />  
  </div>  
</template>

img

img

<script setup>  
  import { appState } from '@/pinia/modules/app'  

  import Titlebar from '@/layouts/components/titlebar/index.vue'  
  import Desk from '@/layouts/components/mac/desk.vue'  
  import Dock from '@/layouts/components/mac/dock.vue'  

  const appstate = appState()  
</script>  

<template>  
  <div class="vu__layout flexbox flex-col">  
    <div class="vu__layout-header">  
      <Titlebar />  
    </div>  
    <div class="vu__layout-body flex1 flexbox">  
      <Desk />  
    </div>  
    <div class="vu__layout-footer">  
      <Dock v-if="appstate.config.dockEnable" />  
    </div>  
  </div>  
</template>

tauri2+vue3栅格布局

img

img

栅格桌面菜单支持如下参数配置:

/**  
 * label 图标标题  
 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标  
 * path 跳转路由页面  
 * link 跳转外部链接  
 * hideLabel 是否隐藏图标标题  
 * filter 是否禁用拖拽  
 * background 自定义图标背景色  
 * color 自定义图标颜色  
 * size 栅格磁贴布局 1x1 ... 12x12  
 * padding 内边距  
 * onClick 点击图标回调函数  
 * isNewin 新窗口打开路由页面  
 * children 二级菜单  
 */

支持children配置二级菜单。
img

img

img

tauri2.0+vue3自定义底部Dock菜单

img

Dock菜单配置参数:

/**  
 * label 图标tooltip提示  
 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标  
 * path 跳转路由页面  
 * link 跳转外部链接  
 * filter 是否禁用拖拽  
 * color 自定义图标颜色  
 * onClick 点击图标回调函数  
 * isNewin 新窗口打开路由页面  
 * children 二级菜单  
 */

另外系统托盘采用tauri2+vue3自定义弹窗实现系统托盘右键功能。
img

OK,综上就是Tauri2.0+Vue3+Arco实战桌面端os管理系统的一些知识分享。

作者:xiaoyan2017
链接: https://segmentfault.com/a/1190000045667190
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

继续阅读 »

经过了三周的爆肝研发,我的又一款原创跨平台重磅新作tauri2.1+vite6+vue3 setup+pinia2+arco.design桌面客户端OS管理系统Tauri2Vue3OS,正式宣告完结了。支持macoswindows两种桌面风格。

Tauri2.0-Vue3-MacOS桌面端os平台|tauri2+vite6.0+arco电脑版OS管理系统

img

img

vue3-tauri2-os系统提供macos和windows11桌面风格、自研拖拽式栅格桌面引擎、封装tauri2多窗口管理、自定义json配置桌面/Dock菜单。

img

img

实现技术

  • 技术框架:vite^6.0.3+vue^3.5.13+vue-router^4.5.0
  • 跨平台框架:tauri^2.1.1
  • 组件库:@arco-design/web-vue^2.56.3 (字节桌面版vue3组件库)
  • 状态管理:pinia^2.3.0
  • 拖拽插件:sortablejs^1.15.6
  • 滑屏组件:swiper^11.1.15
  • 图表组件:echarts^5.5.1
  • markdown编辑器:md-editor-v3^5.1.1
  • 模拟数据:mockjs^1.1.0

img

img

tauri2.0-vue3os已经正式发布到我的原创作品集,感兴趣的可以去看看。

https://gf.bilibili.com/item/detail/1107621011

项目框架目录结构

使用最新版tauri2.0跨平台框架技术,整合vite6构建工具。
img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

tauri2.0-vue3os布局模板

img

<script setup>  
  import { appState } from '@/pinia/modules/app'  

  // 引入布局模板  
  import MacosLayout from './template/macos.vue'  
  import WindowsLayout from './template/windows.vue'  

  const appstate = appState()  

  const DeskLayout = {  
    macos: MacosLayout,  
    windows: WindowsLayout  
  }  
</script>  

<template>  
  <div class="vu__container flexbox" :style="{'--themeSkin': appstate.config.skin}">  
    <component :is="DeskLayout[appstate.config.layout]" />  
  </div>  
</template>

img

img

<script setup>  
  import { appState } from '@/pinia/modules/app'  

  import Titlebar from '@/layouts/components/titlebar/index.vue'  
  import Desk from '@/layouts/components/mac/desk.vue'  
  import Dock from '@/layouts/components/mac/dock.vue'  

  const appstate = appState()  
</script>  

<template>  
  <div class="vu__layout flexbox flex-col">  
    <div class="vu__layout-header">  
      <Titlebar />  
    </div>  
    <div class="vu__layout-body flex1 flexbox">  
      <Desk />  
    </div>  
    <div class="vu__layout-footer">  
      <Dock v-if="appstate.config.dockEnable" />  
    </div>  
  </div>  
</template>

tauri2+vue3栅格布局

img

img

栅格桌面菜单支持如下参数配置:

/**  
 * label 图标标题  
 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标  
 * path 跳转路由页面  
 * link 跳转外部链接  
 * hideLabel 是否隐藏图标标题  
 * filter 是否禁用拖拽  
 * background 自定义图标背景色  
 * color 自定义图标颜色  
 * size 栅格磁贴布局 1x1 ... 12x12  
 * padding 内边距  
 * onClick 点击图标回调函数  
 * isNewin 新窗口打开路由页面  
 * children 二级菜单  
 */

支持children配置二级菜单。
img

img

img

tauri2.0+vue3自定义底部Dock菜单

img

Dock菜单配置参数:

/**  
 * label 图标tooltip提示  
 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标  
 * path 跳转路由页面  
 * link 跳转外部链接  
 * filter 是否禁用拖拽  
 * color 自定义图标颜色  
 * onClick 点击图标回调函数  
 * isNewin 新窗口打开路由页面  
 * children 二级菜单  
 */

另外系统托盘采用tauri2+vue3自定义弹窗实现系统托盘右键功能。
img

OK,综上就是Tauri2.0+Vue3+Arco实战桌面端os管理系统的一些知识分享。

作者:xiaoyan2017
链接: https://segmentfault.com/a/1190000045667190
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

收起阅读 »

分享一款自研的图片存储APP,有建议可互相交流

app分享

PHPDisk MyFile 外链存储分享系统 是一套针对网站资源,如音视频、图片、文档,压缩包等一切的信息化资源进行管理的基础系统

适用于网店电商,跨境电商(外贸),音频,长短视频,婚纱照片,建筑图片,广告图片等场合的文件存储外链分享解决方案。

如果经营数个网店或数个网站,可以用一个私有平台管理你N个网站上的文件资源,实现资源统一管理,资源重复使用。

网站存储系统:
http://demo.phpdisk.com/mf/

APP截图:

扫码可以下载APP测试一下(未上架应用中心):

继续阅读 »

PHPDisk MyFile 外链存储分享系统 是一套针对网站资源,如音视频、图片、文档,压缩包等一切的信息化资源进行管理的基础系统

适用于网店电商,跨境电商(外贸),音频,长短视频,婚纱照片,建筑图片,广告图片等场合的文件存储外链分享解决方案。

如果经营数个网店或数个网站,可以用一个私有平台管理你N个网站上的文件资源,实现资源统一管理,资源重复使用。

网站存储系统:
http://demo.phpdisk.com/mf/

APP截图:

扫码可以下载APP测试一下(未上架应用中心):

收起阅读 »

编辑器什么时间被现在的ai编程支持啊

编辑器什么时间被现在的ai编程支持啊!现在感觉不支持就快淘汰的感觉了!

编辑器什么时间被现在的ai编程支持啊!现在感觉不支持就快淘汰的感觉了!

uniapp的h5端实现动态设置页面的下拉刷新是否开启

首先定义个方法

// enable 是否可以下拉刷新  
tooglePullDownRefresh(enable) {  
    const page = getCurrentPages().at(-1)  
    // 当且仅当在pages里初始化设置了下拉刷新时才生效  
    if (!page.$page.meta.pullToRefresh.support) return  
    page.$page.meta.enablePullDownRefresh = enable        
}

然后就实现了,但是会出现禁用之后再开启不会出现下拉动效,这就需要去修改 hbuilderx安装路径\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-h5\dist\uni-h5.es.js中,搜索到usePageRefresh方法之后,在此方法中的onMounted hooks的后面加上

watch(  
      () => pageMeta.enablePullDownRefresh,  
      (enablePullDownRefresh) => {  
        enablePullDownRefresh && nextTick(initElement);  
      }  
  );

如图

然后在需要禁用和开启的页面调用tooglePullDownRefresh(false|true)来开启或关闭就可实现在h5上开启或关闭下拉刷新了!当然,如果官方能给个方法那就更好了

继续阅读 »

首先定义个方法

// enable 是否可以下拉刷新  
tooglePullDownRefresh(enable) {  
    const page = getCurrentPages().at(-1)  
    // 当且仅当在pages里初始化设置了下拉刷新时才生效  
    if (!page.$page.meta.pullToRefresh.support) return  
    page.$page.meta.enablePullDownRefresh = enable        
}

然后就实现了,但是会出现禁用之后再开启不会出现下拉动效,这就需要去修改 hbuilderx安装路径\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-h5\dist\uni-h5.es.js中,搜索到usePageRefresh方法之后,在此方法中的onMounted hooks的后面加上

watch(  
      () => pageMeta.enablePullDownRefresh,  
      (enablePullDownRefresh) => {  
        enablePullDownRefresh && nextTick(initElement);  
      }  
  );

如图

然后在需要禁用和开启的页面调用tooglePullDownRefresh(false|true)来开启或关闭就可实现在h5上开启或关闭下拉刷新了!当然,如果官方能给个方法那就更好了

收起阅读 »

使用高德地图,转跳页面滚动后报错:Error: Invalid Object: Pixel(NaN, NaN)

uniapp 高德地图

在当前页面直接使用高德地图,标记、弹层、滚动都没问题。

如图:

但是,如果在当前地图页面,转跳到另外页面,【滚动页面就会报错】
如图:

Uncaught Error: Invalid Object: Pixel(NaN, NaN)

找了好几个相关问题的解决方案,最后这个解决了问题:

【将下面3D,改成2D】

map = new AMap.Map("container", {
// 设置地图容器id
iewMode: "3D", // 是否为3D地图模式
zoom: 11, // 初始化地图级别
center: [latitude,longitude], //初始化地图中心点位置
});

参考文件:
https://juejin.cn/post/7424045557067841577
https://github.com/uiwjs/react-amap/issues/121

继续阅读 »

在当前页面直接使用高德地图,标记、弹层、滚动都没问题。

如图:

但是,如果在当前地图页面,转跳到另外页面,【滚动页面就会报错】
如图:

Uncaught Error: Invalid Object: Pixel(NaN, NaN)

找了好几个相关问题的解决方案,最后这个解决了问题:

【将下面3D,改成2D】

map = new AMap.Map("container", {
// 设置地图容器id
iewMode: "3D", // 是否为3D地图模式
zoom: 11, // 初始化地图级别
center: [latitude,longitude], //初始化地图中心点位置
});

参考文件:
https://juejin.cn/post/7424045557067841577
https://github.com/uiwjs/react-amap/issues/121

收起阅读 »

uniappx 离线打包(主要是使用android studio 调试代码,而不是使用云打包次数)

离线打包 uts

参考文档

uni-app x 原生 SDK Android 版
文档中的flatDir { dirs('./plugins/') }单引号需要改成双引号,否则会报错

uniappx - 离线自定义基座

Uniappx 离线打包配置
社区这位老哥的文章配合官方的文档一起使用比较好。

HMS Core 官网文档

华为 ScanKit Example
这里我参考的是DefaultView-kotlin

example插件地址

懒人版:直接下载我的示例项目。
android studio example

正式开始

下载 android studio 2023.2.1 Patch 2

最新版或许也可以,不过尽量保持一致好吧
记得安装到其他盘,c 盘足够大可以无视

修改 gradle 安装路径,c 盘足够大可以无视

先添加一下环境变量

点击左上角的图标,点击 File,点击 setting

找到 Gradle,替换路径点击 Apply,点击 OK

JDK

Gradle JDK 17

创建一个 hello world 项目

File->New->New Project

项目信息,尽量保持一致,点击 Finish

创建好之后就是这样的

修改一下Gradle Version 和 Android Gradle Plugin Version

点击File-> Project Structure

先换代理然后点击Sync Project with Gradle Files (这个应该就是拉依赖的意思)
https\://mirrors.cloud.tencent.com/gradle/

启动项目先看看效果
<font color=red>图片中usb调试写错了use</font>

good呀 启动成功了

创建uniappx模块

以下操作请打开官方文档操作,方便复制文字内容
官网文档
社区文档

下载uniappx SDK

复制SDK/libs 到 uniappx/libs
<font color=red>这里不要全部都复制,会报错,请按照官网说的来。图片说明我就不改了</font>

在 uniappx下的build.gradle 文件中添加以下依赖

继续在 uniappx下的build.gradle 文件中添加 aaptOptions

将上面下载的sdk里的plugins文件夹复制到项目根目录(和uniappx同层)

在uniappx模块的build.gradle下添加插件io.dcloud.uts.kotlin的依赖

修改项目的settings.gradle

修改项目的gradle.properties

修改app模块下的AndroidMainfest.xml

修改uniappx模块下的AndroidMainfest.xml

继续修改app模块的build.gradle

到这里已经配置的差不多了,接下来配置uts模块插件,也就是我们的华为scanKit

新建uts模块

File->New->New Module

在项目的build.gradle中添加依赖

在x-scan模块的build.gradle中添加依赖

修改uniappx模块的build.gradle

修改app模块的build.gradle

继续修改settings.gradle 添加华为maven仓地址

修改x-scan模块下的AndroidMainfest.xml

最后打开hbuilderx

选择发行->app-android/ios 本地打包->生成本地打包app资源
然后只需要选择android即可

将与appid同名的文件夹复制到uniappx/src/main/assets/apps下

将unpackage/resources/app-android/uniappx/app-android/src下的所有文件复制到uniappx/src/main/java下

将unpackage/resources/app-android/uni_modules/x-scan/utssdk/app-android/src下的文件夹复制到
x-scan/src/main/java下

运行

用手机扫码测试出现扫码结果

正常情况下你可以在x-scan/src/main/java/index.kt中调试你的代码,然后同步到hbuilderx中,全部完成之后可以使用云打包项目即可

报错总结

  1. Could not resolve all dependencies for configuration ':classpath'.
    我这边是maven配置的地址将http改成https
  2. Minimum supported Gradle version is 7.3.3. Current version is 5.6.4.
    按照提示升级一下
  3. 使用chooseImage会报错
    将uniappx sdk中的uni-media-release.aar复制到libs中即可。这里的libs就是上面说的libs
继续阅读 »

参考文档

uni-app x 原生 SDK Android 版
文档中的flatDir { dirs('./plugins/') }单引号需要改成双引号,否则会报错

uniappx - 离线自定义基座

Uniappx 离线打包配置
社区这位老哥的文章配合官方的文档一起使用比较好。

HMS Core 官网文档

华为 ScanKit Example
这里我参考的是DefaultView-kotlin

example插件地址

懒人版:直接下载我的示例项目。
android studio example

正式开始

下载 android studio 2023.2.1 Patch 2

最新版或许也可以,不过尽量保持一致好吧
记得安装到其他盘,c 盘足够大可以无视

修改 gradle 安装路径,c 盘足够大可以无视

先添加一下环境变量

点击左上角的图标,点击 File,点击 setting

找到 Gradle,替换路径点击 Apply,点击 OK

JDK

Gradle JDK 17

创建一个 hello world 项目

File->New->New Project

项目信息,尽量保持一致,点击 Finish

创建好之后就是这样的

修改一下Gradle Version 和 Android Gradle Plugin Version

点击File-> Project Structure

先换代理然后点击Sync Project with Gradle Files (这个应该就是拉依赖的意思)
https\://mirrors.cloud.tencent.com/gradle/

启动项目先看看效果
<font color=red>图片中usb调试写错了use</font>

good呀 启动成功了

创建uniappx模块

以下操作请打开官方文档操作,方便复制文字内容
官网文档
社区文档

下载uniappx SDK

复制SDK/libs 到 uniappx/libs
<font color=red>这里不要全部都复制,会报错,请按照官网说的来。图片说明我就不改了</font>

在 uniappx下的build.gradle 文件中添加以下依赖

继续在 uniappx下的build.gradle 文件中添加 aaptOptions

将上面下载的sdk里的plugins文件夹复制到项目根目录(和uniappx同层)

在uniappx模块的build.gradle下添加插件io.dcloud.uts.kotlin的依赖

修改项目的settings.gradle

修改项目的gradle.properties

修改app模块下的AndroidMainfest.xml

修改uniappx模块下的AndroidMainfest.xml

继续修改app模块的build.gradle

到这里已经配置的差不多了,接下来配置uts模块插件,也就是我们的华为scanKit

新建uts模块

File->New->New Module

在项目的build.gradle中添加依赖

在x-scan模块的build.gradle中添加依赖

修改uniappx模块的build.gradle

修改app模块的build.gradle

继续修改settings.gradle 添加华为maven仓地址

修改x-scan模块下的AndroidMainfest.xml

最后打开hbuilderx

选择发行->app-android/ios 本地打包->生成本地打包app资源
然后只需要选择android即可

将与appid同名的文件夹复制到uniappx/src/main/assets/apps下

将unpackage/resources/app-android/uniappx/app-android/src下的所有文件复制到uniappx/src/main/java下

将unpackage/resources/app-android/uni_modules/x-scan/utssdk/app-android/src下的文件夹复制到
x-scan/src/main/java下

运行

用手机扫码测试出现扫码结果

正常情况下你可以在x-scan/src/main/java/index.kt中调试你的代码,然后同步到hbuilderx中,全部完成之后可以使用云打包项目即可

报错总结

  1. Could not resolve all dependencies for configuration ':classpath'.
    我这边是maven配置的地址将http改成https
  2. Minimum supported Gradle version is 7.3.3. Current version is 5.6.4.
    按照提示升级一下
  3. 使用chooseImage会报错
    将uniappx sdk中的uni-media-release.aar复制到libs中即可。这里的libs就是上面说的libs
收起阅读 »

在快手小程序使用scroll-view滚动到底部事件触发时有一定几率触发scroll-view盒子点击事件

scroll_view

在快手小程序使用scroll-view滚动到底部事件触发时有一定几率触发scroll-view盒子点击事件
在快手模拟器中用滚轮几乎百分百触发,用手势滚动有几率触发

在快手小程序使用scroll-view滚动到底部事件触发时有一定几率触发scroll-view盒子点击事件
在快手模拟器中用滚轮几乎百分百触发,用手势滚动有几率触发

Android平台5+离线打包

离线打包

本教程一笔化整个离线打包,不列举其他选情况,主要解决官方文档一次看不懂,后续熟悉流程可自行根据官方文档修改自定义设置。参考链接如下:

  1. Andriod离线打包

开发环境及工具

软件的下载演示为MAC,Windows下载选择Windows环境即可。

HbuilderX与SDK版本需要要求一致,PS:有相关bug提出新SDK(4.36)会白屏。本次演示使用4.29版本

  1. android studio

  2. HBuilderX

  3. 离线SDK

使用新版以及后续SDK注意,新版由本次演示后的版本在注意事项中标明Andriod Studio相关环境使用时仔细阅读使用环境(后续下载SDK官方应该会修改环境),本次演示不包含该内容。

  1. java 1.8

Andriod离线打包

Android Studio打开项目

可能遇到的问题:

  • 下载gradle失败

  • 分不清build.gradle

下载gradle失败

需要修改为国内镜像,参考文档:Android Studio项目gradle下载慢问题

不想去看的话直接修改gradle/wrapper/gradle-wrapper.properties下distributionUrl配置

修改为

distributionBase=GRADLE_USER_HOME  
distributionPath=wrapper/dists  
zipStoreBase=GRADLE_USER_HOME  
zipStorePath=wrapper/dists  
distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-6.5-all.zip

分不清build.gradle

打开的项目加载完成后会切换为Andriod战士方式,配置时建议切换为项目展示方式

项目中包含两个build.gradle文件分别为项目级和应用级,后续教程内以该规则进行描述

生成证书

可参考文档: 生成签名证书

需要JAVA JDK环境1.8

选择APK,点击下一步

选择创建新的

填写信息,确定

证书名称: simpleDemo.keystore  
证书密码: 123456  
别名: simple  
别名密码: 123123  
证书信息:   
demo,demo,demo,changsha,hunan,CN

下一步

创建

申请APP离线key

打开终端

移动到证书所在目录

查看证书信息

命令如下

cd simpleDemo  

ls  

keytool -list -v -keystore simpleDemo.keystore  

123456(这里是我生成的  个人配置的输入个人的)

证书指纹

可能遇到的错误:

  • java环境

java环境是未进行详细解释,如果是完全按照教程流程唯一可能遇到java环境导致生成不正常意外报错,如果有可以问下评论区大佬。

打开应用管理

应用管理

各平台信息,新增

填写信息,提交,内容参考上面的证书详情

创建离线key

创建

查看离线key

生成本地打包资源

生成资源

找到资源

替换资源

修改APPID

修改app离线key

修改证书

修改应用级build.gradle,别名密码和证书密码是可以一致的,区别开是为了更好的分辨某个填写至某个

运行

修改build.gradle后需要点击一次Sync Now或者资源重新加载参考教程内 同步gradle配置想·

完成后点击运行

运行完成

继续阅读 »

本教程一笔化整个离线打包,不列举其他选情况,主要解决官方文档一次看不懂,后续熟悉流程可自行根据官方文档修改自定义设置。参考链接如下:

  1. Andriod离线打包

开发环境及工具

软件的下载演示为MAC,Windows下载选择Windows环境即可。

HbuilderX与SDK版本需要要求一致,PS:有相关bug提出新SDK(4.36)会白屏。本次演示使用4.29版本

  1. android studio

  2. HBuilderX

  3. 离线SDK

使用新版以及后续SDK注意,新版由本次演示后的版本在注意事项中标明Andriod Studio相关环境使用时仔细阅读使用环境(后续下载SDK官方应该会修改环境),本次演示不包含该内容。

  1. java 1.8

Andriod离线打包

Android Studio打开项目

可能遇到的问题:

  • 下载gradle失败

  • 分不清build.gradle

下载gradle失败

需要修改为国内镜像,参考文档:Android Studio项目gradle下载慢问题

不想去看的话直接修改gradle/wrapper/gradle-wrapper.properties下distributionUrl配置

修改为

distributionBase=GRADLE_USER_HOME  
distributionPath=wrapper/dists  
zipStoreBase=GRADLE_USER_HOME  
zipStorePath=wrapper/dists  
distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-6.5-all.zip

分不清build.gradle

打开的项目加载完成后会切换为Andriod战士方式,配置时建议切换为项目展示方式

项目中包含两个build.gradle文件分别为项目级和应用级,后续教程内以该规则进行描述

生成证书

可参考文档: 生成签名证书

需要JAVA JDK环境1.8

选择APK,点击下一步

选择创建新的

填写信息,确定

证书名称: simpleDemo.keystore  
证书密码: 123456  
别名: simple  
别名密码: 123123  
证书信息:   
demo,demo,demo,changsha,hunan,CN

下一步

创建

申请APP离线key

打开终端

移动到证书所在目录

查看证书信息

命令如下

cd simpleDemo  

ls  

keytool -list -v -keystore simpleDemo.keystore  

123456(这里是我生成的  个人配置的输入个人的)

证书指纹

可能遇到的错误:

  • java环境

java环境是未进行详细解释,如果是完全按照教程流程唯一可能遇到java环境导致生成不正常意外报错,如果有可以问下评论区大佬。

打开应用管理

应用管理

各平台信息,新增

填写信息,提交,内容参考上面的证书详情

创建离线key

创建

查看离线key

生成本地打包资源

生成资源

找到资源

替换资源

修改APPID

修改app离线key

修改证书

修改应用级build.gradle,别名密码和证书密码是可以一致的,区别开是为了更好的分辨某个填写至某个

运行

修改build.gradle后需要点击一次Sync Now或者资源重新加载参考教程内 同步gradle配置想·

完成后点击运行

运行完成

收起阅读 »