MAUI开发Android程序使PDA扫码广播消息转发至Web页面

这篇具有很好参考价值的文章主要介绍了MAUI开发Android程序使PDA扫码广播消息转发至Web页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

公司系统的手持终端(PDA)是用的Vue写的前端代码
在PDA上用浏览器直接打开Web页面
PDA扫码的时候,输出模式直接用模拟键盘按键的方式输出
这样在Web页面上,如果一个输入框在当前有焦点的情况下
PDA扫码的内容会直接填充至对应的输入框
正常的话这样没有问题

但是最近有一个项目,PDA不是我们提供。
而是使用现有PDA,要把我们的系统在现有PDA上使用
但是现有PDA使用的扫码输出方式是用的Andorid广播

因为现有PDA不只有我们一家系统,所以不能修改扫码输出方式
这样就使得我们不得不对系统进行改造

MAUI开发Android程序使PDA扫码广播消息转发至Web页面
MAUI开发Android程序使PDA扫码广播消息转发至Web页面

思考方法

因为系统已经使用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开发Android程序使PDA扫码广播消息转发至Web页面

创建MAUI应用

参照微软的文档一步步操作创建MAUI应用
创建MAUI应用参考链接

在主界面添加WebView

MAUI开发Android程序使PDA扫码广播消息转发至Web页面

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页面

强烈建议PDA设备厂商把 PDA广播信号 集成至 WebView文章来源地址https://www.toymoban.com/news/detail-440360.html

到了这里,关于MAUI开发Android程序使PDA扫码广播消息转发至Web页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序禁止二次转发分享私密消息,动态消息 wx.updateShareMenu

    私密消息:运营人员分享小程序到个人或群之后,该消息只能在被分享者或被分享群内打开,不可以二次转发。 可用于不希望目标客群外的人员看到的分享信息,比如私有化活动的分享 如图:分享和发送到朋友圈都是置灰的 未设置私密消息则可以长按转发 需要使用到以下三

    2024年02月12日
    浏览(58)
  • android开发:获取手机IP和UDP广播

            UDP广播在通讯双方互相不知道对方IP的情况下很有用。这种情形我们也可以用遍历网段来实现,但是比较粗暴,如果网段比较大,不是最多256台主机的C类网段的话,很难做遍历。         UDP广播是解决这种问题的标准方案。         注意,广播和多播是不同的,广

    2024年02月19日
    浏览(39)
  • Android移动应用开发——实验七——小鸭子报数(广播)

        掌握布局与控件的使用方法     掌握有序广播机制,根据广播接收者的优先级顺序接收广播     掌握广播拦截机制 通过合理布局来搭建界面,界面效果如下图所示。采用有序广播方式,将下方小鸭子优先级分别设置1000、800、600。 1、当点击大喇叭后弹出“有序

    2024年02月09日
    浏览(194)
  • 普通二维码扫码进入小程序(详细教程——从配置到开发)

    其实这个功能,微信官方也有进行详细的描述,官方文档,里面有更为详细的描述,下面只是简单的描述开发流程。 进入小程序页面,开发管理-开发设置-扫普通链接二维码打开小程序 这里设置主要给微信扫一扫功能,读取到这个二维码地址,能进入到小程序的页面。 上面

    2024年02月11日
    浏览(54)
  • 微信小程序中调取小程序实现报错:提示 开发版小程序已过期,请在开发者工具中重新扫码的 解决方案

    出现的问题: 解决方法: 我的问题的已解决!

    2024年04月16日
    浏览(52)
  • MAUI Android 关联文件类型

    打开某个文件,后缀是自己想要的类型,在弹出的窗口(用其它应用打开)的列表中显示自己的应用图标 点击后可以获得文件信息以便于后续的操作 以注册 .bin 后缀为例,新建一个 MAUI 项目 修改 PlatformsAndroidMainActivity.cs 调整为 末尾增加了 LaunchMode = LaunchMode.SingleTop 更改启动模式为

    2024年02月06日
    浏览(44)
  • 微信小程序开发实战9_2 小程序页面转发

    小程序页面转发是小程序分享的一个重要方式,在设计小程序应用时就需要考虑那些页面需要实现转发功能,以及页面的转发参数。本节介绍如何进行小程序页面的分享,并介绍如何获取小程序卡片的分享票据。 9.2.1小程序页面转发 微信小程序提供了页面的转发的功能,用户

    2024年02月16日
    浏览(43)
  • 【iOS】消息传递与消息转发

    Objective-C是一门非常动态的语言,以至于确定调用哪个方法被推迟到了运行时,而非编译时。与之相反,C语言使用静态绑定,也就是说在编译期就能决定程序运行时所应该调用的函数,所以在C语言中, 如果某个函数没有实现,编译时是不能通过的。而Objective-C是相对动态的语

    2024年02月16日
    浏览(38)
  • 微信小程序开发,设置小程序为可转发可分享朋友圈

    微信小程序开发过程中,我们需要把小程序设置为用户可以自己转发给好友,也可以把小程序分享到朋友圈,需要按照以下步骤来设置。 1. 在page中需要定义方法             onShareAppMessage(res) {                 // return custom share data when user share.                 c

    2024年02月10日
    浏览(85)
  • 支付宝扫码跳转到支付宝小程序,如何配置二维码跳转到开发版和体验版

    项目: taro3 + vue3 支付宝小程序和微信小程序的扫一扫二维码关联方式的配置差不多,在获取参数上有些差别. 配置 关联到开发版 步骤1 注意:一定要用【预览】按钮,【真机调试】按钮的手机上是没有调试面板得 步骤2 打开【联调设置】-【联调扫码版本】,打开开关 步骤

    2024年02月16日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包