jsbridge实战1:xcode swift 构建iOS app

\[toc\]

环境安装

macOs: 10.15.5

xcode: 11.6

demo:app 创建 hello world iOS app

创建工程步骤

  1. 选择:Create a new Xcode project
  2. 选择:iOS-> single View App
  3. 填写:
    • project name: swift-app-hello
    • identifer: smile 包名
    • language: swift
    • user interface: swiftUI
  4. 工具栏:点击运行 -》build success -》iOS模拟器

看看默认生成的代码

swift 复制代码
// AppDelegate.swift
@UIApplicationMain //@UIApplication注解:表示这个Class类是程序的入口
class AppDelegate: UIResponder, UIApplicationDelegate {
    // 定义 3个 application 方法
}

// ContentView.swift
import SwiftUI
struct ContentView: View {
    var body: some View {
        Text("Hello, App!")
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

demo:app+ui 添加图形

步骤

  • 创建工程和前面步骤相同
  • 区别:选择 user interface: storyBoard
swift 复制代码
import UIKit
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // 1.1 创建一个视图:400*400
        let v = UIView(frame: CGRect(x:0, y:0, width: 400, height: 400))
        // 1.2 设置背景颜色
        v.backgroundColor = UIColor.yellow
        // 1.3.添加到当前视图
        view.addSubview(v)

        // 2.1 创建一个按钮
        let btn = UIButton(type: .conta	ctAdd)
        // 2.2 添加到当前视图
        v.addSubview(btn)
        // 2.3 添加点击事件
        btn.addTarget(self, action: #selector(btnClick), for: .touchUpInside)
        
        
        // 3.1 添加一个图片: 先在Assets.xcassets放置图片;然后点击添加图片
        let iv = UIImageView(image: (UIImage(named: "flower")!))
        // 3.2 添加到视图
        view.addSubview(iv)
    }
    @objc func btnClick(){
        print(#function)
        print("按钮被点击了!")
    }
}

demp:app+h5 加载h5页面

步骤:

  • 准备好本地h5页面 http://localhost:5173/
  • 工程创建同上 app+ui
  • 修改 ViewController.swift 文件如下
  • 修改配置 info.plist (右键open as source) 如下
swift 复制代码
// ViewController.swift
import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate {
    var webView: WKWebView!
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }
    override func viewDidLoad() {
        super.viewDidLoad()
//         let myURL = URL(string:"https://www.baidu.com") // ok
        let myURL = URL(string:"http://localhost:5173/") // ok
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }
}
xml 复制代码
<!-- info.plist  -->
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

效果:

相关推荐
ii_best41 分钟前
按键精灵手机端开发安卓版实战:手写一个可最小化、可拖动的「运行日志悬浮窗」(附完整 源码 + 踩坑记录)
android·ios·智能手机·自动化·ai编程·按键精灵
美狐美颜SDK开放平台2 小时前
Android与iOS直播APP美颜有什么区别?视频美颜SDK开发详解
android·ios·音视频·视频美颜sdk
逐流人12 小时前
Ceph对象存储与文件系统存储管理:从RADOS网关、S3与Swift到CephFS快照同步
linux·运维·ceph·云原生·云计算·swift·rados
传奇开心果编程1 天前
【SwiftUI入门练中学】第7课 动画与手势:让界面更灵动
学习·macos·ui·ios·swiftui·swift
知潮网1 天前
发售刚十天,9999 元的 iPhone 18 Pro 解锁就重启
ios·iphone
2501_916007471 天前
苹果应用商店App Store上架费用标准及原因解析
android·ios·小程序·https·uni-app·iphone·webview
传奇开心果编程2 天前
【SwiftUI娓娓道来】第3课:让界面活起来——交互与动画指南
学习·macos·ui·ios·swiftui·swift
可乐鸡翅yeah_2 天前
新手梳理:M3U8 线上问题,哪些是前端锅,哪些是后端锅
前端·ios·音视频·实时音视频·m3u8·音视频在线播放
00后程序员张2 天前
苹果App Store上架指南:费用、原理与步骤详解
android·ios·小程序·https·uni-app·iphone·webview