HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

SubNVue 在 iOS模拟器中

subnvue

const subNVue = uni.getSubNVueById('xxx')
在iOS模拟器中,一个侧滑就让 subNVue Unmounted 了, 然后就打不开了

const subNVue = uni.getSubNVueById('xxx')
在iOS模拟器中,一个侧滑就让 subNVue Unmounted 了, 然后就打不开了

onResize 和 onWindowResize

在uniapp nvue页面中, 都会多次执行.


onResize 在第几个打开页面, 执行几次.

uni.onWindowResize 打开几个页面,执行几次.


App.vue 里定义

    function windowResizeFn(res) {  
        if (res.size.windowWidth > res.size.windowHeight) {  
            console.log('当前是横屏', res);  
        } else {  
            console.log('当前是竖屏', res);  
        }  
        uni.$emit('windowResize', res)  
    }  
    export default {  
        onLaunch: function() {  
            console.log('App Launch')  
            uni.onWindowResize(windowResizeFn);  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }

在页面 uni.$on('windowResize', data => { }), 防止重复触发.

继续阅读 »

在uniapp nvue页面中, 都会多次执行.


onResize 在第几个打开页面, 执行几次.

uni.onWindowResize 打开几个页面,执行几次.


App.vue 里定义

    function windowResizeFn(res) {  
        if (res.size.windowWidth > res.size.windowHeight) {  
            console.log('当前是横屏', res);  
        } else {  
            console.log('当前是竖屏', res);  
        }  
        uni.$emit('windowResize', res)  
    }  
    export default {  
        onLaunch: function() {  
            console.log('App Launch')  
            uni.onWindowResize(windowResizeFn);  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }

在页面 uni.$on('windowResize', data => { }), 防止重复触发.

收起阅读 »

部分条件下避坑u-parse

如果你是Vue2.0 配合uView1.0版本的话,在打包H5的时候一定要避坑“u-parse”打包H5的时候会自动打包出来一个wx.canIUse,这会导致H5内嵌到微信小程序的web-view时候出现“连接服务器超时,点击屏幕重试”

如果你是Vue2.0 配合uView1.0版本的话,在打包H5的时候一定要避坑“u-parse”打包H5的时候会自动打包出来一个wx.canIUse,这会导致H5内嵌到微信小程序的web-view时候出现“连接服务器超时,点击屏幕重试”

FaceAI人脸识别SDK Uni-App 插件

活体检测

FaceAI人脸识别SDK Uni-App 插件

保护伞FaceAI SDK是设备端可离线不联网Android 人脸识别、动作及近红外IR活体检测、人脸图质量检测
以及人脸搜索(1:N和M:N)SDK,可快速集成实现人脸识别,人脸搜索功能。
所有识别都在设备终端本地离线执行,SDK不用联网,不保存不上传任何人脸信息敏感资料更具隐私安全

FaceAI SDK主页:https://github.com/AnyLifeZLB/FaceVerificationSDK
FaceAI App Android 体验包 https://www.pgyer.com/faceVerify (体验全程可开飞行模式✈️)

2023年我们开始封装移动端FaceAI人脸识别SDK,逐步完善后为了Uni-App 开发者更加方便的接入本SDK
我们封装了UniPlugin-FaceAISDK 插件,插件一期共提供4个方法接口

  • 1 isFaceExist(jsonObject, callback) 检测是否存在faceID 对应的人脸
  • 2 addFaceImage(jsonObject, callback) 调用SDK 录入人脸
  • 3 faceVerify(jsonObject, callback) 人脸识别
  • 4 insertFace2SDK(jsonObject, callback) 同步账号在服务器上的人脸到SDK

插件的使用需要你熟悉Uni-App的开发的基础知识以及少量的原生插件集成经验,相关知识可以参考Uni-App官网

插件集成说明

  • 如果你是Uni-App 你可以用HBuilderX4.5.7打开uniapp示例工程源码/unipluginDemo 自定义基座运行
  • 如果你想根据FaceAI SDK 拓展更多功能你可以使用Android Studio 2024.3.1导入本工程完善

欢迎大家遇到问题提issue,我会及时回复的。

1. isFaceExist(jsonObject, callback)

检测是否存在faceID 对应的人脸,如果没有你可以先检查你的服务器是否存在,服务器也不存在可以调用SDK
的方法addFaceImage 进行录入人脸

faceID 你要检测的人脸ID标识符,在你的业务体系中唯一不可重复,你可以用账户名,身份证号等

参数 jsonObject 就一个字段 faceID
参数 callback 会返回检测的结果 true 存在 false 不存在

2. addFaceImage(jsonObject, callback)

调用SDK 录入人脸,SDK 会对人脸录入进行合规检查
参数 jsonObject 就一个字段 faceID
参数 callback 会返回添加结果json
{
"code": "0 用户取消/失败, 1:录入完成",
"msg":"code 对应的提示",
"faceID": "录入人脸对应的face ID",
"faceBase64":"人脸图像faceBase64转码"
}

3. faceVerify(jsonObject, callback)

调用SDK 录入人脸,SDK 会对人脸录入进行合规检查
参数 jsonObject
{
"faceID": "yourFaceID_uniApp", //对应需要识别的人脸ID
"threshold": 0.85, //人脸识别相似度阈值
"silentThreshold": 0.85,//活体分数通过阈值
"faceLivenessType": 0, //活体检测类型 //0 SILENT_MOTION; 1 MOTION; 2 SILENT; 3 NONE;
"motionStepSize": 1, //动作活体检测动作数量。比如2 表示需要用户做2个动作才能通过活体检测
"verifyTimeOut": 16 //活体检测超时时间 秒
}

参数 callback 会返回添加识别json
{
"code": "0 用户取消/失败, 1:录入完成",
"msg":"code 对应的提示",
"faceID": "录入人脸对应的face ID",
"faceBase64":"人脸图像faceBase64转码"
}

4. insertFace2SDK(jsonObject, callback)

同步账号在服务器上的人脸到SDK,比如你在A设备登录的时候已经录入人脸并且同步到你的服务器了
那么登录B设备后不用调用SDK 再次录入人脸,你仅仅需要把人脸数据同步到SDK 就可以

觉得本插件对你有帮助的话,欢迎给个Star 支持一下哦!祝你生活愉快

继续阅读 »

FaceAI人脸识别SDK Uni-App 插件

保护伞FaceAI SDK是设备端可离线不联网Android 人脸识别、动作及近红外IR活体检测、人脸图质量检测
以及人脸搜索(1:N和M:N)SDK,可快速集成实现人脸识别,人脸搜索功能。
所有识别都在设备终端本地离线执行,SDK不用联网,不保存不上传任何人脸信息敏感资料更具隐私安全

FaceAI SDK主页:https://github.com/AnyLifeZLB/FaceVerificationSDK
FaceAI App Android 体验包 https://www.pgyer.com/faceVerify (体验全程可开飞行模式✈️)

2023年我们开始封装移动端FaceAI人脸识别SDK,逐步完善后为了Uni-App 开发者更加方便的接入本SDK
我们封装了UniPlugin-FaceAISDK 插件,插件一期共提供4个方法接口

  • 1 isFaceExist(jsonObject, callback) 检测是否存在faceID 对应的人脸
  • 2 addFaceImage(jsonObject, callback) 调用SDK 录入人脸
  • 3 faceVerify(jsonObject, callback) 人脸识别
  • 4 insertFace2SDK(jsonObject, callback) 同步账号在服务器上的人脸到SDK

插件的使用需要你熟悉Uni-App的开发的基础知识以及少量的原生插件集成经验,相关知识可以参考Uni-App官网

插件集成说明

  • 如果你是Uni-App 你可以用HBuilderX4.5.7打开uniapp示例工程源码/unipluginDemo 自定义基座运行
  • 如果你想根据FaceAI SDK 拓展更多功能你可以使用Android Studio 2024.3.1导入本工程完善

欢迎大家遇到问题提issue,我会及时回复的。

1. isFaceExist(jsonObject, callback)

检测是否存在faceID 对应的人脸,如果没有你可以先检查你的服务器是否存在,服务器也不存在可以调用SDK
的方法addFaceImage 进行录入人脸

faceID 你要检测的人脸ID标识符,在你的业务体系中唯一不可重复,你可以用账户名,身份证号等

参数 jsonObject 就一个字段 faceID
参数 callback 会返回检测的结果 true 存在 false 不存在

2. addFaceImage(jsonObject, callback)

调用SDK 录入人脸,SDK 会对人脸录入进行合规检查
参数 jsonObject 就一个字段 faceID
参数 callback 会返回添加结果json
{
"code": "0 用户取消/失败, 1:录入完成",
"msg":"code 对应的提示",
"faceID": "录入人脸对应的face ID",
"faceBase64":"人脸图像faceBase64转码"
}

3. faceVerify(jsonObject, callback)

调用SDK 录入人脸,SDK 会对人脸录入进行合规检查
参数 jsonObject
{
"faceID": "yourFaceID_uniApp", //对应需要识别的人脸ID
"threshold": 0.85, //人脸识别相似度阈值
"silentThreshold": 0.85,//活体分数通过阈值
"faceLivenessType": 0, //活体检测类型 //0 SILENT_MOTION; 1 MOTION; 2 SILENT; 3 NONE;
"motionStepSize": 1, //动作活体检测动作数量。比如2 表示需要用户做2个动作才能通过活体检测
"verifyTimeOut": 16 //活体检测超时时间 秒
}

参数 callback 会返回添加识别json
{
"code": "0 用户取消/失败, 1:录入完成",
"msg":"code 对应的提示",
"faceID": "录入人脸对应的face ID",
"faceBase64":"人脸图像faceBase64转码"
}

4. insertFace2SDK(jsonObject, callback)

同步账号在服务器上的人脸到SDK,比如你在A设备登录的时候已经录入人脸并且同步到你的服务器了
那么登录B设备后不用调用SDK 再次录入人脸,你仅仅需要把人脸数据同步到SDK 就可以

觉得本插件对你有帮助的话,欢迎给个Star 支持一下哦!祝你生活愉快

收起阅读 »

tailwindcss 发布4版本,有没有人在HBuilder 模版上即成最新版本的tailwindcss

https://tailwindcss.com/最新版

https://tailwindcss.com/最新版

不用postman做接口测试的原因

在做uniapp开发或其他应用开发的时候,现在一般都是前后端分离的,后端开发人员或测试人员需要独立完成接口的测试,不可能等前端同学开发完再做接口单元测试的,因此就需要使用专业的接口测试软件做接口测试。

postman 是最早流行的 API 测试软件,目前来说,使用 postman 的人还有很多。但是假如是使用高级的功能。postman 还是略显不足的。

比如团队分享、API 生成文档等高级功能,需要连接外国的服务器,经常被拦掉或速度很慢。使用高级功能,外国的缴费也比较麻烦。

因此,越来越多人开始使用国内的 API 测试软件来做 API 测试,而且用户体验和功能方面,国内的软件也开始渐渐地比 postman 更好用。

我现在使用的比较多的是 yunedit-post

yunedit-post 是全中文的 API 测试工具,功能也比较全,参数可以使用变量、还有后置执行 sql 语句等清理测试产生的脏数据等功能,大大地减少我们手工操作的工作量。

下面介绍下 yunedit-post 它的高级功能特性:

1、输入参数可以使用本地变量(可以使用后置处理功能将接口的返回值保存到本地变量中,然后下一个接口就可以使用本地变量作为输入参数了),如下图:

2、后置处理 - 保存接口返回结果到本地变量:

往往,一些接口的返回值,是希望作为下一个接口的输入值的,比如登录接口返回的 token,其他的接口都需要带上这个 token,那么就需要后置处理功能,将这个 token 保存到本地变量中了,如下图:

3、后置处理 - 执行 sql 语句功能

调用 API,假如 API 是业务类型的接口,可能会产生业务的数据,而这些数据可能是不希望留下痕迹的。或者会影响下一次测试的。所以就需要清理掉,这样就可以使用后置处理功能,清理希望清理掉的数据,如下图,sql 语句也支持使用本地变量或者接口返回值作为变量:

4、自动化测试功能

既可以使用界面定义接口的执行顺序,也可以使用更灵活的 js 脚本定义接口的执行顺序。

通过自动化测试功能,就可以将一组接口的测试,简化为一个测试步骤,只关注测试结果,不需要每一个接口都手工去调用。如下图所示:

5、一键生成接口分享文档:

一键就可以生成接口分享文档,生成的接口文档例子如下图所示:

继续阅读 »

在做uniapp开发或其他应用开发的时候,现在一般都是前后端分离的,后端开发人员或测试人员需要独立完成接口的测试,不可能等前端同学开发完再做接口单元测试的,因此就需要使用专业的接口测试软件做接口测试。

postman 是最早流行的 API 测试软件,目前来说,使用 postman 的人还有很多。但是假如是使用高级的功能。postman 还是略显不足的。

比如团队分享、API 生成文档等高级功能,需要连接外国的服务器,经常被拦掉或速度很慢。使用高级功能,外国的缴费也比较麻烦。

因此,越来越多人开始使用国内的 API 测试软件来做 API 测试,而且用户体验和功能方面,国内的软件也开始渐渐地比 postman 更好用。

我现在使用的比较多的是 yunedit-post

yunedit-post 是全中文的 API 测试工具,功能也比较全,参数可以使用变量、还有后置执行 sql 语句等清理测试产生的脏数据等功能,大大地减少我们手工操作的工作量。

下面介绍下 yunedit-post 它的高级功能特性:

1、输入参数可以使用本地变量(可以使用后置处理功能将接口的返回值保存到本地变量中,然后下一个接口就可以使用本地变量作为输入参数了),如下图:

2、后置处理 - 保存接口返回结果到本地变量:

往往,一些接口的返回值,是希望作为下一个接口的输入值的,比如登录接口返回的 token,其他的接口都需要带上这个 token,那么就需要后置处理功能,将这个 token 保存到本地变量中了,如下图:

3、后置处理 - 执行 sql 语句功能

调用 API,假如 API 是业务类型的接口,可能会产生业务的数据,而这些数据可能是不希望留下痕迹的。或者会影响下一次测试的。所以就需要清理掉,这样就可以使用后置处理功能,清理希望清理掉的数据,如下图,sql 语句也支持使用本地变量或者接口返回值作为变量:

4、自动化测试功能

既可以使用界面定义接口的执行顺序,也可以使用更灵活的 js 脚本定义接口的执行顺序。

通过自动化测试功能,就可以将一组接口的测试,简化为一个测试步骤,只关注测试结果,不需要每一个接口都手工去调用。如下图所示:

5、一键生成接口分享文档:

一键就可以生成接口分享文档,生成的接口文档例子如下图所示:

收起阅读 »

subNVue 视频播放

subnvue

subNVue(type=popup)里有视频, Android手机侧滑关闭popup,视频仍然在播放, 可通过以下方式解决:

onReady(function() {          
        // 在Android中通过此方法可控制侧滑关闭popup, 如果让popup关闭, onHide onBackPress等方法都不触发, 视频仍然在播放.  
        plus.key.addEventListener("backbutton", function(){  
            // 不会执行  
            console.log('backbutton press', data)  
            closePlayer()  
        });  
    })
继续阅读 »

subNVue(type=popup)里有视频, Android手机侧滑关闭popup,视频仍然在播放, 可通过以下方式解决:

onReady(function() {          
        // 在Android中通过此方法可控制侧滑关闭popup, 如果让popup关闭, onHide onBackPress等方法都不触发, 视频仍然在播放.  
        plus.key.addEventListener("backbutton", function(){  
            // 不会执行  
            console.log('backbutton press', data)  
            closePlayer()  
        });  
    })
收起阅读 »

如何在 uniapp 中使用微信小程序原生 UI 库,比如 ant-design-mini/weui?

weui

转自 https://ask.dcloud.net.cn/question/206730

如何在 uniapp 中使用微信小程序原生 UI 库,比如 ant-design-mini/weui?

原生UI 库是指只适配原生小程序写法的 UI 库,在 uniapp 中需要做简单调整, ant design 组件库提供的 使用说明

这里举例 uni-app如何接入 weui:

  1. 在 uniapp 中创建 wxcmoponents 文件夹,表示内部为原生组件
  2. cd wxcomponets && npm init -y && npm i weui-miniprogram 安装 UI 库,在微信小程序工具里 “工具”菜单 --> “构建 npm”
  3. 复制 weui-miniprogram/weui-wxss/dist/style/weui.wxss 到项目 style 目录,并改名为 weui.css,在 app.vue 或者 main.js 中导入,这个是 weui 全局样式
  4. 在使用 weui 组件库的页面引入,参考下面 pages.json,下面代码表示在微信里引入了 ant-button 和 mp-dialog
 "pages": [{  
      "path": "pages/index/index",  
      "style": {  
        "navigationBarTitleText": "uni-app",  
        "usingComponents": {  
          // #ifdef MP-WEIXIN  
          "ant-button": "/wxcomponents/miniprogram_npm/antd-mini/Button/index",  
          "mp-dialog": "/wxcomponents/miniprogram_npm/weui-miniprogram/dialog/dialog"  
          // #endif  
        }  
      }  
    },
  1. 在页面中就可以正常使用 ant-design/weui 组件了
<template>  
  <view>  
    <view>123</view>  
   <ant-button type="default" danger icon="ForbidFill">带图标按钮</ant-button>  

    <mp-dialog title="test" :show="true" @buttontap="tapDialogButton" :buttons="buttons">  
        <view>test content</view>  
    </mp-dialog>  
  </view>  
</template>  

<script>  
  export default{  
    data(){  
      return {  
         buttons: [{text: '取消'}, {text: '确认'}]  
      }  
    },  
    methods:{  
      tapDialogButton(){  
        console.log('tap');  
      }  
    }  
  }  
</script>

效果图如下:

参考 weui 使用说明

继续阅读 »

转自 https://ask.dcloud.net.cn/question/206730

如何在 uniapp 中使用微信小程序原生 UI 库,比如 ant-design-mini/weui?

原生UI 库是指只适配原生小程序写法的 UI 库,在 uniapp 中需要做简单调整, ant design 组件库提供的 使用说明

这里举例 uni-app如何接入 weui:

  1. 在 uniapp 中创建 wxcmoponents 文件夹,表示内部为原生组件
  2. cd wxcomponets && npm init -y && npm i weui-miniprogram 安装 UI 库,在微信小程序工具里 “工具”菜单 --> “构建 npm”
  3. 复制 weui-miniprogram/weui-wxss/dist/style/weui.wxss 到项目 style 目录,并改名为 weui.css,在 app.vue 或者 main.js 中导入,这个是 weui 全局样式
  4. 在使用 weui 组件库的页面引入,参考下面 pages.json,下面代码表示在微信里引入了 ant-button 和 mp-dialog
 "pages": [{  
      "path": "pages/index/index",  
      "style": {  
        "navigationBarTitleText": "uni-app",  
        "usingComponents": {  
          // #ifdef MP-WEIXIN  
          "ant-button": "/wxcomponents/miniprogram_npm/antd-mini/Button/index",  
          "mp-dialog": "/wxcomponents/miniprogram_npm/weui-miniprogram/dialog/dialog"  
          // #endif  
        }  
      }  
    },
  1. 在页面中就可以正常使用 ant-design/weui 组件了
<template>  
  <view>  
    <view>123</view>  
   <ant-button type="default" danger icon="ForbidFill">带图标按钮</ant-button>  

    <mp-dialog title="test" :show="true" @buttontap="tapDialogButton" :buttons="buttons">  
        <view>test content</view>  
    </mp-dialog>  
  </view>  
</template>  

<script>  
  export default{  
    data(){  
      return {  
         buttons: [{text: '取消'}, {text: '确认'}]  
      }  
    },  
    methods:{  
      tapDialogButton(){  
        console.log('tap');  
      }  
    }  
  }  
</script>

效果图如下:

参考 weui 使用说明

收起阅读 »

This app was built with the i0S 17.5 SDK. Starting April 24, 2025,

iOS打包

uniapp打包SDK version issue. This app was built with the i0S 17.5 SDK. Starting April 24, 2025, al ioS and iPadoS apps must be built with the i0S 18 SDK or later, included in Xcode 16 or later, in order to be uploaded to App Store Connect or submitted for distribution. (90725)

继续阅读 »

uniapp打包SDK version issue. This app was built with the i0S 17.5 SDK. Starting April 24, 2025, al ioS and iPadoS apps must be built with the i0S 18 SDK or later, included in Xcode 16 or later, in order to be uploaded to App Store Connect or submitted for distribution. (90725)

收起阅读 »

uniapp对接热敏打印机打印,使用蓝牙,usb,局域网

打印 蓝牙打印 uniapp原生插件

使用流程(支持安卓和iOS)
引入SDK
引入原生插件包地址如下
https://github.com/oldfive20250214/UniPrinterDemo

连接设备
安卓支持经典蓝牙、ble蓝牙、usb、局域网(参考API)

iOS支持ble蓝牙、局域网(参考API)

详见 [详见
技术交流WX:17762569716

继续阅读 »

使用流程(支持安卓和iOS)
引入SDK
引入原生插件包地址如下
https://github.com/oldfive20250214/UniPrinterDemo

连接设备
安卓支持经典蓝牙、ble蓝牙、usb、局域网(参考API)

iOS支持ble蓝牙、局域网(参考API)

详见 [详见
技术交流WX:17762569716

收起阅读 »

uni.createInnerAudioContext() 音频播放器卡死或者播放不准

uni-app-x

有需要联系 我能解决

有需要联系 我能解决

uniapp 多环境配置打包,比较优雅的解决方案

uniapp 多环境配置打包,比较优雅的解决方案

读取.env.[development|test|staging|production]配置文件进行打包,最终效果如下图可以看到多个环境,
并且我们可以自定义更多的环境配置

前言

由于uniapp的hbuilder开发工具,只提供了development和production的环境编译方式,一般来说,只能做到development和production两个环境的区分。在实际开发中,我们如果有多个环境开发需求和打包需求,尤其是配置多个环境的接口请求地址等配置。
针对这种情况,我在网上找了很多相关的资料,基本都是命令行的方案,使用uniapp的scripts方案也有,但是是把配置信息写到scripts上的,这解决方案也不够优雅,如果有多个配置就显得很拥肿了。

下面,我们一步一步来配置实现如何根据编译环境读取对应的.env文件加载到项目中。(下面只讲vite配置的方式,webpack的配置方式有空再补充)

配置实现

  1. 项目根目录,自行新增对应的配置文件

  1. 在package.json文件添加uni-app的scripts,需要配置几个环境就添加几个,关于这个配置的意思,可以去查看其他相关的文档,这里不展开讲述。

配置好后,点击运行和发行就能看到对应的环境选择项了

此时只是有对应的环境选择项,接下来的思路就是,判断对应的script执行环境,来加载不同的.env配置文件,读取到项目中

  1. 修改vite.config.js文件,重点看注释
import { loadEnv } from 'vite';  
import uni from '@dcloudio/vite-plugin-uni';  
// import viteCompression from 'vite-plugin-compression';  
// https://vitejs.dev/config/  
export default (command, mode) => {//uniapp中,这个mode,不用命令行的添加--mode编译的话,是undefined的  
    let env = undefined;  
    if(!mode){//这里是为了确保mode有值,假如开发人员直接在开发工具选择编译到浏览器,也能兼容到  
        if(process.env.NODE_ENV=='production'){  
            mode = 'production'  
        }else{  
            mode = 'development'  
        }  
    }  
    switch (process.env.UNI_SCRIPT){//这个就是第三步配置的uni-app的script,一一对应判断  
        case 'dev-h5':  
            mode = 'development';  
            break;  
        case 'test-h5':   
            mode = 'test'  
            break;  
        case 'stage-h5':  
            mode = 'staging'  
            break;  
        case 'prod-h5':  
            mode = 'production'  
            break;  
    }  
    env = loadEnv(mode, __dirname,"APP")  
    console.log(`编译${mode}环境`)  
    console.log(env);//此时已经把env配置读取到了,并且这是个json格式,  
    return {//别试图在这里定义mode,试过了,在uniapp中不起作用,目前方案只想到了用define来做  
        envPrefix:'APP_',  
        plugins: [  
            uni()  
        ],  
        server: {  
            host: true,  
            // open: true,  
            port: env.APP_PORT,  
            hmr: {  
                overlay: true,  
            },  
        },  
        define:{//根据vite的官方文档,可以把define定义的变量名,在项目编译时,识别项目文件中的这个变量名直接替换成env配置,我们把这个变量放到config.js文件中,对env配置进行集中管理  
            __VITE_ENV__:JSON.stringify(env)  
        }  
    };  
};
  1. 接下来在项目中由一个config.js文件来集中管理env相关的配置,再暴露出来给其他业务模块调用。

至此,uniapp的多环境配置已经完成!!!
如果需要命令行配置打包,可以参考其他的博客,直接配置命令行就可以,命令行写--mode参数即可。

继续阅读 »

uniapp 多环境配置打包,比较优雅的解决方案

读取.env.[development|test|staging|production]配置文件进行打包,最终效果如下图可以看到多个环境,
并且我们可以自定义更多的环境配置

前言

由于uniapp的hbuilder开发工具,只提供了development和production的环境编译方式,一般来说,只能做到development和production两个环境的区分。在实际开发中,我们如果有多个环境开发需求和打包需求,尤其是配置多个环境的接口请求地址等配置。
针对这种情况,我在网上找了很多相关的资料,基本都是命令行的方案,使用uniapp的scripts方案也有,但是是把配置信息写到scripts上的,这解决方案也不够优雅,如果有多个配置就显得很拥肿了。

下面,我们一步一步来配置实现如何根据编译环境读取对应的.env文件加载到项目中。(下面只讲vite配置的方式,webpack的配置方式有空再补充)

配置实现

  1. 项目根目录,自行新增对应的配置文件

  1. 在package.json文件添加uni-app的scripts,需要配置几个环境就添加几个,关于这个配置的意思,可以去查看其他相关的文档,这里不展开讲述。

配置好后,点击运行和发行就能看到对应的环境选择项了

此时只是有对应的环境选择项,接下来的思路就是,判断对应的script执行环境,来加载不同的.env配置文件,读取到项目中

  1. 修改vite.config.js文件,重点看注释
import { loadEnv } from 'vite';  
import uni from '@dcloudio/vite-plugin-uni';  
// import viteCompression from 'vite-plugin-compression';  
// https://vitejs.dev/config/  
export default (command, mode) => {//uniapp中,这个mode,不用命令行的添加--mode编译的话,是undefined的  
    let env = undefined;  
    if(!mode){//这里是为了确保mode有值,假如开发人员直接在开发工具选择编译到浏览器,也能兼容到  
        if(process.env.NODE_ENV=='production'){  
            mode = 'production'  
        }else{  
            mode = 'development'  
        }  
    }  
    switch (process.env.UNI_SCRIPT){//这个就是第三步配置的uni-app的script,一一对应判断  
        case 'dev-h5':  
            mode = 'development';  
            break;  
        case 'test-h5':   
            mode = 'test'  
            break;  
        case 'stage-h5':  
            mode = 'staging'  
            break;  
        case 'prod-h5':  
            mode = 'production'  
            break;  
    }  
    env = loadEnv(mode, __dirname,"APP")  
    console.log(`编译${mode}环境`)  
    console.log(env);//此时已经把env配置读取到了,并且这是个json格式,  
    return {//别试图在这里定义mode,试过了,在uniapp中不起作用,目前方案只想到了用define来做  
        envPrefix:'APP_',  
        plugins: [  
            uni()  
        ],  
        server: {  
            host: true,  
            // open: true,  
            port: env.APP_PORT,  
            hmr: {  
                overlay: true,  
            },  
        },  
        define:{//根据vite的官方文档,可以把define定义的变量名,在项目编译时,识别项目文件中的这个变量名直接替换成env配置,我们把这个变量放到config.js文件中,对env配置进行集中管理  
            __VITE_ENV__:JSON.stringify(env)  
        }  
    };  
};
  1. 接下来在项目中由一个config.js文件来集中管理env相关的配置,再暴露出来给其他业务模块调用。

至此,uniapp的多环境配置已经完成!!!
如果需要命令行配置打包,可以参考其他的博客,直接配置命令行就可以,命令行写--mode参数即可。

收起阅读 »