前言 配置兼容模块在 swiftUI 中扫描文稿。
兼容模块 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 import SwiftUIimport UIKitimport VisionKitstruct documentScanner : UIViewControllerRepresentable { @Binding var isShown: Bool @Binding var image: UIImage typealias UIViewControllerType = VNDocumentCameraViewController func makeCoordinator () -> documentScanner.Coordinator { return Coordinator (isShown: $isShown, image: $image) } func makeUIViewController (context: UIViewControllerRepresentableContext<documentScanner>) -> VNDocumentCameraViewController { let documentCameraViewController = VNDocumentCameraViewController () documentCameraViewController.delegate = context.coordinator return documentCameraViewController } func updateUIViewController (_ uiViewController: VNDocumentCameraViewController, context: UIViewControllerRepresentableContext<documentScanner>) { } class Coordinator : NSObject , UINavigationControllerDelegate , VNDocumentCameraViewControllerDelegate { @Binding var isShown: Bool @Binding var image: UIImage init (isShown: Binding <Bool >, image: Binding <UIImage >) { _isShown = isShown _image = image } func documentCameraViewController (_ controller: VNDocumentCameraViewController, didFinishWith scan: VNDocumentCameraScan) { image = scan.imageOfPage(at: 0 ) isShown = false } func documentCameraViewControllerDidCancel (_ controller: VNDocumentCameraViewController) { isShown = false } } }
声明摄像头权限 在 info.plist 中加入一条:Privacy - Camera Usage Description 填写描述
⚠️:缺少此步会导致 App 崩溃
使用方法 1 documentScanner(isShown: , image: )
1、分别适配了 深色模式 和 浅色模式 的 css 或其他样式文件¹
2、可编写 css 和 javascript 的代码编辑器(推荐使用 atom )
css 部分(个人处理方法) 1、声明你的网站支持的外观
1 :root {color-scheme : dark light}
2、分别声明 浅色模式 和 深色模式 的外观 css
1 2 @media(prefers-color-scheme: light) { // 浅色模式的 css 写在这里 } @media(prefers-color-scheme: dark) { // 深色模式的 css 写在这里 }
3、没了。
⚠️ :以上是我个人的方法,适用于 css 较多的网站
css 部分(官方处理方法) 1、声明你的网站支持的外观
1 :root { color-scheme : dark light }
2、分别声明 浅色模式 和 深色模式 的 css 中的颜色
1 2 3 4 5 6 7 8 9 10 11 12 @media(prefers-color-scheme: light) { // 浅色模式中网页内容的颜色值 :root { --color : #fff ; } } @media(prefers-color-scheme: dark) { // 深色模式中网页内容的颜色值 :root { --color : #000 ; } }
3、在需要时引用变量,像这样:
1 html { color : var (--color); }
我个人认为这样比较复杂,所以我直接用的第一种
HTML 部分 1、在 head 中引入
1 2 // 上面放已有的一条 css,一定要放在上面!!,可以加个 title="normal" <link rel ="stylesheet" href ="/* 动态深色模式的 css 引用地址 */" title ="dynamic" >
javaScript 部分 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <script src ="https://cdn.jsdelivr.net/gh/LiYanan2004/LiYanan2004.github.io/website/js/browser_check.min.js" > </script > <script > var info = new Browser() if ((info.os == "Mac OS" && compare(info.osVersion,"10.14.4")) || (info.os == "iOS" && compare(info.osVersion,"13.0"))) { // This is iOS OR macOS and supported dynamic console.log("This Device supported dynamic color scheme"); setStyle('dynamic') } function compare(curV,reqV){ if(curV && reqV){ //将两个版本号拆成数字 var arr1 = curV.split('.'), arr2 = reqV.split('.'); var minLength=Math.min(arr1.length,arr2.length), position=0, diff=0; while(position<minLength && ((diff =parseInt(arr1[position])-parseInt(arr2[position])) ==0)){ position++; } diff=(diff!=0)?diff:(arr1.length-arr2.length); //若curV大于reqV,则返回true return diff>0; } else { //输入为空 console.log("版本号不能为空"); return false; } } function setStyle(title){ var i, links; links = document.getElementsByTagName("link"); for (i = 0; links[i]; i++) { if (links[i].getAttribute("rel").indexOf("style") != -1 && links[i].getAttribute("title")) { links[i].disabled = true; if (links[i].getAttribute("title").indexOf(title) != -1) links[i].disabled = false; } } } </script >
⚠️:以上内容放在 body 中,不用担心性能问题,性能影响几乎为 0
本地测试 用自己的方法在本地测试一下吧!
附录 1、Hexo + material-x 快速生成深色模式和浅色模式的方法:liyanan2004.github.io/2019/Enable_Dark_mode_in_your_blog_with_material-x/ (Hexo 的其他主题也可参考)
Enjoy it ~