ftv-minapp产品特点

1. 专注大屏设备

ftv-minapp 的组件都是多端自适应的，并且是可以全程按键聚焦的。

快速开始

注意 该组件库仅对vue3项目提供支持

方式一：使用 uni_modules 安装（推荐）

使用 uni_modules 方式安装组件库，可以直接通过插件市场导入，通过右键菜单快速更新组件，不需要引用、注册，直接在页面中使用 ftv-minapp 组件。点击安装 ftv-minapp 组件库

注意：下载最新的组件目前仅支持 uni_modules ,非 uni_modules 版本最高支持到组件的1.2.10版本

如不能升级到 uni_modules 版本，可以使用 uni_modules 安装好对应组件，将组件拷贝到对应目录。

例如需更新 uni-list和uni-badge ,将 uni_modules>uni-list>components和uni_modules>uni-badege>components下所有目录拷贝到如下目录即可：

目录示例

┌─components              组件目录
│  ├─ftv-page             page 根元素目录
│  │  └─ftv-page.vue      page 根元素组件文件
│  ├─ftv-focus            focus 聚焦元素目录
│  │  └─ftv-focus.vue     focus 聚焦元素组件文件
│  ├─ftv-scroll         	scroll 可滚动目录
│  │  └─ftv-scroll.vue    scroll 可滚动组件文件
│  └─ //....              更多组件文件
├─pages                   业务页面文件存放的目录
│  ├─index
│  │  └─index.vue         index示例页面
├─main.js                 Vue初始化入口文件
├─App.vue                 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json           配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json              配置页

方式二：使用 npm 安装

在 vue-cli 项目中可以使用 npm 安装 ftv-minapp 库 ，或者直接在 HBuilderX 项目中使用 npm 。（不推荐后一种方式）

注意 cli 项目默认是不编译 node_modules 下的组件的，导致条件编译等功能失效 ，导致组件异常 需要在根目录创建 vue.config.js 文件 ，增加 @ftvs/minapp 包的编译即可正常

// vue.config.js
module.exports = {
		transpileDependencies:['@ftvs/minapp']
}

准备 sass

vue-cli 项目请先安装 sass 及 sass-loader，如在 HBuliderX 中使用，可跳过此步。

• 安装 sass

 npm i sass -D   或   yarn add sass -D  

安装 ftv-minapp

npm i @ftvs/minapp   或   yarn add @ftvs/minapp `推荐`

在 script 中引用组件：

import {ftvPage} from '@ftvs/minapp'
//import ftvPage from '@ftvs/minapp/lib/ftv-page/ftv-page.vue' //也可使用此方式引入组件

在 template 中使用组件：

<ftv-page>
  <ftv-focus>我可以聚焦</ftv-focus>
</ftv-page>

注意

• CLI 引用方式， H5 端不支持在 main.js 中全局注册组件，如有需求请使用（easyCom） 的方式引用组件
• 使用 npm 安装的组件，默认情况下 babel-loader 会忽略所有 node_modules 中的文件 ，导致条件编译失效，需要通过配置 vite.config.js 解决：

// 在根目录创建 vite.config.js 文件，并配置如下
export default defineConfig({
	transpileDependencies: ['@ftvs/minapp']
})

使用 npm + easycom

使用 npm 安装好 ftv-minapp 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom

打开项目根目录下的 pages.json 并添加 easycom 节点：

// pages.json

{
	"easycom": {
		"autoscan": true,
		"custom": {
			// ftv-minapp 规则如下配置
			"^ftv-(.*)": "@ftvs/miniapp/lib/ftv-$1/ftv-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

ftv-minapp 已支持的组件列表

|组件名|组件说明| |---|---| |ftv-page|undefined| |uni-scss|辅助样式|

其他

• ftv-minapp 是全端兼容的基于flex布局的、无dom的ui库
• ftv-minapp 是基于uni-ui组件的扩展,支持按键聚焦。

注意

• ftv-minapp 不支持使用 Vue.use() 的方式安装

贡献代码

在使用 ftv-minapp 中，如遇到无法解决的问题，请提 Issues 给我们，假如您有更好的点子或更好的实现方式，也欢迎给我们提交 PR