uniapp 微信自动播放背景音乐插件
现在不管是 audio 还是 video(带音频) 都没办法做自动播放,受到浏览器阻止自动播放策略的约束;
还好微信内置浏览器拥有一些特殊api,可以实现自动播放。闲话少说直接看效果,微信扫一扫下面的二维码查看
其实 iOS 实现起来比较简单,只需要监听 WeixinJSBridgeReady 或者 weixin. ready 就可以正常播放 audio 元素的音频;
Android 实现起来相对麻烦一点,需要借助 soundjs 库来完成。这里我参考借鉴 superzdd 大佬的实验 wechat-h5-backgound-music-survey,有兴趣的可以去了解一下~
这里面比较麻烦的一个事情是。。。。 iOS方案和Android方案相互是不兼容的!
所以我把他封装成了一个 jssdk 插件,可以快速使用并且完美兼容微信 Android 和 iOS 以及一般手机浏览器 (触摸)
好省去一些时间浪费在做兼容这件事上,有兴趣的欢迎前来使用~ 并且项目长期维护, 有问题可以直接提交问题
现在不管是 audio 还是 video(带音频) 都没办法做自动播放,受到浏览器阻止自动播放策略的约束;
还好微信内置浏览器拥有一些特殊api,可以实现自动播放。闲话少说直接看效果,微信扫一扫下面的二维码查看
其实 iOS 实现起来比较简单,只需要监听 WeixinJSBridgeReady 或者 weixin. ready 就可以正常播放 audio 元素的音频;
Android 实现起来相对麻烦一点,需要借助 soundjs 库来完成。这里我参考借鉴 superzdd 大佬的实验 wechat-h5-backgound-music-survey,有兴趣的可以去了解一下~
这里面比较麻烦的一个事情是。。。。 iOS方案和Android方案相互是不兼容的!
所以我把他封装成了一个 jssdk 插件,可以快速使用并且完美兼容微信 Android 和 iOS 以及一般手机浏览器 (触摸)
好省去一些时间浪费在做兼容这件事上,有兴趣的欢迎前来使用~ 并且项目长期维护, 有问题可以直接提交问题
插件地址:https://ext.dcloud.net.cn/plugin?id=20174
收起阅读 »quill-delta-converter 公共模块不存在,请在 uniCloud/database 目录右击“配置schema扩展公共模块“添加 quill-delta-converter 模块
问题描述1
在uni-admin项目中,导入uni-cms运行,通常就会出现如下报错,quill-delta-converter 公共模块不存在,请在 uniCloud/database 目录右击"配置schema扩展公共模块"添加 quill-delta-converter 模块。
解决办法1
只需要按照上面的方法,在uniCloud目录下找到database目录,右击添加 quill-delta-converter 模块即可解决
可以看一下database目录下面创建了一个新文件package.json,代码如下所示,就说明已经关联好了,可以简单看一下即可
{
"name": "database",
"dependencies": {
"quill-delta-converter": "file:../../uni_modules/uni-cms/uniCloud/cloudfunctions/common/quill-delta-converter"
},
"extensions": {}
}
通常来讲,这样操作完成之后,再刷新项目,之前的报错将不会存在,保险起见,可以重新启动一下项目,即可解决第一个问题。
问题描述2
在“本地云函数”调试uniadmin以及uni-cms,完全正常,没有问题,上线之前,将cloudfunction以及database全部上传到云端,然后在本地“连接云端云函数”,发现上面的问题再次出现,用户端项目使用的是uni-cms-article,也报同样的错误,明明我们已经安装第一种方法配置schema扩展公共模块quill-delta-converter,那为什么还报错那?
解决办法2
上传到云端,不单单是将cloudfunctions和database全部上传,如果你在database关联了公共模块或者扩展库,那么就需要“上传Schema扩展Js的配置”,这个很关键,这个过程其实相当于你的npm i安装一样,只有配置项,没有安装依赖,那云端肯定是不行的。
总结
我做项目出现这个问题的时候,花了好久的时间才看报错知道的这个问题,在这里记录一下,如果你也遇到了这个问题,帮你解决了,请给点赞支持一下哦,我是咸虾米_感谢大家。
问题描述1
在uni-admin项目中,导入uni-cms运行,通常就会出现如下报错,quill-delta-converter 公共模块不存在,请在 uniCloud/database 目录右击"配置schema扩展公共模块"添加 quill-delta-converter 模块。
解决办法1
只需要按照上面的方法,在uniCloud目录下找到database目录,右击添加 quill-delta-converter 模块即可解决
可以看一下database目录下面创建了一个新文件package.json,代码如下所示,就说明已经关联好了,可以简单看一下即可
{
"name": "database",
"dependencies": {
"quill-delta-converter": "file:../../uni_modules/uni-cms/uniCloud/cloudfunctions/common/quill-delta-converter"
},
"extensions": {}
}
通常来讲,这样操作完成之后,再刷新项目,之前的报错将不会存在,保险起见,可以重新启动一下项目,即可解决第一个问题。
问题描述2
在“本地云函数”调试uniadmin以及uni-cms,完全正常,没有问题,上线之前,将cloudfunction以及database全部上传到云端,然后在本地“连接云端云函数”,发现上面的问题再次出现,用户端项目使用的是uni-cms-article,也报同样的错误,明明我们已经安装第一种方法配置schema扩展公共模块quill-delta-converter,那为什么还报错那?
解决办法2
上传到云端,不单单是将cloudfunctions和database全部上传,如果你在database关联了公共模块或者扩展库,那么就需要“上传Schema扩展Js的配置”,这个很关键,这个过程其实相当于你的npm i安装一样,只有配置项,没有安装依赖,那云端肯定是不行的。
总结
我做项目出现这个问题的时候,花了好久的时间才看报错知道的这个问题,在这里记录一下,如果你也遇到了这个问题,帮你解决了,请给点赞支持一下哦,我是咸虾米_感谢大家。
收起阅读 »个人接单,经验丰富,页面 小程序 APP开发均可
工作之余,想整点外快 找合作开发也可 --联系方式vx:Y1910710026
工作之余,想整点外快 找合作开发也可 --联系方式vx:Y1910710026
nativejs android获取wifi强度及状态
const Context = plus.android.importClass("android.content.Context");
const WifiManager = plus.android.importClass("android.net.wifi.WifiManager");
const wifiManager = plus.android.runtimeMainActivity().getSystemService(Context.WIFI_SERVICE);
const WifiInfo = plus.android.importClass("android.net.wifi.WifiInfo");
const isWifiEnabled = wifiManager.isWifiEnabled();
if (!isWifiEnabled) {
// 未开启wifi
// ....
return;
}
const connectionInfo = wifiManager.getConnectionInfo();
const ipAddress = connectionInfo.getIpAddress();
if (!ipAddress) {
// WiFi未连接
// ....
return;
}
// wifi已连接
const rssi = connectionInfo.getRssi();
// 0格 rssi<=-100
// 1格 (-100, -88]
// 2格 (-88, -77]
// 3格 (-77, -55]
// 4格 rssi>=-55 const Context = plus.android.importClass("android.content.Context");
const WifiManager = plus.android.importClass("android.net.wifi.WifiManager");
const wifiManager = plus.android.runtimeMainActivity().getSystemService(Context.WIFI_SERVICE);
const WifiInfo = plus.android.importClass("android.net.wifi.WifiInfo");
const isWifiEnabled = wifiManager.isWifiEnabled();
if (!isWifiEnabled) {
// 未开启wifi
// ....
return;
}
const connectionInfo = wifiManager.getConnectionInfo();
const ipAddress = connectionInfo.getIpAddress();
if (!ipAddress) {
// WiFi未连接
// ....
return;
}
// wifi已连接
const rssi = connectionInfo.getRssi();
// 0格 rssi<=-100
// 1格 (-100, -88]
// 2格 (-88, -77]
// 3格 (-77, -55]
// 4格 rssi>=-55 收起阅读 »
Uniappx 离线打包配置
Uniapp-x的离线打包
准备(我的配置)
-
HBuilder X (4.29版本及以上)
-
uniapp x SDK (4.29),是uniapp x的SDK,不要跟uniapp的搞混了,下载地址Uniapp x SDK
-
android studio (2023/2024都行)
其它:gradle版本为8.7。gradle插件版本为8.6.0。kotlin插件版本为1.9.0
1. 新建一个Android空项目
打开 android studio,点击顶部的 New Project –> Phone And Tablet –> No Activity,如下图:出现下面的界面
- Name 是你的项目名称
- Package name是你的包名
- Language 要选择 Kotlin
- Min Sdk 建议21
点击Finsh,这是空项目模板
我这里是gradle构建之后的目录,后面的都是基于构建完成的
- 一般称app为主模块,它下面的 build.gradle.kts 是主模块的编译配置文件,也是项目级别的编译配置文件,一定要跟其它的区分开来
下面的步骤就是跟官网一致了!
2. 新建uni-app x模块
点击File->New->New Module...
点击左侧Templates的Android Library。
Language选择Kotlin。
Module name建议设置为uniappx。
点击Finish。
构建之后会多出一个uniappx目录
基础库配置
- 在uni-app x模块下新建目录
libs,跟src同级别 ,将uts-runtime-release.aar,android-gif-drawable-1.2.28.aar,app-common-release.aar,app-runtime-release.aar,breakpad-build-release.aar,dcloud-layout-release.aar, framework-release.aar,uni-exit-release.aar,uni-getAccessibilityInfo-release.aar,uni-getAppAuthorizeSetting-release.aar,uni-getAppBaseInfo-release.aar, uni-getSystemSetting-release.aar,uni-openAppAuthorizeSetting-release.aar,uni-prompt-release.aar,uni-storage-release.aar,uni-getDeviceInfo-release.aar, uni-getSystemInfo-release.aar,uni-rpx2px-release.aar,uni-theme-release.aar共19个aar拷贝到libs下,参考下图
修改uniappx模块下的build.gradle
- 添加依赖
将下面的依赖信息添加到build.gradle中
dependencies {
···
implementation fileTree(include: ['*.aar'], dir: './libs')
implementation "androidx.core:core-ktx:1.10.1"
implementation "androidx.recyclerview:recyclerview:1.3.2"
implementation "androidx.appcompat:appcompat:1.0.0"
implementation "androidx.exifinterface:exifinterface:1.3.6"
implementation "androidx.localbroadcastmanager:localbroadcastmanager:1.0.0@aar"
implementation "androidx.constraintlayout:constraintlayout:2.1.4"
implementation "androidx.webkit:webkit:1.6.0"
implementation "com.google.android.material:material:1.4.0"
implementation "androidx.viewpager2:viewpager2:1.1.0-beta02"
implementation "com.alibaba:fastjson:1.2.83"
implementation "com.facebook.fresco:fresco:3.1.3"
implementation "com.facebook.fresco:middleware:3.1.3"
implementation "com.facebook.fresco:animated-gif:3.1.3"
implementation "com.facebook.fresco:webpsupport:3.1.3"
implementation "com.facebook.fresco:animated-webp:3.1.3"
implementation "com.github.bumptech.glide:glide:4.9.0"
implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.4"
implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.4"
implementation "org.jetbrains.kotlin:kotlin-stdlib:1.8.10"
implementation "org.jetbrains.kotlin:kotlin-reflect:1.8.10"
implementation "org.jetbrains.kotlinx:kotlinx-serialization-json:1.4.1"
implementation "com.squareup.okhttp3:okhttp:3.12.12"
implementation "com.github.getActivity:XXPermissions:18.63"
}
- 添加aaptOptions配置
将aaptOptions配置添加到android节点下
aaptOptions {
additionalParameters '--auto-add-overlay'
ignoreAssetsPattern '!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~'
}
- 修改app主模块的配置(不要漏掉了)
在build.gradle的dependencies节点添加下面两行
implementation(fileTree(mapOf("include" to listOf("*.aar"), "dir" to "../uniappx/libs")))
implementation(project(":uniappx"))
配置gradle插件
1.下载的SDK压缩包里面有一个plugins文件,将它复制到你的项目根目录
2.在项目根目录的build.gradle的顶部添加gradle插件的依赖
buildscript {
dependencies {
classpath(files("plugins/uts-kotlin-compiler-plugin-0.0.1.jar"))
classpath(files("plugins/uts-kotlin-gradle-plugin-0.0.1.jar"))
}
}
- 然后在uniappx模块的build.gradle下添加插件io.dcloud.uts.kotlin的依赖
plugins {
...
id 'io.dcloud.uts.kotlin'
}
修改项目的settings.gradle
- 在项目根路径下的settings.gradle中添加jitpack的maven的仓库地址和本地gradle插件的路径配置
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
...
maven { url = uri("https://jitpack.io") }
flatDir { dirs('./plugins/') }
}
}
修改项目的gradle.properties
- 在项目根路径下的gradle.properties中追加如下内容
android.useAndroidX=true
android.enableJetifier=true
修改app主模块下的AndroidManifest.xml
- 添加activity,将下面内容拷贝到application节点下
完成的AndroidManifest.xml如下
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<application
android:name="io.dcloud.uniapp.UniApplication"
android:allowBackup="true"
android:dataExtractionRules="@xml/data_extraction_rules"
android:fullBackupContent="@xml/backup_rules"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.Offlinenative"
tools:targetApi="31" >
<activity
android:name="io.dcloud.uniapp.UniAppActivity"
android:configChanges="orientation|keyboard|keyboardHidden|smallestScreenSize|screenLayout|screenSize|mcc|mnc|fontScale|navigation|uiMode"
android:exported="true"
android:label="@string/app_name"
android:screenOrientation="portrait"
android:theme="@style/UniAppX.Activity.DefaultTheme"
android:windowSoftInputMode="adjustResize"
tools:replace="android:label,android:exported,android:theme,android:configChanges,android:windowSoftInputMode,android:screenOrientation">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
修改uniappx模块下的AndroidManifest.xml
- 添加appid,在application节点下添加
DCLOUD_UNI_APPID节点
<application>
<meta-data
android:name="DCLOUD_UNI_APPID"
android:value="你的appid" />
</application>
拷贝资源文件
-
导出uni-app x项目的资源文件:选择项目,然后点击:发行 -> 原生App-本地打包 -> 生成本地打包App资源,导出成功之后会在项目的unpackage/resources目录下生成资源文件
-
将app-android目录下与appid对应的目录拷贝到uniappx的
assets/apps目录下,需要自己先创建
- 拷贝kt文件:需要将
unkackage/resource/app-android/uniappx/app-android/src/目录下的所有文件拷贝到项目的uniappx模块下的src/main/java下,src/main/java下的包名文件夹可以删掉
如果你的项目没有uts插件,到这一步已经可以使用As运行啦
配置uts插件
资源导出成功之后,uts插件资源位于unpackage/resource/app-android/uni_modules下
为方便区分,uts插件指前端封装的uni_modules插件;android uts插件指根据编译后的uts插件生成的安卓原生模块
新建android uts插件模块,跟新建uniappx一样,下面以插件wow-scankit为例子,下面所有都是基于wow-scankit的配置示例
-
点击左侧Templates的Android Library。
-
Language选择Kotlin。
-
Module name建议与uts插件模块名称一致。
-
点击Finish。
注意:
- Templates一定要选择Android Library。
- Language一定要选择Kotlin。
- Build configuration language建议选择Groovy DSL(build.gradle)。以下教程均按照此模式进行
添加gradle插件
- 在
`wow-scankit插件模块的build.gradle的plugins节点下添加io.dcloud.uts.kotlin的依赖
plugins {
...
id 'io.dcloud.uts.kotlin'
}
- 添加依赖
将下面内容拷贝到build.gradle中,添加到原有的dependencies节点,不要删掉原有的
dependencies {
compileOnly fileTree(include: ['*.aar'], dir: '../uniappx/libs')
compileOnly fileTree(include: ['*.aar'], dir: './libs')
compileOnly "com.alibaba:fastjson:1.2.83"
compileOnly "androidx.core:core-ktx:1.10.1"
compileOnly 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.8'
compileOnly 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.8'
}
根据config.json配置应用
如果uts插件的config.json有内容
下面是插件wow-scankit的配置
minSdkVersion
在插件wow-scankit的android节点的defaultConfig的minSdk设置此字段
{
"minSdkVersion": "21",
"dependencies": ["com.huawei.hms:scan:2.12.0.301"]
}
dependencies
在插件wow-scankit的dependencies 添加 implementation 'com.huawei.hms:scan:2.12.0.301'
- 在项目的
settings.gradle.jks文件需要添加仓库地址
完整的dependencyResolutionManagement如下
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
maven {
url = uri("https://jitpack.io")
}
maven {
url = uri("https://developer.huawei.com/repo/")
}
flatDir {
dirs("./plugins/")
}
}
}
- 将插件添加到
uniappx模块
implementation project(":wow-scankit")
复制资源(如果有就复制)
libs
将src目录下的所有文件拷贝到android uts插件模块/src/main/java目录下(wow-scankit插件没有)
assets
将assets文件夹拷贝到wow-scankit插件模块/src/main/目录下
res
将res文件夹拷贝到wow-scankit插件模块/src/main/目录下。
AndroidManifest.xml
将AndroidManifest.xml拷贝到wow-scankit插件模块/src/main/目录下
添加到主项目
将wow-scankit插件模块的依赖添加到uniappx模块的build.gradle的依赖中
implementation project(':wow-scankit')
配置完成后重新构建
如果前面步骤没有出错的话,到这里就已经完成了
Uniapp-x的离线打包
准备(我的配置)
-
HBuilder X (4.29版本及以上)
-
uniapp x SDK (4.29),是uniapp x的SDK,不要跟uniapp的搞混了,下载地址Uniapp x SDK
-
android studio (2023/2024都行)
其它:gradle版本为8.7。gradle插件版本为8.6.0。kotlin插件版本为1.9.0
1. 新建一个Android空项目
打开 android studio,点击顶部的 New Project –> Phone And Tablet –> No Activity,如下图:出现下面的界面
- Name 是你的项目名称
- Package name是你的包名
- Language 要选择 Kotlin
- Min Sdk 建议21
点击Finsh,这是空项目模板
我这里是gradle构建之后的目录,后面的都是基于构建完成的
- 一般称app为主模块,它下面的 build.gradle.kts 是主模块的编译配置文件,也是项目级别的编译配置文件,一定要跟其它的区分开来
下面的步骤就是跟官网一致了!
2. 新建uni-app x模块
点击File->New->New Module...
点击左侧Templates的Android Library。
Language选择Kotlin。
Module name建议设置为uniappx。
点击Finish。
构建之后会多出一个uniappx目录
基础库配置
- 在uni-app x模块下新建目录
libs,跟src同级别 ,将uts-runtime-release.aar,android-gif-drawable-1.2.28.aar,app-common-release.aar,app-runtime-release.aar,breakpad-build-release.aar,dcloud-layout-release.aar, framework-release.aar,uni-exit-release.aar,uni-getAccessibilityInfo-release.aar,uni-getAppAuthorizeSetting-release.aar,uni-getAppBaseInfo-release.aar, uni-getSystemSetting-release.aar,uni-openAppAuthorizeSetting-release.aar,uni-prompt-release.aar,uni-storage-release.aar,uni-getDeviceInfo-release.aar, uni-getSystemInfo-release.aar,uni-rpx2px-release.aar,uni-theme-release.aar共19个aar拷贝到libs下,参考下图
修改uniappx模块下的build.gradle
- 添加依赖
将下面的依赖信息添加到build.gradle中
dependencies {
···
implementation fileTree(include: ['*.aar'], dir: './libs')
implementation "androidx.core:core-ktx:1.10.1"
implementation "androidx.recyclerview:recyclerview:1.3.2"
implementation "androidx.appcompat:appcompat:1.0.0"
implementation "androidx.exifinterface:exifinterface:1.3.6"
implementation "androidx.localbroadcastmanager:localbroadcastmanager:1.0.0@aar"
implementation "androidx.constraintlayout:constraintlayout:2.1.4"
implementation "androidx.webkit:webkit:1.6.0"
implementation "com.google.android.material:material:1.4.0"
implementation "androidx.viewpager2:viewpager2:1.1.0-beta02"
implementation "com.alibaba:fastjson:1.2.83"
implementation "com.facebook.fresco:fresco:3.1.3"
implementation "com.facebook.fresco:middleware:3.1.3"
implementation "com.facebook.fresco:animated-gif:3.1.3"
implementation "com.facebook.fresco:webpsupport:3.1.3"
implementation "com.facebook.fresco:animated-webp:3.1.3"
implementation "com.github.bumptech.glide:glide:4.9.0"
implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.4"
implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.4"
implementation "org.jetbrains.kotlin:kotlin-stdlib:1.8.10"
implementation "org.jetbrains.kotlin:kotlin-reflect:1.8.10"
implementation "org.jetbrains.kotlinx:kotlinx-serialization-json:1.4.1"
implementation "com.squareup.okhttp3:okhttp:3.12.12"
implementation "com.github.getActivity:XXPermissions:18.63"
}
- 添加aaptOptions配置
将aaptOptions配置添加到android节点下
aaptOptions {
additionalParameters '--auto-add-overlay'
ignoreAssetsPattern '!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~'
}
- 修改app主模块的配置(不要漏掉了)
在build.gradle的dependencies节点添加下面两行
implementation(fileTree(mapOf("include" to listOf("*.aar"), "dir" to "../uniappx/libs")))
implementation(project(":uniappx"))
配置gradle插件
1.下载的SDK压缩包里面有一个plugins文件,将它复制到你的项目根目录
2.在项目根目录的build.gradle的顶部添加gradle插件的依赖
buildscript {
dependencies {
classpath(files("plugins/uts-kotlin-compiler-plugin-0.0.1.jar"))
classpath(files("plugins/uts-kotlin-gradle-plugin-0.0.1.jar"))
}
}
- 然后在uniappx模块的build.gradle下添加插件io.dcloud.uts.kotlin的依赖
plugins {
...
id 'io.dcloud.uts.kotlin'
}
修改项目的settings.gradle
- 在项目根路径下的settings.gradle中添加jitpack的maven的仓库地址和本地gradle插件的路径配置
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
...
maven { url = uri("https://jitpack.io") }
flatDir { dirs('./plugins/') }
}
}
修改项目的gradle.properties
- 在项目根路径下的gradle.properties中追加如下内容
android.useAndroidX=true
android.enableJetifier=true
修改app主模块下的AndroidManifest.xml
- 添加activity,将下面内容拷贝到application节点下
完成的AndroidManifest.xml如下
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<application
android:name="io.dcloud.uniapp.UniApplication"
android:allowBackup="true"
android:dataExtractionRules="@xml/data_extraction_rules"
android:fullBackupContent="@xml/backup_rules"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.Offlinenative"
tools:targetApi="31" >
<activity
android:name="io.dcloud.uniapp.UniAppActivity"
android:configChanges="orientation|keyboard|keyboardHidden|smallestScreenSize|screenLayout|screenSize|mcc|mnc|fontScale|navigation|uiMode"
android:exported="true"
android:label="@string/app_name"
android:screenOrientation="portrait"
android:theme="@style/UniAppX.Activity.DefaultTheme"
android:windowSoftInputMode="adjustResize"
tools:replace="android:label,android:exported,android:theme,android:configChanges,android:windowSoftInputMode,android:screenOrientation">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
修改uniappx模块下的AndroidManifest.xml
- 添加appid,在application节点下添加
DCLOUD_UNI_APPID节点
<application>
<meta-data
android:name="DCLOUD_UNI_APPID"
android:value="你的appid" />
</application>
拷贝资源文件
-
导出uni-app x项目的资源文件:选择项目,然后点击:发行 -> 原生App-本地打包 -> 生成本地打包App资源,导出成功之后会在项目的unpackage/resources目录下生成资源文件
-
将app-android目录下与appid对应的目录拷贝到uniappx的
assets/apps目录下,需要自己先创建
- 拷贝kt文件:需要将
unkackage/resource/app-android/uniappx/app-android/src/目录下的所有文件拷贝到项目的uniappx模块下的src/main/java下,src/main/java下的包名文件夹可以删掉
如果你的项目没有uts插件,到这一步已经可以使用As运行啦
配置uts插件
资源导出成功之后,uts插件资源位于unpackage/resource/app-android/uni_modules下
为方便区分,uts插件指前端封装的uni_modules插件;android uts插件指根据编译后的uts插件生成的安卓原生模块
新建android uts插件模块,跟新建uniappx一样,下面以插件wow-scankit为例子,下面所有都是基于wow-scankit的配置示例
-
点击左侧Templates的Android Library。
-
Language选择Kotlin。
-
Module name建议与uts插件模块名称一致。
-
点击Finish。
注意:
- Templates一定要选择Android Library。
- Language一定要选择Kotlin。
- Build configuration language建议选择Groovy DSL(build.gradle)。以下教程均按照此模式进行
添加gradle插件
- 在
`wow-scankit插件模块的build.gradle的plugins节点下添加io.dcloud.uts.kotlin的依赖
plugins {
...
id 'io.dcloud.uts.kotlin'
}
- 添加依赖
将下面内容拷贝到build.gradle中,添加到原有的dependencies节点,不要删掉原有的
dependencies {
compileOnly fileTree(include: ['*.aar'], dir: '../uniappx/libs')
compileOnly fileTree(include: ['*.aar'], dir: './libs')
compileOnly "com.alibaba:fastjson:1.2.83"
compileOnly "androidx.core:core-ktx:1.10.1"
compileOnly 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.8'
compileOnly 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.8'
}
根据config.json配置应用
如果uts插件的config.json有内容
下面是插件wow-scankit的配置
minSdkVersion
在插件wow-scankit的android节点的defaultConfig的minSdk设置此字段
{
"minSdkVersion": "21",
"dependencies": ["com.huawei.hms:scan:2.12.0.301"]
}
dependencies
在插件wow-scankit的dependencies 添加 implementation 'com.huawei.hms:scan:2.12.0.301'
- 在项目的
settings.gradle.jks文件需要添加仓库地址
完整的dependencyResolutionManagement如下
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
maven {
url = uri("https://jitpack.io")
}
maven {
url = uri("https://developer.huawei.com/repo/")
}
flatDir {
dirs("./plugins/")
}
}
}
- 将插件添加到
uniappx模块
implementation project(":wow-scankit")
复制资源(如果有就复制)
libs
将src目录下的所有文件拷贝到android uts插件模块/src/main/java目录下(wow-scankit插件没有)
assets
将assets文件夹拷贝到wow-scankit插件模块/src/main/目录下
res
将res文件夹拷贝到wow-scankit插件模块/src/main/目录下。
AndroidManifest.xml
将AndroidManifest.xml拷贝到wow-scankit插件模块/src/main/目录下
添加到主项目
将wow-scankit插件模块的依赖添加到uniappx模块的build.gradle的依赖中
implementation project(':wow-scankit')
配置完成后重新构建
如果前面步骤没有出错的话,到这里就已经完成了
收起阅读 »用户体验极不好,项目无法工程化
都2024年了,HbuilderX IDE 登录还需要手动输入帐号密码,不能做一下浏览器登录跳转吗?另外不能支持一下系统级别的其它的密码自动完成吗?自定义发行不支持cli,导致项目无法工程化,每次都需要手动使用IDE执行,极其恶心
都2024年了,HbuilderX IDE 登录还需要手动输入帐号密码,不能做一下浏览器登录跳转吗?另外不能支持一下系统级别的其它的密码自动完成吗?自定义发行不支持cli,导致项目无法工程化,每次都需要手动使用IDE执行,极其恶心
uni-list 中的的loadmore事件不执行
nvue 中 uni-list 的loadmore不执行。
研究了 一天,发现龟儿 ,
1、
uni-list 的组件中,有写事件代码,但是没有绑定到 list组件中
loadMore(e) {
this.$emit('scrolltolower');
},
既然这样,我就给他帮上。我就复制了 loadMore 粘贴到 组件上,于是
<list :bounce="false" :scrollable="true" show-scrollbar :render-reverse="renderReverse" @scroll="scroll" class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop"
loadmoreoffset="15" @loadMore="loadMore" >
坑来了,这样加上还是没有。
2、一遍一遍又看 了文档,开始觉得这球玩意是不是真的不支持。也许是因为这样,所以才没有添加的,但是list得文档说是支持的。
于是,一个字一个字看文档。最后发现 loadmore的这个m是小写的,于是就成功过了。真tm坑了我一天时间。
nvue 中 uni-list 的loadmore不执行。
研究了 一天,发现龟儿 ,
1、
uni-list 的组件中,有写事件代码,但是没有绑定到 list组件中
loadMore(e) {
this.$emit('scrolltolower');
},
既然这样,我就给他帮上。我就复制了 loadMore 粘贴到 组件上,于是
<list :bounce="false" :scrollable="true" show-scrollbar :render-reverse="renderReverse" @scroll="scroll" class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop"
loadmoreoffset="15" @loadMore="loadMore" >
坑来了,这样加上还是没有。
2、一遍一遍又看 了文档,开始觉得这球玩意是不是真的不支持。也许是因为这样,所以才没有添加的,但是list得文档说是支持的。
于是,一个字一个字看文档。最后发现 loadmore的这个m是小写的,于是就成功过了。真tm坑了我一天时间。
【公告】uni-app启动鸿蒙元服务立项
【IOS相册权限】Native.js IOS相册权限获取 弹窗请求授权
优化官方推荐的uni.authorize文档中permission.js中的相册授权方法,判断是否有授权没有则弹窗请求授权。
发现很多小伙伴有这个需求,自己也在网上搜索了一番无果。
在此分享出来,方便大家开发。
// 判断相册权限是否开启 resolve()返回值可以根据需求更具体一点,在业务中拿到状态码后弹窗提示用户是否要去设置页修改权限
function judgeIosPermissionPhotoLibrary() {
return new Promise((resolve, reject) => {
var PHAuthorizationStatus = {
NotDetermined: 0, // 未申请过权限
Restricted: 1, // 拒绝
Denied: 2, // 拒绝
Authorized: 3, // 拥有
Limited: 4 // iOS 14 新增
};
if (!PHPhotoLibrary) {
var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");
}
var status = PHPhotoLibrary.authorizationStatus();
if (status === PHAuthorizationStatus.NotDetermined) {
PHPhotoLibrary.requestAuthorization(() => {
const status = PHPhotoLibrary.authorizationStatus(); {
if (status === PHAuthorizationStatus.Authorized) {
plus.ios.deleteObject(PHPhotoLibrary);
resolve(true)
} else {
plus.ios.deleteObject(PHPhotoLibrary);
resolve(false)
}
}
})
} else if (status === PHAuthorizationStatus.Authorized) {
plus.ios.deleteObject(PHPhotoLibrary);
resolve(true)
} else {
if (status === PHAuthorizationStatus.Denied || status === PHAuthorizationStatus.Restricted) {
console.log("您已拒绝访问相册权限,请在设置中手动开启。");
} else if (status === PHAuthorizationStatus.Limited) {
console.log("相册权限为有限访问。");
}
plus.ios.deleteObject(PHPhotoLibrary);
resolve(false)
}
})
} 优化官方推荐的uni.authorize文档中permission.js中的相册授权方法,判断是否有授权没有则弹窗请求授权。
发现很多小伙伴有这个需求,自己也在网上搜索了一番无果。
在此分享出来,方便大家开发。
// 判断相册权限是否开启 resolve()返回值可以根据需求更具体一点,在业务中拿到状态码后弹窗提示用户是否要去设置页修改权限
function judgeIosPermissionPhotoLibrary() {
return new Promise((resolve, reject) => {
var PHAuthorizationStatus = {
NotDetermined: 0, // 未申请过权限
Restricted: 1, // 拒绝
Denied: 2, // 拒绝
Authorized: 3, // 拥有
Limited: 4 // iOS 14 新增
};
if (!PHPhotoLibrary) {
var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");
}
var status = PHPhotoLibrary.authorizationStatus();
if (status === PHAuthorizationStatus.NotDetermined) {
PHPhotoLibrary.requestAuthorization(() => {
const status = PHPhotoLibrary.authorizationStatus(); {
if (status === PHAuthorizationStatus.Authorized) {
plus.ios.deleteObject(PHPhotoLibrary);
resolve(true)
} else {
plus.ios.deleteObject(PHPhotoLibrary);
resolve(false)
}
}
})
} else if (status === PHAuthorizationStatus.Authorized) {
plus.ios.deleteObject(PHPhotoLibrary);
resolve(true)
} else {
if (status === PHAuthorizationStatus.Denied || status === PHAuthorizationStatus.Restricted) {
console.log("您已拒绝访问相册权限,请在设置中手动开启。");
} else if (status === PHAuthorizationStatus.Limited) {
console.log("相册权限为有限访问。");
}
plus.ios.deleteObject(PHPhotoLibrary);
resolve(false)
}
})
} 收起阅读 »











