實戰教程·元宇宙來了，準備好你的電子名片了嗎？（四）

語言: CN / TW / HK
時間 2022-11-17 07:15:12

theme: smartblue

前提回顧

元宇宙，是運用數字技術搭建的，由現實世界映射或超越現實世界，可與現實世界交互的虛擬世界，具備新型社會體系的數字生活空間。而本項目Linkworld是將虛擬世界或現實生活中的各種“身份”彙集起來，搭建一套數字身份體系。

在上幾個章節中，我們學習了搭建個人主頁頁面和添加身份卡頁面，並完成了基本的添加身份卡的交互。在本章中，我們將繼續完善電子名片很重要的一項交互— —點擊跳轉身份卡主頁。

交互動作：點擊跳轉身份卡主頁

電子名片所承載的內容是將用户社交媒體信息以及用户分享的其他信息彙集起來，並且可以通過點擊身份卡片進行訪問，達到一個鏈接（即電子名片本體）就可以對個人進行營銷。

為達到在應用內打開瀏覽器並訪問身份卡主頁的效果，我們需要創建一個頁面作為跳轉的頁面。

新建一個新的SwiftUI文件，命名為HomePageView。HomePageView文件將作為我們跳轉後訪問的主頁，如下圖所示：

創建完成後，我們先來完善下頁面之間的跳轉邏輯，從ContentView頁面跳轉到HomePageView頁面，我們可以使用基於

NavigationStack頂部導航菜單的跳轉方法NavigationLink。

由於用户的交互動作是點擊單張卡片進行跳轉，因此跳轉方法需要針對於單個CardView身份卡片視圖，如下代碼所示：

NavigationLink(destination: HomePageView()) { CardView(platformIcon: item.platformIcon, title: item.title, platformName: item.platformName, indexURL: item.indexURL) }

上述代碼中，我們使用NavigationLink導航跳轉方法進行頁面跳轉，目標頁面為HomePageView，跳轉的主體點擊內容為CardView身份卡片。

完成後我們發現List自帶了跳轉頁面的指示箭頭，由於NavigationLink導航菜單跳轉直到iOS16版本都沒有修飾符可以隱藏指示箭頭，因此需要開發者自行實現隱藏指示箭頭的樣式，這點直到iOS16版本還未有專有的修飾符代替。

隱藏跳轉指示箭頭的方法也很簡單，可以使用ZStack堆棧視圖容器和opacity透明度修飾符實現隱藏效果，如下代碼所示：

``` ZStack(alignment: .leading) { NavigationLink(destination: HomePageView()) { EmptyView() } .opacity(0)

CardView(platformIcon: item.platformIcon, title: item.title, platformName: item.platformName, indexURL: item.indexURL)

} ```

上述代碼中，我們使用ZStack堆棧視圖並設置內容元素對齊方式為左對齊，在ZStack堆棧視圖中，NavigationLink導航菜單跳轉內容為一個空視圖EmptyView，並設置整個NavigationLink導航菜單為完全透明。

如上修改後，當前展示的視圖還是CardView的內容，而交互的視圖使用ZStack堆棧視圖便隱藏了。

我們點擊單張身份卡片，在模擬器中可以看到跳轉的效果，如下圖所示：

界面設計：自定義返回按鈕

來到HomePageView視圖，和ContentView和NewView一樣，我們給這個頁面創建頂部導航菜單，而導航欄的標題，我們可以聲明一個變量，將ContentView的平台名稱變量傳值過來，如下代碼所示：

``` struct HomePageView: View { var platformName: String

var body: some View {
    NavigationStack {
        Text("HomePageView")
        .navigationBarTitle(platformName, displayMode: .inline)
    }
}

} ```

聲明變量後，我們還要回到ContentView給使用到HomePageView中聲明的變量綁定默認值，實現從ContentView視圖傳值到HomePageView視圖中，如下代碼所示：

HomePageView(platformName:item.platformName)

在HomePageView視圖中，我們看到由於使用NavigationLink跳轉返回，因此在跳轉後的頁面會自帶返回按鈕。

但這個返回按鈕沒那麼好看，我們可以隱藏原來系統自帶的返回按鈕，然後自己自定義一個返回按鈕並實現返回操作，如下代碼所示：

``` struct HomePageView: View { var platformName: String @Environment(.presentationMode) var presentationMode

var body: some View {
    NavigationStack {
        Text("HomePageView")
        .navigationBarTitle(platformName, displayMode: .inline)
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(leading: backBtn())
    }
}

// 返回按鈕
func backBtn() -> some View {
    Button(action: {
        self.presentationMode.wrappedValue.dismiss()
    }) {
        Image(systemName: "chevron.backward")
            .font(.system(size: 17))
            .foregroundColor(.black)
    }
}

} ```

上述代碼中，我們創建了一個返回按鈕視圖backBtn，並使用環境變量presentationMode實現其出棧返回上一頁方法。

導航菜單部分，使用navigationBarBackButtonHidden隱藏導航菜單返回按鈕修飾符隱藏NavigationLink自帶的返回按鈕，並使用navigationBarItems導航菜單按鈕元素修飾符將backBtn返回按鈕視圖加到導航菜單上。

界面設計：在應用內打開瀏覽器

接下來，我們來學習在跳轉到HomePageView頁面的同時，打開瀏覽器並訪問對應身份卡片的鏈接地址。

訪問網頁需要引用一個新的框架— —WebKit，WebKit是一款開源的瀏覽器框架，使用WebKit可以實現在應用內訪問web網頁地址的功能。

首先，我們先引用這個框架，如下代碼所示：

import WebKit

然後我們實現下訪問網頁的方法，如下代碼所示：

``` // MARK: - 網頁方法

struct SiteView: UIViewRepresentable, View {

var indexURL: String

func makeUIView(context: UIViewRepresentableContext<SiteView>) -> WKWebView {
    return WKWebView()
}

func updateUIView(_ uiView: WKWebView, context: UIViewRepresentableContext<SiteView>) {
    let request = URLRequest(url: URL(string: "http://"+indexURL)!)
    uiView.load(request)
}

} ```

上述代碼中，我們創建了一個結構體SiteView，遵循UIViewRepresentable協議，UIViewRepresentable協議可以將視圖添加到SwiftUI界面中，並在適當的時間調用可表示實例的方法以創建和更新視圖。

在SiteView網頁視圖中，通過傳入一個String類型鏈接地址indexURL，調用uiView的WKWebView結構，訪問並加載來自indexURL網站的數據，返回內容給到View視圖中，實現訪問網站的功能。

創建完成後，我們在HomePageView調用它，由於需要傳入鏈接地址，因此在HomePageView中也要聲明變量作為鏈接地址，且鏈接地址需要來自於ContentView身份卡片的地址，如下代碼所示：

``` struct HomePageView: View { var platformName: String var indexURL: String @Environment(.presentationMode) var presentationMode

var body: some View {
    NavigationStack {
        SiteView(indexURL: indexURL)
        .navigationBarTitle(platformName, displayMode: .inline)
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(leading: backBtn())
    }
}

// 返回按鈕
func backBtn() -> some View {
    Button(action: {
        self.presentationMode.wrappedValue.dismiss()
    }) {
        Image(systemName: "chevron.backward")
            .font(.system(size: 17))
            .foregroundColor(.black)
    }
}

}

struct HomePageView_Previews: PreviewProvider { static var previews: some View { HomePageView(platformName: "稀土掘金技術社區", indexURL: "juejin.cn/user/3897092103223517") } } ```

上述代碼中，我們聲明瞭變量indexURL作為訪問的鏈接地址，並在HomePageView的body視圖中使用SiteView網站視圖，SiteView網站視圖的訪問地址綁定聲明的變量indexURL。

並且還需要在瀏覽器預覽時添加默認值，便於模擬器預覽效果，如下代碼所示：

HomePageView(platformName: "稀土掘金技術社區", indexURL: "juejin.cn/user/3897092103223517")

由於HomePageView聲明瞭變量indexURL，因此我們還要回到ContentView中給HomePageView聲明的變量賦值，如下代碼所示：

HomePageView(platformName:item.platformName, indexURL: item.indexURL)

項目預覽

完成後，我們回到ContentView視圖，在模擬器中預覽下整體的效果，如下圖所示：

項目小結

在本章中，我們學習了基於NavigationStack頂部導航菜單的跳轉方法NavigationLink，並實現了自定義返回按鈕及其操作。在本章核心內容，我們接觸了一個新的框架WebKit，通過使用UIViewRepresentableContext和View視圖，實現在應用內訪問網頁鏈接的功能。

電子名片本質上是一款短鏈接聚合工具，通過生成URL分享進行裂變，如此看來，Linkworld基本可以鏈接一切內容，如建立個人作品庫，或者分享所有社交帳號集，亦或者管理自己的自媒體帳號等等，都可以通過Linkworld實現。

簡單，但有趣。

版權聲明

本文為稀土掘金技術社區首發簽約文章，14天內禁止轉載，14天后未獲授權禁止轉載，侵權必究！

「其他文章」
「」
「」