实战教程·元宇宙来了，准备好你的电子名片了吗？（四）

文如秋雨
6,961 阅读6分钟

前提回顾

元宇宙，是运用数字技术搭建的，由现实世界映射或超越现实世界，可与现实世界交互的虚拟世界，具备新型社会体系的数字生活空间。而本项目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: "https://"+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天后未获授权禁止转载，侵权必究！

avatar
文章
阅读
粉丝