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

之前沒接觸過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的方法了