• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

抖音小程序基本内容

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
  • 最近因公司需要,开发抖音的小程序。下面我总结一下我自己的一些体会,会随时更新。
  • 字节跳动小程序官方文档 https://microapp.bytedance.com/homepage
  • 可在抖音最上方的搜索页面,通过扫一扫扫描之后进入小程序

1. 抖音小程序编辑器(字节跳动开发者工具)

编辑器功能尚不完善,没有搜索功能;
编译过程较慢;    
至今不知道怎么查找小程序的ID,我用的都是别人帮忙找的;

字节跳动开发者工具文件的后缀是.ttml,如果直接把微信小程序搬过来也可以用,但是还是建议将后缀名
更改为正确的格式

2. 兼容方面:

1. 抖音小程序对自定义顶部导航的兼容性不是很好;
    案例:之前开发小程序,需要隐藏系统自带顶部导航,自定义导航样式(这个功能在我的博客中有详解),
    但是在安卓上不会将最顶部的手机信息隐藏掉,所以顶部导航会向下排布,IOS上没有这个问题;
    所以建议还是用系统自带的顶部导航吧;
    对iPhoneX的底部横线的兼容是没有问题的;

2. 抖音小程序的 ‘swiper’ 组件设置前后边距样式(previous-margin/next-margin),需将单位改为px

3. 小程序的video组件层级最高,且无法覆盖,编辑器没有问题,但是在手机上会有问题,所以慎用video组件

  • 以下是抖音小程序功能组件:

数据绑定

<view> {{message}} </view>
// page.js
Page({
  data: {
    message: ‘Hello World!‘
  }
})
### 列表渲染

<!--ttml-->
<view tt:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})
<!--ttml-->

条件渲染

<!--ttml-->
<view tt:if="{{view == ‘A‘}}"> A </view>
<view tt:elif="{{view == ‘B‘}}"> B </view>
<view tt:else="{{view == ‘C‘}}"> C </view>
// page.js
Page({
  data: {
    view: ‘A‘
  }
})

模板

<!--ttml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
  data: {
    staffA: {firstName: ‘大林‘, lastName: ‘斯‘},
    staffB: {firstName: ‘吉尔‘, lastName: ‘丘‘},
    staffC: {firstName: ‘福‘, lastName: ‘罗思‘}
  }
})

事件

<!--ttml-->
<view bindtap="add"> {{count}} </view>
// page.js
Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
技本功丨收藏!斜杠青年与你共探微信小程序云开发(上篇) ...发布时间:2022-07-18
下一篇:
微信小程序_04 数据绑定发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap