【实战】抖音小程序开发

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

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

2.小程序的目录结构

.
├── app.js //小程序逻辑
├── app.json //小程序公共配置
├── app.ttss //小程序公共样式表
├── project.config.json //项目配置
└── pages
   └── pageA
       ├── pageA.ttss
       ├── pageA.js
       ├── pageA.json
       └── pageA.ttml

3.一个简体流程就是

根目录
- app.js和app.ttss都可以空着不写
- app.json里改一下navigationBarTitleText用来显示标题栏名称
- project.config.json里面填一下appid和projectname就行
在pages文件夹里写
- index.ttml文件里写网页结构，语法和html相似，但关键字不一样
- index.js文件，用来写函数
- index.ttss文件用来写index网页的样式

4.个位计算器的demo

实现功能：两个个位数字的+-*/运算，有两个按钮计算、随机，点击随机会自动生成不同数字和运算符，点击计算会根据当前运算式显示结果

index.ttml

<view class="intro">Welcome to Sc-test</view>
<view class="content">
    <!--显示块-->
    <view class="content_up_1">
        <picker class="calculation" value="{{index_1}}" range="{{array}}" data-value="1" bindchange="bindPickerChange" bindcancel="bindPickerCancel">
            <view class="picker">
                {{array[index_1]}}
            </view>
        </picker>
        <picker class="calculation" value="{{cal_num}}" range="{{cal_array}}" data-value="1" bindchange="bindPickerChange" bindcancel="bindPickerCancel">
            <view class="picker">
                {{cal_array[cal_num]}}
            </view>
        </picker>
        <picker class="calculation" value="{{index_2}}" range="{{array}}" data-value="1" bindchange="bindPickerChange" bindcancel="bindPickerCancel">
            <view class="picker">
                {{array[index_2]}}
            </view>
        </picker>
    </view>
<!--
<view>
    <button type="primary" bindtap="func1">页面主操作 Normal</button>
    <button type="primary" loading="true">页面主操作 Loading</button>
    <button type="primary" disabled="true">页面主操作 Disabled</button>
</view>
-->
<view class="content_up_1">
    <view class="calculation_submit" bindtap="bindSubmit">计算</view>
    <view class="calculation_random" bindtap="bindRandom">随机</view>
    <!-- <view class="calculation_clear" bindtap="bindClear">清空</view> -->
</view>

<view class="content_down">
    <view class="text">{{result}}</view>
</view>

index.js

const app = getApp()
var that

Page({
  data: {
    array: [
      1, 2, 3, 4, 5, 6, 7, 8, 9, 10
    ],
    cal_array: [
      '+', '-', '*', '/',
    ],
    index_1: 2,
    index_2: 0,
    cal_num: 0,
    result: '',
  },
  onLoad: function () {
    console.log('Welcome to Mini Code')
  },

  bindSubmit: function(e){
    var temple
    if(this.data.cal_array[this.data.cal_num] == '+') temple = this.data.array[this.data.index_1] + this.data.array[this.data.index_2]
    if(this.data.cal_array[this.data.cal_num] == '-') temple = this.data.array[this.data.index_1] - this.data.array[this.data.index_2]
    if(this.data.cal_array[this.data.cal_num] == '*') temple = this.data.array[this.data.index_1] * this.data.array[this.data.index_2]
    if(this.data.cal_array[this.data.cal_num] == '/') temple = this.data.array[this.data.index_1] / this.data.array[this.data.index_2]
    this.setData({
      result: temple,
    })
  },

  bindRandom: function (e) {
    this.setData({
      index_1: Math.floor(Math.random() * 10),//下标，0到9的随机整数
      index_2: Math.floor(Math.random() * 10),//下标，0到9的随机整数
      cal_num: Math.floor(Math.random() * 4),//下标，0到2的随机整数
      result: '',
    })
  },

})

index.ttss

.intro {
  margin: 30px;
  text-align: center;
}

.my-button {
  border-radius: 20px;
}
.my-button:after {
  border-color: #f00;
  border-radius: 40px; /* 需要设置为按钮圆角的两倍 */
}

.my-button-2 {
  border: 1px solid;
}
.my-button-2:after {
  display: none;
}

.content {  
  display: flex;
  flex-direction: column; /*orientation 排版 column:垂直 row:水平*/
}

.content_up{  
  width: max-content;
  height: 300rpx;
}

.content_up_1{
    margin-top: 20rpx;
    width: max-content;
    display: flex;
  flex-direction: row; /*orientation 排版 column:垂直 row:水平*/
 align-items: center;
  justify-content: center;
  text-align: center;
}

.picker{
  height: 80rpx; 
  color:#585858;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.calculation_random{
  width: 155rpx;
  height: 80rpx;
  border-radius:8rpx;
  margin-left: 22rpx; 
  background: rgba(83,217,105,1); 
  color:#ffffff;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.calculation_submit{
  width: 155rpx;
  height: 80rpx;
  border-radius:8rpx;
  margin-left: 22rpx; 
  background: rgb(3, 78, 16); 
  color:#ffffff;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.calculation{  
  width: 158rpx;
  height: 80rpx;
  border-radius:8rpx;
  margin-left: 22rpx;
  border:1rpx solid rgba(209,209,209,1);
  background: #F9F9F9; 
}

.text{
  height: 80rpx; 
  color:#585858;
  text-align: center;
  justify-content: flex-start;
  align-items: center ;
  margin-left: 20rpx;
  display: flex;
}

5.抖音小程序与后端交互

前端js部分(写在某个函数里面的)

const task = tt.request({
    url: '127.0.0.1:8080/index/bar', // 目标服务器url
    dataType: 'string',
    success: (res) => {
        this.setData({
        result: res.data,
        })
    },
    fail: (res) => {
        console.log('get失败')
        this.setData({
          err_inf: res.errMsg,
        })
    },
});

后端部分

func main() {
	router := gin.Default()
	router.GET("/index/bar", response)
	router.Run()
}
func response(c *gin.Context) {
	str := "123456789"
	c.String(200, str)
	fmt.Println(str)
}