首先添加微信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的方法了

maui BlazorWebView+本地html (vue、uniapp等都可以) 接入微信sdk 开发 Android app的更多相关文章

  1. 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app

    一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 ...

  2. 《Android原生整合虹软SDK开发uniapp插件》

    1.项目背景 应公司要求,需要开发一套类似人脸打卡功能的app,但是因为我们公司没有很强的原生android开发者,所以根据现状选择了第三方跨平台的uniapp,想必目前大多人都了解这个平台了,我也就 ...

  3. vue+uni-app商城实战 | 第一篇:【有来小店】微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录

    一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...

  4. 三、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-配置项目并实现IM登录

    项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...

  5. 五、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天输入框的实现

    会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...

  6. 二、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-腾讯云后台配置TXIM

    项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...

  7. 四、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-会话好友列表的实现

    会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...

  8. 八、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天输入框扩展面板的实现

    聊天输入框扩展面板的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入 ...

  9. 基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

    一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...

  10. vue uni-app项目中的tabbar

    由于公司要求开发百度小程序,所以我们采用uni-app开发的方式,一套代码多个小程序都可以用,在开发小程序的时候我们也经常会使用到tabbar.当然自己写出来也是不错的.这个就来介绍uni-app中的 ...

随机推荐

  1. Linux 使用Bind提供域名解析服务

    DNS域名解析服务 相较于由数字构成的IP地址,域名更容易被理解和记忆,所以我们通常更习惯通过域名的方式来访问网络中的资源.但是,网络中的计算机之间只能基于IP地址来相互识别对方的身份,而且要想在互联 ...

  2. mermaid工具

    mermaid支持:流程图.时序图.甘特-等图表的绘制:可在线编辑,保存代码.图片. mermaid :官网.在线编辑器.操作手册

  3. HTTP请求向服务器传参方式

    请求HttpRequest 提示: 用户发送请求时携带的参数后端需要使用,而不同的发送参数的方式对应了不同的提取参数的方式 所以要学会如何提取参数,我们就需要先了解前端传参数有哪些方式 回想一下,利用 ...

  4. Educational Codeforces Round 1 个人总结A-E

    Educational Codeforces Round 1 A. Tricky Sum 数学,求\(1 \dots n\)的和减去 小于等于n的二次幂乘2之和 LL f[40]; void solv ...

  5. window安装nginx,并解决前端跨域问题

    window 安装 nginx 流程 第一步:下载nginx http://nginx.org/en/download.html 第二步:下载完成后,解压到指定目录文件,启动nginx 进入nginx ...

  6. vue中自动将px转换成rem

    1.首先下载 lib-flexible npm install lib-flexible --save 2.在main.js中引用 lib-flexible 3.安装px2rem-loader(将px ...

  7. PTA最大子列和问题

    给定K个整数组成的序列{ N1​, N2​, ..., NK​ },"连续子列"被定义为{ Ni​, Ni+1​, ..., Nj​ },其中 1≤i≤j≤K."最大子列 ...

  8. 模拟法NOIP题单

    模拟算法的试题训练, 重点针对试题分析环节的练习锻炼!! 考察阅读能力.分析能力.建模能力! 模拟法题目是最基础的题目,她不难,她复杂,她的实现往往需要足够的细心耐心! 练习这类题目能够使你掌握其他算 ...

  9. 使用generator进行代码自动生成

    在使用generator 进行逆向工程时,一下为步骤 添加mybatis generator的maven插件依赖 添加mybatis generator的配置文件:generatorConfig.xm ...

  10. L02.从图灵机到通用计算机

    将程序载入到内存(存储器)中,用一个指针指向它, 再载入到cpu(控制器)中进行解释执行   *(取指执行,产生结果) 取指执行 = 控制器从存储器中取出数据后,分析指令,运算器执行逻辑运算. PC= ...