首页 > 其他分享 >maui BlazorWebView+本地html (vue、uniapp等都可以) 接入微信sdk 开发 Android app

maui BlazorWebView+本地html (vue、uniapp等都可以) 接入微信sdk 开发 Android app

时间:2023-03-16 12:58:23浏览次数:50  
标签:uniapp vue BlazorWebView 微信 html System api using Android

 

 

 之前没接触过Android maui 开发,这几天刚摸索,有些不合理的地方欢迎指出。

首先添加微信sdk的绑定库   

nuget 包:Chi.MauiBinding.Android.WeChat 

项目地址:https://github.com/realZhangChi/MauiBinding

在项目目录 Platforms---Android 下建立文件夹wxapi,在wxapi文件夹下添加WXEntryActivity.cs,用来接收微信sdk的回调信息(Android接入指南 | 微信开放文档 (qq.com)),建好后修改代码为:

 

 

namespace MauiApp7.Platforms.Android.wxapi
{

    //将下面的中文"包名"替换成你实际的包名
    [Activity(Name = "包名.WXEntryActivity", Exported = true, TaskAffinity = "包名", LaunchMode = LaunchMode.SingleTask, Label = "微信回调")]
    //特别注意WXEntryActivity 是集成的Activity 不是MauiAppCompatActivity
    public class WXEntryActivity : Activity, IWXAPIEventHandler
    {
        private const string APP_ID = "xxxx";//更改为你自己在微信开放平台应用的appId
        private IWXAPI api;
    
        protected override void OnCreate(Bundle savedInstanceState)
        {
          
            base.OnCreate(savedInstanceState);
            api = WXAPIFactory.CreateWXAPI(this, APP_ID, false);
            try
            {
                Intent intent = this.Intent;
                api.HandleIntent(intent, this);
            }
            catch (Exception e)
            {
                Console.WriteLine("==========执行了OnCreate Exception:" + e.Message);
            }
        }
        public new void Dispose()
        {
           
            this.Dispose();
        }
        protected override void OnNewIntent(Intent intent)
        {
          
            base.OnNewIntent(intent);
            this.Intent = intent;
            api.HandleIntent(intent, this);

        }

        public void OnReq(BaseReq p0)
        {

         
            Finish();
        }

        public void OnResp(BaseResp p0)
        {
            //这里接收微信发来的消息
            if (p0.Type == 1)
            {
                if (p0.ErrCode_ == 0)
                {
                    SendAuth.Resp authResp = (SendAuth.Resp)p0;
                  
                }
                else
                {
                    SendAuth.Resp authResp = (SendAuth.Resp)p0;
                 
                }

            }
            Finish();
         
        }
    }
}

注意:这个WXEntryActivity.cs 中的代码调试时进不去断点,而不是不执行(执行调试时没进断点一直认为不执行里面的方法,后面加了日志打印发现能打印出日志,实际是执行了的),需要手动添加日志打印。这个文件我只是随便加了几个回调信息,它可以接收所有微信的回调,具体的你自己修改。

另外这里接收到微信回调信息后如何通知静态html 我没找到好的解决方法使用了个绕弯路的方法,就是在调需要回调信息的方法时(例如微信登录,支付等),先链接服务器端的websocket,链接后在调用方法,接收到微信回调信息时向远程服务器发送个请求,远程服务器接收到请求通过websocket通知html。如果各位有更好的方法麻烦通知下我谢谢。

在根目录创建一个静态类PublicMethods.cs (类名位置都可以自定义,这个静态类主要给html js 调用使用的,js调用服务端方法 从 ASP.NET Core Blazor 中的 JavaScript 函数调用 .NET 方法 | Microsoft Learn

注意其中的 #if ANDROID  IOS 指在不同的平台下执行操作

using Microsoft.JSInterop;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Text.Json;
using System.Threading.Tasks;
using static System.Runtime.InteropServices.JavaScript.JSType;
#if ANDROID
using Android.Content;
using Android.Views;
using Android.Runtime;
using Android.Net;
using Com.Tencent.MM.Opensdk.Modelmsg;
using Com.Tencent.MM.Opensdk.Openapi;
using System.Runtime.InteropServices.JavaScript;
using Org.Json;
#elif IOS
using UIKit;
#endif
namespace MauiApp7
{
   
    public static class PublicMethods
    {
     //微信登录 [JSInvokable] public static Task WxLogin() { #if ANDROID IWXAPI api = WXAPIFactory.CreateWXAPI(Android.App.Application.Context, "wx00962a9afb38e1e9", true); var isReg = api.RegisterApp("wx00962a9afb38e1e9"); if (isReg) { SendAuth.Req req = new SendAuth.Req(); req.Scope = "snsapi_userinfo"; // 只能填 snsapi_userinfo req.State = "wechat_sdk_demo_test"; api.SendReq(req); } Console.WriteLine("微信登录方法"); #endif return Task.FromResult(0); }
     //微信分享 [JSInvokable] public static Task WxShare() { #if ANDROID IWXAPI api = WXAPIFactory.CreateWXAPI(Android.App.Application.Context, "wx00962a9afb38e1e9", true); var isReg = api.RegisterApp("wx00962a9afb38e1e9"); if (isReg) { string text="test"; //初始化一个 WXTextObject 对象,填写分享的文本内容 WXTextObject textObj = new WXTextObject(); textObj.Text = text; //用 WXTextObject 对象初始化一个 WXMediaMessage 对象 WXMediaMessage msg = new WXMediaMessage(); msg.MediaObject_ = textObj; msg.Description = text; SendMessageToWX.Req req = new SendMessageToWX.Req(); req.Transaction = Guid.NewGuid().ToString("N"); req.Message = msg; req.Scene = SendMessageToWX.Req.WXSceneSession; //调用api接口,发送数据到微信 api.SendReq(req); } Console.WriteLine("微信分享方法"); #endif return Task.FromResult(0); } } }

至此服务端代码完毕,下面时html代码

1.新建maui Blazor应用,修改MainPage.xaml 中的代码,删除BlazorWebView 下子内容,修改后的代码为

  <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html"  BlazorWebViewInitialized="blazorWebView_BlazorWebViewInitialized">
      
    </BlazorWebView>

修改MainPage.xaml.cs中代码添加BlazorWebViewInitialized 事件,此事件是允许BlazorWebView在Android平台下能够同时访问http和https的混合请求,需搭配android:usesCleartextTraffic="true" 使用 具体参考 maui BlazorWebView Android 中混合使用https和http - 落叶子 - 博客园 (cnblogs.com)

  private void blazorWebView_BlazorWebViewInitialized(object sender, Microsoft.AspNetCore.Components.WebView.BlazorWebViewInitializedEventArgs e)
        {
           
#if ANDROID
          e.WebView.Settings.MixedContentMode = Android.Webkit.MixedContentHandling.AlwaysAllow;
#endif
        }

 

2.将静态html或者打包好的vue、uniapp项目拷贝到wwwroot目录下(先删除此目录下项目生成的文件),因为我测试是用的uniapp打包的html,因此下面都是基于uniapp的方式实现的,其他的都一样的步骤

将uniapp打包后的项目拷贝后修改index.html文件,添加_framework/blazor.webview.js,就是在index.html中的js 文件上面添加blazor.webview.js的引用

 <script src="_framework/blazor.webview.js" autostart="false" crossorigin="anonymous"></script>
    <script src=./static/js/chunk-vendors.22eccfa8.js></script>
    <script src=./static/js/index.5efaff53.js></script>

 3.在需要执行微信skd的方法时直接通过js方法调用(微信sdk方法需先在PublicMethods.cs 静态类中注册)  从 ASP.NET Core Blazor 中的 JavaScript 函数调用 .NET 方法 | Microsoft Learn

DotNet.invokeMethodAsync('MauiApp7', 'WxLogin')
                .then(data => {
                    console.log(data);
                });

这样就可以成功调用微信sdk的方法了

 

标签:uniapp,vue,BlazorWebView,微信,html,System,api,using,Android
From: https://www.cnblogs.com/lkd3063601/p/17222024.html

相关文章

  • Vue.js 绑定class样式
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>绑定样式</title> <style> .basic{ width:400px; height:100px; border:......
  • Vue.js 监视属性(p20~p25)
    视频21视频22视频23视频24视频25天气案例<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>天气案例</title> <!--引入Vue--> <scriptty......
  • K8S配置vue
    1、编写Dockerfile1)、Dockerfile文件FROMnginx:1.22.1COPYdist/etc/nginx/vueTemplateEXPOSE30098CMD["nginx","-g","daemonoff;"]2)、制作镜像dockerbu......
  • maui BlazorWebView+本地html 打包Android app 实现支付宝H5支付
     <BlazorWebViewx:Name="blazorWebView"HostPage="wwwroot/index.html"UrlLoading="blazorWebView_UrlLoading"BlazorWebViewInitialized="blazorWebView_Blazor......
  • Vue利用slice()方法实现分页操作
    Vue利用slice()方法实现分页操作https://blog.csdn.net/pleaseprintf/article/details/129187584系列文章目录提示:这里可以添加系列文章的所有文章的目录,目录需要......
  • 前后端分离项目(vue+springboot)集成pageoffice实现在线编辑office文件
    前后端分离项目下使用PageOffice原理图集成步骤前端vue项目在您Vue项目的根目录下index.html中引用后端项目根目录下pageoffice.js文件。例如:<scripttype="te......
  • 宝塔部署history模式的vue3项目
    前置条件:服务器、域名、备案、项目首先进入宝塔点击左侧的网站,然后点击添加站点 填入域名,点击提交,宝塔会自动帮忙创建一个根目录到该根目录,把打包后的vue项目放......
  • VUE的setup、ref、reactive和代理数据的使用
    一.VUE的setup、ref、reactive和代理数据的使用1.1setup和ref先来实现一个简单的点击按钮,数字增加的案例:需求:页面打开后可以直接看到一个数据,点击按钮后,该数据可以发生......
  • Vue 代理服务器___Vue 跨域通过Axios 的ajax方式的get请求获取数据
    Vue代理服务器___Vue跨域通过Axios的ajax方式的get请求获取数据1、说明1.1:配置2台本地服务器说明:node_modules为vue脚手架        package.json为静态数据......
  • Vue封装的过度与动画
    Vue封装的过度与动画1:知识点:##Vue封装的过度与动画1.作用:在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名。2.图示:<imgsrc="https://img04.sogoucdn......