MAUI开发Android程序使PDA扫码广播消息转发至Web页面
前言
公司系统的手持终端(PDA)是用的Vue写的前端代码
在PDA上用浏览器直接打开Web页面
PDA扫码的时候,输出模式直接用模拟键盘按键的方式输出
这样在Web页面上,如果一个输入框在当前有焦点的情况下
PDA扫码的内容会直接填充至对应的输入框
正常的话这样没有问题
但是最近有一个项目,PDA不是我们提供。
而是使用现有PDA,要把我们的系统在现有PDA上使用
但是现有PDA使用的扫码输出方式是用的Andorid广播
因为现有PDA不只有我们一家系统,所以不能修改扫码输出方式
这样就使得我们不得不对系统进行改造
思考方法
因为系统已经使用Vue框架已经开发好的。不可能为了这么点事情
把PDA上的系统全用Android重新来开发一次,那样成本太大
所以想的办法也很简单。
就是做一个Andorid的程序套壳,然后在程序里使用WebView加载现有系统
这样在Andorid程序里接收PDA扫码的广播信号
然后收到信号后,把扫码到的内容使用WebView的JavaScript调用方式
传输到Web页面接收。
这样就实现了在Web页面上接收Andorid的广播消息功能
实现过程
因为我们没有Andorid的开发人员,
只有前端的NodeJs和后端的.Net开发人员
所以开发Android程序框架也很自然
只能是.Net开发人员使用 Xamarin.Android 或者 MAUI 这两种方式
因为只是一个Android的程序套壳,界面也不是很难
所以就当一次小试验,自然也就想尝试一下微软最新的MAUI了
安装MAUI
因为我们原来开发没有使用过MAUI,虽然机器上有VS2022
但是也要添加MAUI的开发功能
安装MAUI参考链接
创建MAUI应用
参照微软的文档一步步操作创建MAUI应用
创建MAUI应用参考链接
在主界面添加WebView
我们设置WebView的浏览地址为我们系统的Web地址
此处设置为:http://10.76.99.70:8081/
把MainPage.xaml文件修改如下
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="WMS.RFWrap.MainPage">
<ScrollView>
<StackLayout>
<WebView x:Name="mainWeb" Source="http://10.76.99.70:8081/" VerticalOptions="FillAndExpand"></WebView>
</StackLayout>
</ScrollView>
</ContentPage>
接收Android广播消息
在Platforms.Andorid目录下创建广播消息接收代码
其中,IntentFilter设置的值要与PDA上配置的广播消息代码一至
namespace WMS.RFWrap.Platforms.Android;
[BroadcastReceiver(Enabled = true, Exported = true)]
[IntentFilter(new[] { "android.intent.ACTION_DECODE_DATA" })]
public class ScanBroadcastReceiver : BroadcastReceiver
{
private Action<string> ScanDataAccepted;
public ScanBroadcastReceiver()
{
}
public ScanBroadcastReceiver(Action<string> action)
{
this.ScanDataAccepted = action;
}
public override void OnReceive(Context context, Intent intent)
{
var value = intent.GetStringExtra("barcode_string");
ScanDataAccepted?.Invoke(value);
}
}
在Platforms.Andorid.MainActivity.cs文件注册广播接收
public class MainActivity : MauiAppCompatActivity
{
public ScanBroadcastReceiver scanReceiver { get; set; }
/// <summary>
/// 委托事件
/// </summary>
public static Action<string> ScanDeviceRecevied;
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
scanReceiver = new ScanBroadcastReceiver((barcode) =>
{
ScanDeviceRecevied?.Invoke(barcode);
});
}
protected override void OnResume()
{
base.OnResume();
RegisterReceiver(scanReceiver, new Android.Content.IntentFilter("android.intent.ACTION_DECODE_DATA"));
}
protected override void OnPause()
{
UnregisterReceiver(scanReceiver);
base.OnPause();
}
}
在MainPage.xaml.cs文件里编写接收代码
接收到广播扫码内容后,通过WebView的Eval方法来执行Web页面方法
我们这里使用的是window.postMessage协议通讯
window.postMessage参考文档
我们调用postMessage方法,把内容传输到Web页面
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
#if ANDROID
//var mainActivity = Platform.CurrentActivity as MainActivity;
MainActivity.ScanDeviceRecevied = (barcode) => {
Console.WriteLine(barcode);
OnScanBarcode(barcode);
};
#endif
}
public void OnScanBarcode(string barcode)
{
if (mainWeb != null)
{
var data = new { type = "barcode", data = barcode };
var json = JsonSerializer.Serialize(data);
var script = $"postMessage({json},'*')";
mainWeb.Eval(script);
}
}
}
在前端Vue页面接收WebView传过来的postMessage信号
因为我们使用的是postMessage信号,所以在前端只要监听message事件就可以了
message事件与Vue无关,所有Web页都可以使用
然后在onScanMsg回调方法里面处理对应的数据,就能正常接收信息了
window.addEventListener('message', onScanMsg)
<template>
<router-view />
</template>
<script>
import { provide, ref, reactive, toRaw, onMounted, onUnmounted } from 'vue'
import { useStore } from 'vuex'
export default {
setup() {
const store = useStore() //使用store
onMounted(() => {
window.addEventListener('message', onScanMsg)
})
const onScanMsg = (e) => {
console.log('onScanMsg', e)
if (typeof e.data === 'object' && e.data.type === 'barcode')
store.commit('SET_SCANCODE', e.data.data)
}
return {}
}
}
</script>
<style>
</style>
本示例是接收到信息后,通过vuex设置全局Store值
这样在要获取扫码的页面只用监听Store值变化,就可以接收到最新的扫码结果
<template>
<van-nav-bar title="扫码" left-text="数据" left-arrow fixed placeholder @click-left="$router.replace({ path: '/Home/DataIndex' })" />
<van-field v-model="scancode" label="数据" placeholder="请扫码" />
<van-list>
<van-cell-group>
<van-cell v-for="item in list" :key="item" :title="item" />
</van-cell-group>
</van-list>
</template>
<script>
import { defineComponent, reactive, ref, toRefs, toRaw, onMounted, watch, computed, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
export default {
setup() {
const store = useStore()//使用store
const scancode = computed(() => store.getters.scancode)
const list = ref([])
watch(() => store.getters.scancode, (newValue) => {
list.value.push(newValue)
})
return {
scancode,
list
}
}
}
</script>
<style>
</style>
最终实现结果
MAUI开发Android程序使PDA扫码广播消息转发至Web页面的更多相关文章
- 鼎捷ERP二维码整体解决方案 Tiptop GP条码管理系统 鼎捷ERP移动解决方案 鼎捷条码扫描 鼎捷WMS仓库移动扫码 鼎捷安卓PDA扫码方案 Tiptop 出入库盘点出货条码扫码 提供源码
本人在ERP实施公司做顾问四五年,参与企业实施ERP十多个项目,非常熟悉企业ERP流程,在实施过程遇到众多问题,提出了不少根据企业具体情况的解决方案. 最近定制开发了一套适合企业的条码扫码平台,基于鼎 ...
- 小米手机(HM1SW)高通开发android程序全过程
小米手机(HM1SW)开发android程序全过程 修改历史: 2016年5月9日 -------- 整理文档 a.增加了手机基本信息. b.增加360手机助手连接说明 2016年2月26日 - ...
- Eclipse开发Android程序如何在手机上运行
android开发不论是在真机上调试还是最终发布到真机上都非常简单,过程如下: 1.安装usb驱动 手机要能与电脑相连,当然要安驱动了.效果就是你插入手机,电脑显示驱动已识别.驱动安装的官方教程:ht ...
- 介绍开发Android手持终端PDA盘点APP软件
介绍开发Android手持终端PDA盘点APP软件 软件需要自动识别我导入的TXT格式或者excl格式的盘点表,然后自动生成一个复盘数据,做AB比对,界面上需要显示的有总数量,单品数量,条码,编码,商 ...
- 用C++语言开发Android程序 配置开发环境
转自:http://www.cnblogs.com/yaotong/p/3622430.html 用C++语言开发Android程序 配置开发环境 如果你是一个C++语言的死忠,你喜欢C++语言到 ...
- 微信小程序实现连续扫码功能(uniapp)
注:本文使用的是 uniapp 语法. 微信小程序提供了扫码API:wx.scanCode,但它只能扫一次码,想要实现连续扫码,需要借用 camera 组件.camera 组件不仅能拍照,还具有扫码功 ...
- 使用Visual Studio 2015开发Android 程序
环境配置: 操作系统:win 7 64位 IDE:Visual Studio 2015 SDK:installer_r24.3.3-windows 安装前提: 编辑hosts文件(在附件可下载)因为安 ...
- (转)使用Visual Studio 2015开发Android 程序
环境配置: 操作系统:win 7 64位 IDE:Visual Studio 2015 SDK:installer_r24.3.3-windows 安装前提: 编辑hosts文件(在附件可下载)因为安 ...
- UNIAPP实现PDA扫码
目前我接触到了两种方法,以扫码pda安卓采集器(可以直接理解为手机上有个激光扫码)的设置划分. 1.扫描设置 --> 键盘方式输出(键盘类型:物理键盘),注意设置要看具体的型号: 2.扫码设置 ...
- 简单谈谈eclipse下搭建PhoneGap环境来开发Android程序 - linux86(转)
原来在逛园子的时候一不小心发现了一个新概念“PhoneGap”简称PG,我一直都喜欢追逐新事物,自然就产生了好奇心.于是乎我就在百度上面Google了一下PhoneGap是什么东西.简单的说就是用另一 ...
随机推荐
- unity 普通项目转URP项目
1.导入UniversalRP (PackageManager 导入)2.创建Pipeline Asset creat-->Rendering-->UniversalRender ...
- PHP 二维按照某个字段对数组排序
function arraySort($arr, $keys, $type = 'asc') {//二维按照某个字段对数组排序 $keysvalue = $new_array = array(); f ...
- ffmpeg的常用参数
-encoders 查看支持的编码器 Intel处理器的核心显卡支持的编码器带有qsv后缀(Intel quick sync video acceleration) NVIDIA独立显卡 ...
- (Winform程序带源码) 弹出输入框和获取输入框的值
弹出输入框和获取输入框的值: private void button1_Click(object sender, EventArgs e) { string returnValue = Microso ...
- c++中文编码格式
c++程序中涉及到中文字符的输入输出以及其他操作经常会出现乱码.乱码主要是由于程序的源文件编码.可执行文件编码以及程序运行环境的编码不匹配导致.比如,c++源程序文件编码为GB18030, 在源程序中 ...
- Win32窗口设置为透明
可以使用以下方法将Win32窗口设置为透明: 定义窗口类时,在WNDCLASSEX结构体中设置hbrBackground成员为NULL. 在窗口创建时,使用WS_EX_LAYERED风格和SetLay ...
- springboot--yaml数据读取的三种方式
结果:
- 5分钟带你彻底搞懂async底层实现原理!
ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖.研究 async 的原理,就必须先弄清楚 Genera ...
- 全网最详细中英文ChatGPT-GPT-4示例文档-信息智能提取从0到1快速入门——官网推荐的48种最佳应用场景(附python/node.js/curl命令源代码,小白也能学)
目录 Introduce 简介 setting 设置 Prompt 提示 Sample response 回复样本 API request 接口请求 python接口请求示例 node.js接口请求示 ...
- 一次线上OOM问题的个人复盘
原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,非公众号转载保留此声明. 上个月,我们一个java服务上线后,偶尔会发生内存OOM(Out Of Memory)问题,但由于OOM导致服务 ...