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

語言: 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天后未獲授權禁止轉載，侵權必究！

「其他文章」
「」
「」