抖音小程序

[toc]

1.开发准备

1.注册开发者平台账号

抖音开放平台

2.开发工具

下载链接

3.界面介绍

IDE.png

官方文档

2.开发

2.1 代码构成

小程序项目中单个页面会依赖不同类型的文件：

.json 后缀的 JSON 配置文件
.ttml 后缀的 TTML 模板文件
.ttss 后缀的 TTSS 样式文件
.js 后缀的 JS 脚本文件

2.1.1 全局 配置

app.json

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON 扮演着静态配置的角色。

在项目的根目录有一个 app.json 和 project.config.json

{
  "pages": [


    "pages/index/index",
    "pages/classify/index",
    "pages/message/index",
    "pages/user/index",
    "pages/index/search/search",
    "pages/user/index",
    "pages/userInfo/userInfo",
    "pages/contactPerson/contactPerson",
    "pages/selectAddress/selectAddress",
    "pages/selectGoods/selectGoods",
    "pages/login/login"

  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "采购需求",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "./image/home_menu_1.png",
        "selectedIconPath": "./image/home_menu_1_select.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/classify/index",
        "iconPath": "./image/home_menu_2.png",
        "selectedIconPath": "./image/home_menu_2_select.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/message/index",
        "iconPath": "./image/home_menu_3.png",
        "selectedIconPath": "./image/home_menu_3_select.png",
        "text": "消息"
      },
      {
        "pagePath": "pages/user/index",
        "iconPath": "./image/home_menu_4.png",
        "selectedIconPath": "./image/home_menu_4_select.png",
        "text": "我的"
      }
    ],
    "backgroundColor": "#fff",
    "color": "#666",
    "selectedColor": "#5068E4"
  },

  "networkTimeout": {
    "request": 60000,
    "uploadFile": 60000,
    "downloadFile": 60000
  },

  "permission": {
    "scope.userLocation": {
      "desc": "用于提供个性化服务及体验"
    },
    "scope.album": {
      "desc": "用于选取图片视频，或保存图片视频到你的相册"
    },
    "scope.camera": {
      "desc": "用于拍摄图片、录制视频"
    }
  }
}

想要快速生成一个页面（即创建一个 xx.js,xx.json,xx.ttml.xx.ttss）方法
在app.json 里添加 "pages/haha/haha" 目录，就会生成对应文件

工具配置 project.config.json

通常在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等。当换了另外一台电脑重新安装工具的时候，还要重新配置。

考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到之前你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

app.js

app.js

import { api, data } from './data.js';
import { commonFun } from './common/commonFun/commonFun';


App({
  onLaunch: function (options) {
      //当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
      //接受宿主登录信息，小程序已登录则使用小程序登录信息，否则使用宿主登录信息
  },
  onShow:function (options) {
    //当小程序启动，或从后台进入前台显示，会触发 onShow
    console.log(options)
  },

  onHide:function(){
    //当小程序从前台进入后台，会触发 onHide
  },
  onError:function(msg){
    //当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
  },
  onPageNotFound:function(msg){
    //当小程序要打开的页面不存在时，触发事件的回调函数
    
  },
  globalData: {
    api, data
  },
  commonFun,

})

ttss

view{
  box-sizing:border-box;
}

比如
pages 字段：用于描述当前小程序所有页面路径，让客户端知道当前小程序页面定义在哪个目录。
window 字段：定义小程序所有页面的顶部背景颜色，文字颜色等。

其他页面说明

2.1.2 TTML 模板

<view class="container">
  <view class="userinfo">
    <button tt:if="{{!hasUserInfo && canIUse}}">获取头像昵称</button>
    <block tt:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

更多组件

2.1.3 less插件

Less是一个CSS预处理器，Less文件后缀是.less

6f39ec64b0024561ad48b62d3d47c394.png

2.1.4 更多

vc.js

// /Users/bugneo/Desktop/DY/firstTest/pages/FirstPageVC/firs``tPage.js``
Page({
  data: {
    banner:["1","2","3"],
    blockData:["0","1","2","3","4","5","6","7"]
  },

  onLoad: function (options) {


  },
  onShow: function (options) {

  },

  clickSearch:function() {
    console.log("点击搜索")
  },
})

vc.json

{
    "usingComponents": {},
    "navigationBarTitleText": "首页",
    "navigationStyle": "default"
}

vc.less

.search{
    // background-color: aqua;
    display: flex;

    .container {
        flex: 9;
        background-color: #DCDCDC;
        margin: 0px 0px 0px 20px;
        border-radius: 20px;

        .text {
            color: #666666;
            margin-left: 20px;
            font-size: 18px;
        }
    }
    .serchText {
        flex: 2;
        color: #1E90FF;
        margin-left: 20px;
        // font-size: 17px;
    }
    
    .swiper {
    background-color: bisque;
    margin-top: 10px;
    .block {
        background-color: #1E90FF;
        // width: 200px;
        // height: 200px;
        .item {
            background-color: #1E90FF;
            .bannerText {
                background-color: aquamarine;
                color: red;
                text-align: center;
                margin-left: 20px;
            }
        } 
        
    }
    
}

}

vc.ttml

    <view class="search">
      <view class="container" bindtap="clickSearch">
        <text class="text">请输入</text>
      </view>
      <text class="serchText" bindtap="clickSearch">搜索</text>
    </view>

    <swiper class="swiper" indicator-dots="true">
      <block class="block" tt:for="{{banner}}">
        <swiper-item class="item">
          <text class="bannerText">{{item}}</text>
        </swiper-item>
      </block>
    </swiper>

更多组件