微信小程序 iPhone刘海屏系列机型适配

首先我们打印一下机型信息

可以看到，模拟器下，普通屏幕 statusBarHeight 为20，而刘海屏 statusBarHeight 为44。

所以判断是iPhone刘海屏机型的条件就可以是： model带iPhone字样 && statusBarHeight > 20

我们在 appjs 里写好全局变量：

方法一：写两个样式

js：

wxml：

wxss：

方法二：控件高度设为变量，在js中计算这个变量的值

js：

wxml：

小程序动态设计响应式数据方法如下：

1、先制作好PSD模板，不要直接在Muse当中完成视觉设计。

2、处理好PHOTOSHOPD文件中智能对象的关系以及图层顺序的关系。

3、微信小程序页面微信小程序内容与背景的关系一定要分开。北京微信小程序设计最新的标准和建议则是朝着浏览器的能力扩充和改善发展，使之能够不需要插件程序也能够给用户传输多媒体信息和更多的选择。先做好一个断点的布局，然后先做最大的宽度适配。

4、做好第一个和最大的适配后，开始调整微信小程序页面元素的对齐参考点。

5、开始适配768px平板宽度和375px手机宽度的布局。

6、观察微信小程序内容是否超出当前断点的编辑(Editor)区域。北京微信小程序制作公司是策划师、网络程序员、北京微信小程序设计等岗位，应用各种网络程序开发技术和北京微信小程序设计技术，为企事业单位、公司或个人在全球互联网上建设微信小程序，并包含域名注册和主机托管等服务的总称。

7、最后检查不断断点缩放的过程中，的缩放规则是否恰当，即可完成小程序动态设计响应式数据。

手机采用的是全面屏设计，显示屏比例为：19:9；若所 *** 作的软件未适配该显示屏比例的话，是无法进行全屏显示的。可以尝试进入手机设置--显示与亮度--第三方应用显示比例中找到微信该款软件，开启全屏显示试试。

1 App直接打开小程序功能是怎么 *** 作

2018 年 05 月 19 日，微信官方公布了小程序的新能力，其中最引人关注的是：「小程序上线 App 直接打开小程序功能」。

其实，「App 直接打开小程序」的关键词是 「直接」 两个字。过去，App 可以 「间接」 打开小程序。

比如，你在轻芒杂志 App 里读到一篇好文章，将文章分享给你的「微信好友」一起读，TA 就会收到一张小程序的分享卡片。这样，就相当于 App 间接打开了小程序。

现在，App 可以 「直接」 打开小程序。 对于已经拥有 App 的内容创作者，可以开发一些非常适合微信生态传播的小程序，比如基于内容的答题游戏。

用户可以将答题游戏轻松地分享给微信好友，进行对战，或者进行闯关挑战，从而帮助品牌触达新用户。 两个显而易见的好处 轻芒工程师表示，「App 直接打开小程序」显而易见的好处有两个： 第一，路径缩短。

过去，从 App 打开小程序需要 3 步，现在只需要 1 步。 Before: App → 分享给「微信好友」→「微信好友」收到小程序卡片 → 打开小程序 After: App → 打开小程序 第二：开发成本降低。

过去，「轻芒头脑战」只有小程序的版本，如果 App 要用上头脑战，就需要重新开发；现在，可以从 App 直接跳转到「轻芒头脑战」的小程序，大大降低开发成本。 微信不允许做小程序分发 「App 直接打开小程序」很容易让人想到，那就可以做小程序的分发平台（应用商店）了。

微信当然也想到了，所以做了限制： 一个移动应用只能最多同时绑定 3 个小程序，每月支持绑定 3 次。同一个小程序可被 500 个移动应用关联。

这个规定，用通俗的话来解释就是： 一个小程序可以有 500 个好友（App）。 一个 App 却只能有 3 个好友（小程序），同时每个月都有 3 次机会换好友。

这就意味着一个 App 每月只能打开 3 个小程序，所以还是做不了应用商店，没办法做第三方的分发。 从小程序跳转到 App 呢？ 正所谓，礼尚往来。

从 App 到小程序的事情，我们大概理解了。其实从小程序跳转回 App，微信也是支持的。

但是也做了比较多的限制。简单来说就是，只允许从用户分享的小程序卡片，「原路」跳转回 App，而不能从小程序的任意页面返回 App。

可以看一下「大众点评」的例子：阿禅在大众点评 App 上看到一个好的餐厅，他分享给「微信好友」，「微信好友」打开这个大众点评的小程序卡片，就可以通过「打开 App」按钮，原路返回 App——前提是你的「微信好友」安装了这个 App，所以从小程序跳回 App 的功能和使用场景，目前更适合大部分人手机常备的 App。

2 小程序是怎么做出来的

一、小程序和APP有什么区别 商机，我觉得小程序或是APP都需要一个好的点子+超强的执行力+运气，但是小程序在微信中更易传播、用户进入门槛更低。

只要小程序有意思、有新意很有可能能获取井喷式的用户增长，比如之前的朋友印象、工具类的传图识字等等。区别的话主要是：APP：可无限拓展，较高的自由度，适用于一些功能复杂、对交互、设计有要求的应用，用户可更加方便的长期使用微信小程序：触手可及，用完即走，开发较为简单，但必须依赖于微信很难进行扩展延伸，即功能受限于微信提供的接口，适用于功能单一、低频的应用 如果细分的话也可以从以下几点来说1、起源APP：全称为移动应用程序（mobile application），是设计给只能手机、平板电脑等设备运行的一种应用程序，目前主流的移动设备 *** 作系统为Android和iOS，距离2018年发布已超过十年。

微信小程序：是一种不需要下载安装即可使用的应用，用户通过微信扫一扫或搜一搜即可打开，2017年1月正式上线。2、用户群体APP：面对所有智能手机用户，2017年智能手机用户为26亿。

微信小程序：面对所有微信用户，微信日活超过8亿。3、使用APP：固定在桌面上，随时可用微信小程序：按照最近使用时间倒序排列，使用时需进行扫码/查找4、下载APP：需要从应用商店下载所对应的安装包，才可使用微信小程序：通过微信扫描二维码/扫面小程序码/搜索即可进入小程序直接使用5、功能APP：可实现较为完整的功能微信小程序：因受限于平台仅可实现部分功能，一般小程序功能都较为单一6、适配APP：需要针对不同手机进行适配微信小程序：一次开发可适配所有手机7、开发周期APP：开发成本高，开发周期较长微信小程序：开发成本低，平台已提供较多的接口供使用，开发周期短8、市场APP：中国2017年上线APP为500万左右微信小程序：上线小程序数量58万 二，小程序是如何做出来的，下面我们来看看小程序如何制作。

方法1、微信官方简易教程 我们先来看看微信官网给出的简易教程。起步基础，注册小程序帐号之后，需要安装开发工具，然后在官方开发工具里面输入代码制作。

基础代码构成：JSON 配置：我们可以看到在项目的根目录有一个 appjson 和 projectconfigjson，此外在 pages/logs 目录下还有一个 logsjson，我们依次来说明一下他们的用途。小程序配置 appjson,appjson 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等 WXML 模板：从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

WXSS 样式：WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。新增了尺寸单位。

在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

提供了全局的样式和局部样式。和前边 appjson, pagejson 的概念相同，你可以写一个 appwxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 pagewxss 仅对当前页面生效。

此外 WXSS 仅支持部分 CSS 选择器 JS 交互逻辑：一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的 *** 作。

嗯，上面是官方定义的“简易教程”基础中一小部分，对的，简易教程，“简易”。

介绍到这里我已经感觉不到所谓的“简易”二字了。

做完基础还有更高级篇等着你，框架，组件，API，工具。这几个词看着简单，展开的内容足够写几本教科书了。

第二种方法 第三方平台开发小程序 官方教程定义是否简易我们就不做文章解析了，对于一个商家和企业，我做个小程序还需要了解如此多的代码知识。或者有人说，我可以请个程序猿和设计狮，可以，土豪请随意，但是一个程序猿也需要花时间去敲代码，设计。

这一整套制作下来，聪明的人少则一两个月，多着半年，甚至几年都没学会的。在目前竞争如此激烈的社会，我们企业和商家讲究的都是时间就是金钱，同行竞争，抢占先机。

你还会愿意花这么多时间去学习，敲代码，甚至请人提高成本吗？我想你们的回答都是，否。那么那有没有办法可以让我们轻松且快速地制作小程序呢？当然有！我们只需要用到「速成应用」小程序可视化制作工具，马上就可以制作出好看的多功能的全行业的小程序，轻松应对各行各业的应用场景。

下面我们看看如何无需代码基础，轻轻松松制作小程序，教你搞定小程序制作！小程序可视化制作工具的装修界面，可以清晰的看到左边有“页面、组件、模块、模版”等功能。中间是可视化设计界面，右边是设置。

1、组件 组件功能里面可以添加文字、、视频、文章和和商品列表等元素，都可以自。

3 自己怎么做个小程序

说到小程序开发，应该是目前最火的互联网应用。自从小程序上线以来就受到用户和商家的火热追捧，直至现在已经成为互联网最大的流量入口，自开放个人开发者以来，更是大批开发人员一拥而上。至于要如何开发一个微信小程序，首先，微信小程序开发的定义很广，可以是指个人开发，企业开发，也可以是技术代码开发，也可以是第三方技术公司开发。我们首先来理清楚几个问题。

谁可以开发小程序？

微信小程序是腾讯在微信生态下提供的一种不需要下载安装即可使用的应用，类型为企业、 、媒体、其他组织或个人（主体是「个人」的小程序不支持小程序认证，注册时请勿选择「个人」）的开发者，均可申请注册。这两个基础问题清晰之后，我们再来看看如何拥有自己的小程序？

商家一共有两种方式可以拥有自己的小程序：

1第一种为自主开发，商家可以自行找设计师、找产品、找技术，学习微信接口文档，经过漫长的开发周期，不定期的技术接口升级，花费昂贵的开发费用来拥有小程序。虽然开发门槛相对较低，难度不及APP，但自己要开发一个小程序也需要2-3个技术人员耗费数万元以及若干月来实现，且实现后功能需要不断完善迭代，代价较高也耗费精力。

2另一种方式，商家可以使用成熟的小程序商城系统，无需商家自行开发，即可享受专业的技术服务和丰富的营销工具，助力商家轻松获客，更支持商家个性装修及海量模板套用两种装修方法，省心省时。这些商城小程序系统为商家免去了自己开发的繁杂过程，仅需按照注册流程即可快速拥有属于自己的小程序店铺。同时为小程序提供丰富多样的营销功能和展示组件，满足商家的各项场景需求和功能需求。

4 如何制作小程序

制作小程序有以下几种方式：

1、个人开发，这个需要懂得开发技术代码的编写，你想要专职做个人开发或者兴趣开发都是可以，前提是要学好编程开发语言，小程序开发也是一门技术，技艺精湛才能更好带来赚钱

2、找开发公司开发，这个需要设计好小程序的功能和版面，其实和APP是同样的道理，给别人开发当然你得全程跟踪进度，还要测试功能能否正常，最重要的是价格得了解清楚

3、还有一种就是找一个小程序开发平台，他们有模板商城你可以注册进去搭建，支付使用费用，价格有高有低，看哪个平台适合就选择哪个

4、小程序现在正朝着APP的功能改进，目前来讲，小程序还没有达到APP那种样子的，功能和界面，UI设计都还在不断改善之中，不过，事物是向前发展的，小程序开发也是热门，功能会越来越完善，是完全能够做到跟APP功能一样了

5、现在上线了很多小程序，各行各业都有，你打开微信，找到小程序，直接打开附近的小程序就可以看到13个类目下的各种小程序了，现在太热门了，小程序也是多得不得了了。

近日，快手上线了一款微信小程序「早安看看」，总的来看是一款针对中老年的短视频小程序。

小程序主要由两部分组成，「看视频」和「制作音乐相册」，分别对应观看和创作短视频。

「看视频」部分以Feed流形式展示视频内容，需点击进入播放观看。这一点与快手类似，但每个视频的展示面积比快手更大，展示时也搭配醒目的大字体标题。

在Feed流页面中，绿色的分享按钮就十分醒目。按钮上的文字是「转发家人朋友」，中老年用户一看就懂。除此之外，绿色的分享按钮在视频播放页的底部也占据了很大一部分面积，这个按钮在单击屏幕隐藏进度条后也不会消失。另外，在播放结束之后，页面也会d出分享视频的按钮。

产品在引导中老年用户分享这个方面可谓是狂轰滥炸。

在视频播放页，我们可以看到橘**的「送花」按钮，本质上是点赞功能，双击也可以实现同样的效果，与快手一致。

除了推荐页面，主页顶部tab导航栏也有「奇闻」，「养生」，「祝福」等子类别。

小程序主页底部tab的正中央就是「制作音乐相册」的入口，主要功能是将用户选中的配上音乐以及模板制作成短视频。

点击进入之后，用户可以直接选择现成配好音乐的模板，也可以自己搭配模板和音乐。整个制作流程简单易懂。

点开好友制作的音乐相册，点击红色的「我也做一个」按钮可以直接进入制作页面。

总的来说，「早安看看」是一款为中老年人适配的短视频应用。醒目的按钮、口语化的文案和简单的动作流程使中老年用户也能快速上手使用。

不将「早安看看」做成一款APP也许是在简化用户体验，因为中老年用户群体更愿意在微信上进行社交。

最近一段时间，快手先后推出了「态赞」、「青春记」、「毛柚」等短视频产品，针对不同的年龄层以及垂直品类进行布局。快手能否有效缩短与头条系产品矩阵的差距，还需拭目以待。

小程序白屏，多数以华为畅享机型，iphone6P机型，荣耀8为主，主要表现为小程序刚进去时显示正常，来回切换几个页面后，个别页面就出现白屏啦。二个可能:1小程序底层框架适配出bug啦；

2小程序运行环境出问题啦，如：手机运行内存不够；

wxml是编写小程序的骨架页面

“/”根目录下

只有用text组件包围的文字才可以长按选中在小程序中。

<view></view>没有什么实质性的功能，就跟div一样是用来布局的。

pt：逻辑分辨率，与长度有关

px:物理分辨率，与长度无关，跟点有关

为什么模拟器下ip6的分辨率是375px;而设计图给的是750px

小程序模拟器给的是逻辑分辨率，设计图是物理分辨率，两个之间是2倍关系。所以设计图的尺寸要除以2,如果是用px做单位的话。

再增加物理像素点人眼已经分辨不出来

以上就是关于微信小程序 iPhone刘海屏系列机型适配全部的内容，包括:微信小程序 iPhone刘海屏系列机型适配、小程序如何动态设计响应式数据、w21微信小程序不能全屏显示等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！