uni-app如何引入抖音原生页面组件使用案例
uni-app
2024-07-20 10:02:32
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文件中配置的需一致。
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
881篇文章
590人已阅读