APP

uniapp开发app,手机状态栏问题挡住问题,uni app 刘海屏适配

问题:在使用uniapp开发手机App时,因为HBuildX创建的应用默认是沉浸式样式,如果去除自带的导航栏之后,页面会直通手机顶部状态栏,解决办法如下:

方法1:使用uniapp官方文档提供的解决方案 https://uniapp.dcloud.io/collocation/pages?id=customnav

 

方法二:配置mainfest.json来关闭沉浸式。打开应用的manifest.json文件,打开源码视图,app-plus 下添加 statusbar >immersed节点并设置值为false

"app-plus" : {
    "statusbar": {  
        "immersed": false  
    },
}

方法二,测试成功!

设置 uni app webview的标题显示

webview的update-title设为false
<template>
	<view>
		<web-view :webview-styles="webviewStyles" update-title="false" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
	</view>
</template>

pages.json的“globalStyle”中添加一行:"navigationStyle":"custom",

还可以在onReady中加

setTimeout(()=>{
uni.setNavigationBarTitle({
title:‘app中要设置的标题’
})
},2000)

 

        

H5唤起APP指南(附开源唤端库)

前一段时间在做一些H5页面,需求中落地页占比较大,落地页承担的职责就是引流。引流有两种形式,同时也是我们对唤端的定义:引导已下载用户打开APP,引导未下载用户下载APP。

引导已下载用户打开APP,从数据上说用户停留在APP中的时间更多了,是在提高用户粘性;从体验上说,APP体验是要比H5好的。引导未下载用户下载APP,可以增加我们的用户量。

上面其实分别解释了 什么是唤端 以及 为什么要唤端,也就是 3W法则 中的 What 和 Why,那么接下来我们就要聊一聊 How 了,也就是 如何唤端

        

网站与h5手机网站,APP qq,微信登录与分享解决方法

网站与h5手机网站,APP qq,微信登录与分享解决方法
一.Qq 登录与分享

1)分享

网页分享:

1对于分享 https://github.com/w3yyb/NativeShare 更方便(需要测试浏览器兼容)(演示爱奇艺网站)

2原生分享Web share api: navigator.share(只支持ios) --(Android可以利用intent实现分享功能)

3https://connect.qq.com/index.html

4不做网页的分享功能(移动端),用qq,微信,浏览器自带的分享。(许多大站在用此方式)

总结:用 1.或3.或4.

App分享:

1 https://connect.qq.com/index.html

2)登录:(网站,app)

1 https://connect.qq.com/index.html

二.微信登录与微信分享

1)分享

网页分享:

  1. https://github.com/w3yyb/NativeShare更方便(需要测试浏览器兼容)

2.原生分享Web share api: navigator.share(只支持ios)

3.不做网页的分享功能(移动端),用qq,微信,浏览器自带的分享。(许多大站在用此方式)

4.二维码网址(对于pc浏览器)…

如何使用Web Share API 在网页调用系统的分享按钮

网络共享API是一个似乎已在雷达之下消失了,因为它是在Chrome 61首次推出为Android。从本质上讲,它提供了一种直接从网站或Web应用程序共享内容(例如链接或联系人卡片)时触发设备(或桌面,如果使用Safari)的本机共享对话框的方法。

虽然用户已经可以通过本地方式从网页共享内容,但他们必须在浏览器菜单中找到该选项,即使这样,也无法控制共享内容。通过引入此API,开发人员可以利用用户设备上的本机内容共享功能,将共享功能添加到应用程序或网站中。

iOS提供了许多本机共享选项。

与传统方法相比,这种方法具有许多优点:

  • 与您在DIY实施中可能拥有的有限数量相比,向用户提供了广泛的共享内容选项。
  • 您可以通过取消来自各个社交平台的第三方脚本来改善页面加载时间。
  • 您无需为不同的社交媒体网站和电子邮件添加一系列按钮。单个按钮足以触发设备的本机共享选项。
  • 用户可以在自己的设备上自定义其首选共享目标,而不仅限于预定义的选项。

讲讲PWA

一、背景

文章2017 前端大事件和趋势回顾,2018 何去何从?中提到了2017年前端值得关注的十大事件,其中就提到了PWA。

大家都知道Native app体验确实很好,下载到手机上之后入口也方便。它也有一些缺点:

  • 开发成本高(ios和安卓)
  • 软件上线需要审核
  • 版本更新需要将新版本上传到不同的应用商店
  • 想使用一个app就必须去下载才能使用,即使是偶尔需要使用一下下
                    

移动前端不得不了解的HTML5 head 头标签

HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta,link等标签的功能属性显得非常重要。这里整理了一份 <head> 部分的清单,让大家了解每个标签及相应属性的意义,写出满足自己需求的 <head> 头部标签,可以很有效的增强页面的可用性。…

        

移动端]专用的meta

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
这个用的最多,
width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字,要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。
user-scalable指令指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放 …

        

网站和APP如何接入QQ登录功能

如果同一个应用有网站和app都需要接入QQ登录功能,请先到https://connect.qq.com/

创建网站应用,然后再到http://open.qq.com/

创建移动应用。创建移动应用的时候可以根据提示关联网站的appid,关联后两个应用的appid一致。

若同一个android应用需要接入IOS版本,需要先在管理中心里打开这个android应用,然后从这个界面右上角的平台信息里选择 IOS应用 进行申请。该操作可以保持申请的IOS应用与android应用的APP ID一致。(反之若先申请的IOS应用,关联操作步骤也一样)

原创文章转载请注明:来自Lenix的博客 地址 http://blog.p2hp.com/archives/5367