Fork me on GitHub

HTMLCSS拓展

字数统计: 1.8k字   |   阅读时长≈ 7分

H5手机App开发 概念

  1. 原生应用（native application，简称 native App）
  2. Web 应用（web application，简称 Web App）
  3. 混合应用（hybrid application，简称 hybrid App）

手机 App 的技术栈可以分成三类。

  1. 原生 App 技术栈 （native technology stack）

    原生技术栈指的是，只能用于特定手机平台的开发技术。比如，安卓平台的 Java 技术栈，iOS 平台的 Object-C 技术栈或 Swift 技术栈。

    这种技术栈只能用在一个平台，不能跨平台。

  2. 混合 App 技术栈 （hybrid technology stack）

    混合技术栈指的是开发混合 App 的技术，也就是把 Web 网页放到特定的容器中，然后再打包成各个平台的原生 App。所以，混合技术栈其实是 Web 技术栈 + 容器技术栈，典型代表是 PhoneGap、Cordova、Ionic 等框架。

    如果已经掌握了 Web 技术，这个技术栈就主要学习容器提供的 API Bridge，网页通过它们去调用底层硬件的 API。

  3. 跨平台 App 技术栈 （cross-platform technology stack）

    跨平台技术栈指的是使用一种技术，同时支持多个手机平台。它与混合技术栈的区别是，不使用 Web 技术，即它的页面不是 HTML5 页面，而是使用自己的语法写的 UI 层，然后编译成各平台的原生 App。

    这个技术栈就是纯粹的容器技术栈，React Native、Xamarin、Flutter、uniapp 都属于这一类。学习时，除了学习容器的 API Bridge，还要学习容器提供的 UI 层，即怎么写页面。

  4. 小结

    H5 开发主要用在混合技术栈。但是，跨平台技术栈的某些容器也会用到（比如 React Native），因为它们的 UI 层借鉴了 Web 模型。

    另外，混合技术栈和跨平台技术栈的基础，都是原生技术栈，因为最终都要编译成原生App。所以，不管使用哪一种技术栈，多多少少要了解一些各平台的原生技术。

下面就依次介绍上面三类技术栈，每个技术栈都会给出一个最简单的例子：加载网页。通过各种技术栈加载网页的不同做法，帮助大家理解它们的特点，对 App 的技术实现有一个总体的认识。

H5 手机 App 开发入门：概念篇
H5 手机 App 开发入门：技术篇

混合技术栈

h5+Cordova github 3.6k

1
2
3
4
5
6
npm install -g cordova
cordova create my-app
cd my-app
cordova platform add android
cordova platform add ios
cordova build

h5+Capacitor github 11.3k

支持 vsCode 拓展

1
2
3
4
5
6
7
8
9
10
11
12
// 添加到web项目中
npm install @capacitor/cli @capacitor/core
npx cap init [appName] [appId]


// 添加 Android iOS 依赖
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

// 打包安卓
npx cap copy android && npx cap build android

h5+ionic-framework github 50.5k

1
2
3
4
5
6
7
8
9
10
11
12
13
npm install -g @ionic/cli
// 创建 ionic vue项目模板
ionic start myApp tabs --type=vue


ionic cordova platform add ios  
ionic cordova platform add android

// 打包
ionic cordova build android
ionic cordova build ios


hbuilder云打包app

将 web 页面直接云打包成app.

跨平台技术

github start: 159k issues: 5k+

google 开发的跨平台框架 (基于(Dart 编程语言)[https://dart.cn/])，支持 移动（Android，ios）、Web、桌面(Windows、macOS 和 Linux)和嵌入式平台

优点：

  • Flutter 自带图形引擎，这意味着无需为 iOS 和 Android 分别制作界面。
  • Dart 使您能够编写额外的结构化程序代码，从而允许您创建更多层次结构和复杂功能。
  • 基于 Flutter 的移动应用程序快速高效。与其他跨平台应用程序框架相比，Flutter 提供了更显着的性能提升。

它自己实现了一套控件。打包的时候，会把这套控件打包进每一个 App，因此不存在调用原生控件的问题。不管什么平台，都调用内嵌的自己那套控件，就能做到 iOS 和安卓体验完全一致。

github start: 114k issues: 943

Facebook 掌舵, 使用 React 来创建 Android 和 iOS 的原生应用

React Native 专注于用户界面，使应用程序开发人员能够构建高度可靠的界面。 允许为各种平台创建应用程序，例如 iOS、macOS、tvOS、Web、Windows、Android、Android TV 和 UWP。 开发工具

React Native 虽然也使用 JavaScript 语言，并且写法看上去像 Web 页面，但其实所有控件都是自己定义的，编译时再一一翻译为对应的原生控件。

github start: 18.2k issues: 49

阿里开发的 Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。目前 Vue.js 和 Rax 这两个前端框架被广泛应用于 Weex 页面开发，同时 Weex 也对这两个前端框架提供了最完善的支持。

github start: 39k issues: 974

uni-app 是一个使用 Vue.js 开发小程序、H5、App的统一前端框架。

开发者使用 Vue 语法编写代码，uni-app 框架将其编译到 小程序（微信/支付宝/百度/字节跳动/QQ/快手/钉钉/小红书）、App（iOS/Android）、H5等多个平台，保证其正确运行并达到优秀体验。

uni-app x

uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。

uni-app x 没有使用js和webview，它基于 uts 语言。在App端，uts在iOS编译为swift、在Android编译为kotlin，完全达到了原生应用的功能、性能。

github start: 34k issues: 1.1k

Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。

Taro 移动端的开发基于 Facebook 的开源项目 React Native。选择 React 框架开发的 Taro 项目，经过适配可以编译成 React Native 的 bundle 文件，再通过对应平台的工具可编译为 Android 及 iOS APP。

css特效

3d折叠效果

本文介绍如何使用 CSS 实现 3D 的页面折叠动画效果(英文)

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
const Foldable = ({ width, height, src }) => {
  const [
    foldAngle,
    setFoldAngle,
  ] = React.useState(0);

  // Both our top half and bottom half share
  // a few common styles
  const sharedStyles = {
    width,
    height: height / 2,
  };

  return (
    <div style={{ perspective: 500 }}>
      {/* Top half */}
      <div
        style={{
          ...sharedStyles,
          // This property's new ⤸
          overflow: 'hidden',
        }}
      >
        {/* This image is new ⤸ */}
        <img
          src={src}
          alt="a neon Chinese alley"
          style={{
            width,
            height,
          }}
        />
      </div>

      {/* Bottom half */}
      <div
        style={{
          ...sharedStyles,

          // Only the bottom half gets a bg-image
          backgroundSize: `${width}px ${height}px`,
          backgroundImage: `url(${src})`,

          // Shift our background up to
          // make it contiguous with the
          // top half:
          backgroundPosition: `0px -100%`,

          // Apply the folding rotation:
          transform: `rotateX(${foldAngle}deg)`,
          transformOrigin: 'center top',

          // This optional prop can improve
          // performance, by letting the
          // browser optimize it:
          willChange: 'transform',
        }}
      />

      {/* Slider control */}
      <br />
      <label htmlFor="slider">Fold ratio:</label>
      <input
        id="slider"
        type="range"
        min={0}
        max={180}
        value={foldAngle}
        onChange={ev =>
          setFoldAngle(ev.target.value)
        }
        style={{ width }}
      />
    </div>
  );
};

render(
  <Foldable
    width={200}
    height={300}
    src={src}
  />
);

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。