uh5

🔗 基于 uni-app 快速构建 H5 营销页 | document: www.uh5.org

介绍

uh5 是一个基于 uni-app 快速构建活动页、下载页、营销页等 H5 单页面开发框架。

在此，感谢 Vue.js 与 uni-app ，以及社区做出的贡献。

• 全局调用任何组件、函数、样式；
• 预设了布局组件，通过插槽（slot）快速布局；
• 内置场景所需多种高效组件，像搭积木一样；
• 提供了多种场景所需 API 及函数，事半功倍；
• 按需引入更方便，组件无需 import 及注册；
• 小巧体积使应用更快，无冗余僵尸代码；
• 0 门槛开箱即用，配置极其简单；

场景

广泛传播单页面，具有具有营销、抽奖、展示、下载目的。

此类 网络营销 需求，开发成本并不大，但很可能由于业务变化或扩展而频繁开发，使用功能齐全的 UI 框架或从头搭建配置项目显然不是明智之举，而 uh5 的组件及方法全部是为此编写，可应对大部分需求，减少了大部分重复劳动，这也是框架诞生背景。

安装

在 HBuilder 菜单栏中点击工具→插件安装，依次按照引导完成安装并重启编辑器。

uh5 依赖于 Sass，必须进行安装，否则无法正常运行。

easycom

easycom 组件模式，这意味着全部组件 无需引入和注册 便可直接在页面使用，打包后会自动剔除掉所有未使用的组件，减小项目体积及速度。

打开 pages.json 文件，在 {...} 根部写入如下代码：

"easycom": {
    "^u-(.*)": "@/uh5/components/u-$1/u-$1.vue"
}

工具函数

打开 main.js 文件，加入以下代码：

// import tools function
import uh5 from './uh5/main.js';
Vue.prototype.$uh5 = uh5;

内置样式

打开 uni.scss 文件，加入以下代码：

// styles
@import './uh5/style.scss';

Hello

<!-- components -->
<u-button type="warning">hello uh5!</u-button>

// tools function
console.log(this.$uh5)

关于单位

推荐字体和宽高等，全部使用 rpx 单位，如果特殊情况需固定尺寸，即 px。

让某个元素高度铺满整个屏幕时，推荐使用 vh vw，具体请参考 uni-app 尺寸单位。

标题栏

在 uni-app 工程中，每个页面会默认有一个 顶部标题栏，但 H5 页面似乎并无用。

打开 pages.json，在 globalStyle 配置项里添加以下代码即可去除：

"navigationStyle": "custom"

开源协议

本项目基于 MIT 开源软件许可协议，无需支付任何费用，请自由地享受和参与开源。

MIT License

Copyright (c) 2021 u-H5 [email protected]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

版权声明

请勿应用到非法领域（如赌博、传销、色情、暴力等），如因此产生的纠纷 uh5 不承担任何责任。