iOS13适配:UIWindow窗口和导航控制器

@ 这次iOS13的发布,其改动步子有点大了,尤其是是其多场景窗口(多任务)已经颠覆了老应用的设计基础了—-数据的协同共享处理机制(本文不谈,哈哈) 这里记录下一些界面层面的适配体会: 如果是 Xcode 10 及以下创建的老项目,用 Xcode 11 打开,老项目基本能正常运行。但是如果用 Xcode 11 创建新项目,还按照老项目思路写代码就会有坑了。 用 Xcode 11 创建一个 Single View App 项目,会多生成一些文件和代码 多了SceneDelegate代理 Info.plist里面多了Application Scene Manifest配置 多出来的这些文件和代码,影响最直观的是多场景窗口和导航控制器。 适配方案——不支持多场景窗口 这种适配方案最简单。 将多出来的文件和代码删除就好了 删除SceneDelegate代理文件 (可选) 删除 Info.plist里面的Application Scene Manifest配置(一定要删除) 删除 AppDelegate代理的两个方法: application:configurationForConnectingSceneSession:options: application: didDiscardSceneSessions: 这两个方法一定要删除,否则使用纯代码创建的 Window 和导航控制器 UINavigationController 不会生效。 适配方案——支持多场景窗口 先说我遇到的一些现象。 尽管我不会为每个应用自定义窗口和导航,但我我依然会使用纯代码创建 UIWindow 和 UINavigationController,具体如下 //AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { //在Xcode11创建的项目中,需要自行给AppDelegate添加属性window //自定义Window self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; //自定义导航控制器 UINavigationController *rootNavgationController = [[UINavigationController alloc] initWithRootViewController:[ViewController new]]; //导航控制是rootViewController self.window.rootViewController = rootNavgationController; //现实Window [self.window makeKeyAndVisible]; return YES; } Xcode 11 创建的项目中,写入上述代码运行App,结果发现这部分代码虽然执行了,但是通过UIViewController的 self.navigationController 获取的导航竟然是 nil。 从现象反推过程,既然代码执行了,那么很大可能是 self.window 没有显示在屏幕上。 查看iOS13下 UIWindow 的定义,有这么一条 ...

October 17, 2019 · 2 min · holdsky

create-react-app :不产生source-map来缩减打包文件体积

用create-react-app 脚手架创建的react项目,使用 npm run build 打包后,默认会产生 source-map 文件,通常项目上线后这种文件是不必要的。 现在需要配置以关闭这种文件的产生。 打开项目的 package.json 文件,找到下面类似的配置 "scripts": { "analyze": "source-map-explorer 'build/static/js/*.js'", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, 可以看到 build 命令执行的脚本是 react-scripts build,然后打开 node_modules/react-scripts/config/webpack.config.js 文件。 一般情况下,定位到这,基本就知道了怎么关闭 source-map 文件产生–搜索 shouldUseSourceMap,将其置为false就行了。 如果仔细查看 shouldUseSourceMap 定义 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; 会发现shouldUseSourceMap和 process.env.GENERATE_SOURCEMAP 环境变量有关,那么在不修改 webpack.config.js 文件的情况,其实还可以修改环境变量。( 环境变量修改参考 https://139.155.43.7/2019/10/15/create-react-app-%e8%87%aa%e5%ae%9a%e4%b9%89%e7%8e%af%e5%a2%83%e5%8f%98%e9%87%8f/ ) 在项目目录下创建.env文件,添加内容 GENERATE_SOURCEMAP=false 然后重新执行 npm run build,这时应不会产生 source-map 文件

October 15, 2019 · 1 min · holdsky

create-react-app : 自定义环境变量

create-react-app是一款非常好用的react项目脚手架,其创建的react项目除了可以访问默认的环境变量,还可以自定义环境变量,只要在项目目录下创建 .env 文件,然后直接写入环境变量就可以了。 具体如下: 1、创建.env文件 在react项目目录下创建 .env 文件。 2、写入环境变量,例如 ABCD=1 3、访问环境变量 对于默认定义好的环境变量,使用 process.env.默认环境变量名 访问 对于自定义环境变量,需要添加 REACT_ 前缀,即使用 process.env.REACT_自定义环境变量名 访问 例如 render() { if (process.env.REACT_ABCD !== 0 ) { '示例' } return ( <div> <span> 默认环境变量示例 {process.env.NODE_ENV </span> <span> 自定义环境变量示例 {process.env.REACT_ABCD </span> </div> ); } 参考 : https://create-react-app.dev/docs/adding-custom-environment-variables

October 15, 2019 · 1 min · holdsky

React : 一个简短的路由配置示例

为了方便学习React路由,这里记录示例创建过程。 1、创建react app #创建 npx create-react-app sample #进入目录 cd sample 2、修改public/index.html <html> <head> <title>React 路由</title> </head> <body> <div id="root"></div> </body> </html> 3、修改 src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); 4、修改src/App.js import React from 'react'; import { BrowserRouter as Router,Route,Link} from 'react-router-dom'; function Home () { return ( <div> <span>主页</span> <Link to="/page">其他页面</Link> </div> ); } function Page () { return ( <div> <span>其他页面</span> <Link to="/">主页</Link> </div> ); } function App() { return ( <Router> <div> <Route path="/" exact={true} component={Home} /> <Route path="/page" exact={true} component={Page} /> </div> </Router> ); } export default App; 5、安装依赖 react-router-dom ...

October 15, 2019 · 1 min · holdsky

学习笔记:升级 WordPress 时提示”另一更新正在进行”

由于在升级Wordpress时,Wordpress会在数据库wp_options表中增加core_updater.lock记录。如中途打断Wordpress升级,这个记录会留在数据库中。当下次升级时,Wordpress检测到此记录的存在就会返回”另一更新正在进行”。 参考https://www.wpdaxue.com/wordpress-update-problem.html 解决: 通过终端登录WordPress数据库 mysql -u 数据库用户名字 -p mysql> use wordpress的数据库名字; 从下面结果中,找到 xxxx_options表 # 查询数据库中所有表名 mysql> select table_name from information_schema.tables where table_schema='wordpress的数据库名字'; 查询 mysql> select * from xxx_options where option_name='core_updater.lock'; 删除 mysql> delete from xxx_options where option_name='core_updater.lock';

October 15, 2019 · 1 min · holdsky

学习笔记:CSS指定超链接的文字颜色

超链接的四种状态 一个超链接示例 <a href="https://www.z6z8.cn">z6z8</a> 有四种状态: a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 CSS 改变超链接颜色 在未指定适用范围时,下面css影响全局 a:link { /*前景色*/ color:blue; /*背景色*/ background-color: orange; } a:visited { color:red; } a:hover{ ... } a:active{ ... } CSS 改变部分超链接颜色 需要将新颜色设置指定给具体的CSS块,例如 .testcss { width:100%; height:20%; } .testcss a:visited { color:red; }

October 11, 2019 · 1 min · holdsky

CSS 头脚+中间两列布局

效果图 <html> <head> <style type="text/css"> /* 整体Body */ .flex-body { width: 100%; height: 100%; margin: 0px; } /* 头 高70px*/ .flex-header { background-color: aqua; height: 70px; width: 100%; } /* 中间左侧,绝对定位,宽度50%,高度由top和bottom决定, top和bottom分别是 flex-header ,flex-footer的高度*/ .flex-left-main { position: absolute; background-color: red; width: 50%; top: 70px; bottom: 60px; } /* 中间左侧,绝对定位,宽度50%,高度由top和bottom决定, margin-left: 50% top和bottom分别是 flex-header ,flex-footer的高度*/ .flex-right-main { position: absolute; background-color: blue; width: 50%; top: 70px; bottom: 60px; margin-left: 50%; } /* 脚 高60px */ .flex-footer { position: absolute; bottom: 0px; width:100%; height: 60px; background-color: bisque; } </style> </head> <body class="flex-body"> <div id="flex-header" class="flex-header"></div> <div id="flex-left-main" class="flex-left-main"></div> <div id="flex-right-main" class="flex-right-main"></div> <div id="flex-footer" class="flex-footer"></div> </body> </html>

October 10, 2019 · 1 min · holdsky

转载:js获取控件坐标位置

全文请看 https://www.jb51.net/article/40413.htm //获取坐标位置 function getpos(obj) { var top=obj.offsetTop; var left=obj.offsetLeft; var height=obj.offsetHeight; var width=obj.offsetWidth; while(obj=obj.offsetParent) { top+=obj.offsetTop; left+=obj.offsetLeft; } } obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。 obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。 obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。 obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

October 10, 2019 · 1 min · holdsky

学习笔记:ubuntu 禁用ssh密码登陆

闲暇无事看了看系统日志,发现ssh被暴力了,类似下面的日志几乎一秒一条 Oct 3 21:30:38 localhost sshd[11266]: Failed password for invalid user minecraftserver from 84.93.153.9 port 54913 ssh2 索性禁用ssh密码登陆 打开文件 /etc/ssh/sshd_config,将 PasswordAuthentication 值修改为no #开启公钥算法鉴权 PubkeyAuthentication yes #禁用密码鉴权 PasswordAuthentication no #鉴权挑战响应 ChallengeResponseAuthentication no 保存文件后,重启sshd服务 sudo systemctl restart sshd.service 清净多了

October 3, 2019 · 1 min · holdsky

WordPress GuCherry Blog Theme,修改摘要长度

默认长度是40,取值范围是20到40,显然是不够用的。 需要我们手动修改代码,具体如下: wordpress安装目录/wp-content/themes/gucherry-blog/inc/customizer/functions/customizer-fields.php $wp_customize->add_control( 'gucherry_blog_excerpt_length', array( 'label' => esc_html__( 'Excerpt Length', 'gucherry-blog' ), 'description' => esc_html__( 'Maximum excerpt length 40 and minimum excerpt length 20 can be set.', 'gucherry-blog' ), 'section' => 'gucherry_blog_excerpt_length_section', 'type' => 'number', 'input_attrs' => array( 'min' => 20, 'max' => 40, ), ) ); 手动修改其中的 max 值,就可增大取值范围了

October 1, 2019 · 1 min · holdsky