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>

效果:

相关推荐
问道飞鱼1 小时前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
mascon2 小时前
U3D打包IOS的自我总结
ios
名字不要太长 像我这样就好2 小时前
【iOS】继承链
macos·ios·cocoa
karshey3 小时前
【IOS webview】IOS13不支持svelte 样式嵌套
ios
潜龙95273 小时前
第4.3节 iOS App生成追溯关系
macos·ios·cocoa
游戏开发爱好者812 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
神策技术社区19 小时前
iOS 全埋点点击事件采集白皮书
大数据·ios·app
wuyoula20 小时前
iOS V2签名网站系统源码/IPA在线签名/全开源版本/亲测
ios
2501_9159184120 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
fishycx20 小时前
iOS 构建配置与 AdHoc 打包说明
ios