标签：frame htm html https ndt item out sage --
最近因公司需要，开发抖音的小程序。下面我总结一下我自己的一些体会，会随时更新。
字节跳动小程序官方文档 https://microapp.bytedance.com/homepage
可在抖音最上方的搜索页面，通过扫一扫扫描之后进入小程序
1. 抖音小程序编辑器（字节跳动开发者工具）
编辑器功能尚不完善，没有搜索功能；
编译过程较慢；
至今不知道怎么查找小程序的ID，我用的都是别人帮忙找的；
字节跳动开发者工具文件的后缀是.ttml，如果直接把微信小程序搬过来也可以用，但是还是建议将后缀名
更改为正确的格式
2. 兼容方面：
1. 抖音小程序对自定义顶部导航的兼容性不是很好；
案例：之前开发小程序，需要隐藏系统自带顶部导航，自定义导航样式（这个功能在我的博客中有详解），
但是在安卓上不会将最顶部的手机信息隐藏掉，所以顶部导航会向下排布，IOS上没有这个问题；
所以建议还是用系统自带的顶部导航吧；
对iPhoneX的底部横线的兼容是没有问题的；
2. 抖音小程序的 ‘swiper’ 组件设置前后边距样式（previous-margin/next-margin），需将单位改为px
3. 小程序的video组件层级最高，且无法覆盖，编辑器没有问题，但是在手机上会有问题，所以慎用video组件
以下是抖音小程序功能组件：
<!--ttml-->
<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--> <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 }) } })
标签：frame htm html https ndt item out sage --
原文地址：https://www.cnblogs.com/lanshu/p/11663182.html
