制作一个简单的Native App-利用“添加到主屏幕”

最新推荐文章于 2021-05-29 05:59:29 发布
最新推荐文章于 2021-05-29 05:59:29 发布
阅读量1.8k 收藏
点赞数
分类专栏： Android库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mayuko2012/article/details/50159037
版权
本文介绍了如何通过iOS的‘添加到主屏幕’功能结合Html5技术，创建一个简单的Native App体验。通过设置图标并隐藏Safari的默认控件，可以实现更贴近原生应用的网页应用。
摘要由CSDN通过智能技术生成

iOS中，可以利用Safari的添加到主屏幕来将自己喜爱的网址添加到主屏幕中，所以，利用这个特征，再加上Html5等，完全可以制作一个简单的Native App。

大家可以使用Safari访问 HELLO,将其添加到主屏幕以观察效果。

添加图标：

<link rel=”apple-touch-icon-precomposed” sizes=”57×57″ href=”icon-57.png”>
<link rel=
最低0.47元/天 解锁文章
Hades_Dev
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[快速上手RN] 3. React native 制作底部导航栏 Bottom Tab Bar
iMingzhen的博客
02-27 8794
快速上手react-navigation的使用以及利用UI Kitten的组件开发底部导航栏
IOS HTML5添加图标到主屏幕
05-06 1368
代码，一些包括圆角，阴影，反光的特效便会自动添加到生成的本地app 的logo 中。是自iOS 2.0 开始的，但如今随着iOS7 的出现，已经变得可有可无了;目前在ios9上还无法显示，具体原因还没找到。如果你知道解决方法，劳烦告诉一下我，多谢！,支持android、ios。详细用法自己去查看，以下只是在ios上简单的使用。都可以设置图标，那么，多出来的。这里用到了第三方插件。
android添加到主屏幕,如何将我的应用的部分快捷方式添加到用户主屏幕？ Android...
weixin_33701379的博客
05-29 860
这将创建一个意图快捷方式添加到主屏幕(发射器)：Intent shortcutIntent = new Intent (this, YourActivity.class);Intent addIntent = new Intent();addIntent.putExtra(Intent.EXTRA_SHORTCUT_INTENT, shortcutIntent);addIntent.putExtr...
iOS 添加快捷方式到主屏幕
夏目三三
12-06 1万+
参考文章：iOS 添加到主屏幕/ iOS Add To Desktop    iOS创建桌面快捷方式代码 在上面文章和其他资料基础上实现此功能，详细介绍和技术点可参考上述文章。Demo是以第三方CocoaHTTPServer为基础，建立本机服务器，调起Safari创建快捷方式。 步骤： 1.Demo中首先Pod第三方CocoaHTTPServer和GTMBase64，然后导入第一篇文
iOS中为网站添加图标到主屏幕以及增加启动画面
08-17 2万+
虽然没有能力开发Native App，但还是可以利用iOS中Safari浏览器的特性小小的折腾一下，做一个伪Web App满足下小小的虚荣心的。 既然是在iOS中的Safari折腾的，那么代码中利用到的也基本上都是Safari的私有属性。 添加图标到主屏幕是Web App的第一步：   添加图标到屏幕里的有两种属性值apple-touch-icon和apple-to
react-native-app-link：使用React Native轻松链接到其他应用
02-04
react-native-app-link 轻松到React Native中的其他应用程序。 如果未在用户手机上安装该应用，请改为打开“ App Store”或“ Play Store”链接。 安装： npm i -S react-native-app-link 用法： import AppLink...
react-native-invoke-app:将 React Native App 从 Headless JS 带到前台
05-30
0.60$ react-native link react-native-invoke-app用法 import invokeApp from 'react-native-invoke-app' ;// Within your headless functioninvokeApp ( ) ;高级用法您可以将对象传递给invokeApp方
react-native-clear-app-cache:清理app缓存 React-Native模块封装 支持iOSAndroid
05-10
README Author  E-mail gufei react-native-clear-app-cache 功能介绍 支持 iOS Android 清理app缓存 安装使用 npm install --save react-native-clear...react-native link react-native-clear-app-cache 运行示例
react-native-app-upgrade：ReactNative App版本升级封装，支持Android，iOS
02-24
react-native link rn-app-upgrade iOS：Xcode，将ios_upgrade引入到项目目录。 import { downloadApk , versionName , versionCode , openAPPStore , checkIOSUpdate , addDownLoadListener , } from 'rn-app-...
nativescript-app-icon-changer：在运行时更改NativeScript iOS应用的主屏幕图标！
02-04
NativeScript应用程序图标更改器 这就是在运行，像老板一样切换应用程序图标！ 安装 tns plugin add nativescript-app-icon-changer API 要求/导入插件 下面的所有示例均假设您使用的是TypeScript，但以下也是要求...
pwa应用动态添加到主屏幕
拾人牙慧
12-06 4265
PWA介绍 PWA(Progressive Web App)，渐进式网页应用，2014年W3C公布Service Worker的相关草案，其生产环境在2015年被Chrome支持。如果将Servicce Worker出现的时间作为PWA应用的诞生时间，则是2015年。 具体的介绍可参考这篇文章或者是Google文档： PWA介绍 Google文档 核心技术 PWA不是特指某一项技术，而是应用了多项...
ios系统通过safari添加到主屏幕后，打开子链接还会跳转到safari
热门推荐
希望能找到你的答案
04-20 15万+
我们做好了一个web的应用程序，有时候演示，需要在手机浏览器中操作，每次都需要打开手机浏览器，然后找到地址进行访问，这不算什么，最讨厌的就是还有手机浏览器自带的工具栏等，看着不舒服。 ios系统的safari有个功能：添加到主屏幕，就会在系统桌面创建一个程序图标，这样每次只要点击图标就能打开系统，也能做到如app系统那样全屏显示、操作。 但是有个问题，主页是可以全屏显示，点击子链接就会跳转到s
让苹果自动添加网址到主屏的功能？
jian2233的博客
09-09 1250
请问一下大家，怎么样实现用苹果浏览某个网站的时候自动生成一个主屏呀？
iOS Web 网站开发必备 图标 放大级别 全屏等设置
万明博客
07-07 2万+
虽然没有能力开发Native App，但还是可以利用iOS中Safari浏览器的特性小小的折腾一下，做一个伪Web App满足下小小的虚荣心的。 既然是在iOS中的Safari折腾的，那么代码中利用到的也基本上都是Safari的私有属性。 添加图标到主屏幕是Web App的第一步： <link rel="apple-touch-icon-precomposed" sizes=
iPad和iPhone的Safari“添加至主屏幕”功能如何自定义图标
编程路上的野花
04-06 1万+
最近需要做一个类似safari的“添加至主屏幕”的功能，不知道那些icon是从哪来的， 研究了一番，其实很简单，是在页面的head元素中。 如下是网易页面中的： link href="http://img1.cache.netease.com/3g/img11/3gtouch/apple-touch-icon-57x57-precomposed.png" rel="apple-touch
IOS添加到主屏后的标题
weixin_33734785的博客
03-01 197
这都是很简单的一行代码的小技巧，如下: 1 <meta name="apple-mobile-web-app-title" content="标题"> 只要修改对应的content内容即可。 原文发布时间为：2017-2-20 本文作者：admin 本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以...
JavaScript为iphone添加到主屏幕
anyuma8815的博客
11-25 1776
iphone手机有一个书签栏上可以将当前在浏览的网页添加到主屏幕，用户添加该选项之后，就可以从桌面上启动这个web程序，让人看起来有点像web app一样，深受许多人的喜爱。但是很多人却不知道或者懒得去设置，本文将介绍一个JavaScript提示用户添加到主屏幕。 设定主屏幕图标 iOS 的网页图标与传统的网页 favicon 相似, 处理方式也差不多, 下面会为你介绍几种处理方...
如何判断web应用是否添加到主屏幕
weixin_34235457的博客
05-14 1052
如何判断web应用是否从桌面图标启动 这就要说到web应用添加到桌面后的显示模式了，一共有这么多种，通过mainfest来控制。只要知道启动模式是什么，就能判断出是否从桌面启动。 fullscreen: 全屏显示, 所有可用的显示区域都被使用, 并且不显示状态栏chrome standalone: 让这个应用看起来像一个独立的应用程序，包括具有不同的窗口，在应用程序启动器中拥有自己的图标等。这个模...
Android 在主屏上生成快捷方式
subingxi的专栏
12-29 1700
我最近在做一个项目，客户要求我们的系统自带他们指定的apk，这没有什么难得。
用react-native-permissions做一个获取app用户权限的功能
最新发布
06-08
好的，下面是使用 `react-native-permissions` 获取 app 用户权限的步骤： 1. 在项目中安装 `react-native-permissions`： ``` npm install react-native-permissions --save ``` 2. 在需要使用权限的页面中导入 `react-native-permissions`： ``` import Permissions from 'react-native-permissions'; ``` 3. 在需要获取权限的地方，使用 `Permissions.request()` 方法请求权限： ``` Permissions.request('location').then(response => { if (response === 'granted') { // 权限已被授予 } else { // 权限被拒绝 } }); ``` 其中，`location` 可以替换成其他需要获取的权限，比如 `camera`、`microphone`、`photo` 等。 4. 如果需要检查权限状态，可以使用 `Permissions.check()` 方法： ``` Permissions.check('location').then(response => { if (response === 'granted') { // 权限已被授予 } else { // 权限未被授予 } }); ``` 5. 如果需要在用户拒绝授权后提示用户开启权限，可以使用 `Permissions.openSettings()` 方法打开应用的设置页面： ``` Permissions.openSettings(); ``` 注意：在 Android 平台上，需要在 `AndroidManifest.xml` 文件中添加相应的权限声明，否则无法获取权限。例如，如果需要获取位置权限，需要添加以下声明： ``` <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> ``` 以上就是使用 `react-native-permissions` 获取 app 用户权限的基本步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值