uni-app如何引入抖音原生页面组件使用案例

uni-app是如今常见的多端框架之一,通过对uni-app框架的使用可以极大程度的减少工作量。

既然是多端框架自然也就需要兼容各大框架,如抖音小程序、微信小程序、APP、H5等。

本篇文章就来介绍使用uni-app多端框架,如何实现组件方式引入抖音原生页面。

一、原生抖音页面

    在项目根目录找下创建ttcomponents文件夹,创建原生页面及对应信息

    ttcomponents/index文件夹中创建,index.js、index.json、index.ttml、index.ttss

二、pages.json文件中引入抖音原生页面组件

    2.1、如我们需要在页面pages/index/index中使用组件。

    2.2、style中配置usingComponents,代码如下

{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh":true,
"usingComponents":{
"tt-pages":"/ttcomponents/index/index"
}
}
}

三、在uni-app中使用抖音原生组件

    3.1、在pages/index/index中如下使用即可。

<template>
<view>
<tt-pages></tt-pages>
</view>
</template>

注意项:

    在对应页面中使用,就需要在pages.json文件中配置usingComponents

    组件名称和pages.json文件中配置的需一致。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!