这是我参与「第四届青训营」笔记创作活动的第1天

课堂笔记

课程大纲

发展历程
业务价值
技术解析
个人总结
引用参考

详细介绍

发展历程

17年到18年(发展初期)

19年(加速发展)

20年(发展越来越成熟)

核心数据

业务价值

1.渠道价值

由于小程序的便捷性，小程序能够为很多场景导流，如美团和美团优选微信小程序带来的导流量分别是40%和80%。

2.业务探索价值

小程序开发难度和成本低，造就了很多场景开发者能够用小程序快速试错，不断探索新的业务价值。

3.数字升级价值

从轻消费到大宗消费，小程序体现了很好的容错空间。线下小程序覆盖范围很广。

技术解析

第三方开发应用最简单最方便的方式：

WebView + JSBridge

如何管控保证安全

if(Date.now > new Date('2022-02-02')){
  document.body.innerHTML = '<h1>Hello World</h1>'
}

小程序语法

TTML

类似于Html的写法在view标签中绑定list和isOpen

<view
      tt:for="{{list}}"
      tt:if="{{isOpen}}"
      bindtap:"onTap"
/>

JS

定义Page，data中分别存放list数组和布尔类型的isOpen（用于控制计时的开关，这里默认值为true），onTap函数中打印‘tap me！’

Page({
  data:{
    list: ['a', 'b', 'c'],
    isOpen: true
  },
  onTap: function() {
    console.log('tap me!')
  }
})

TTSS

类似于CSS写法其中写了view的样式，背景色为红色，宽度为750rpx

view {
  background-color: "red";
  width: 750rpx;
}

实现番茄小时钟

番茄小时钟的整体骨架，用TTML来实现，container中有clock（用于展示时间），和两个按钮，一个重置，一个开始按钮，控制小时钟的开始和重置。

<view class="container">
  <view class="clock">
    {{timetext}}
  </view>
  <button tt:if="{{running}}" class="button" bindtap="onReset">重置</button>
  <button tt:else class="button" bindtap="onStart">开始</button>
</view>

番茄小时钟的逻辑、数据处理，用Js实现定义一个format函数用来定义分钟和秒，并且return出分钟和秒需要展示的文本内容

function formatTime(time){
  const minutes = Math.floor(time/60);
  const seconds = time % 60;
  const mText = '0${minutes}'.slice(-2);
  const sText = '0${seconds}'.slice(-2);
  return '$mText : $sText'
}

通过定时器来计算秒数，每1秒this.time-1,setDate来设置时间内容，定义了开始和重置函数，让this.time开始计时和重置时间，通过改变变量running的值来完成此功能。setTimer最终再调用setData重新赋值给timeText,onStart方法中先将time设置为默认值，再将running值设置为true,onreset方法中重新赋值给timeText,running值设置为false。

Page({
  data: {
    timeText: formatTime(DEFAULT_TIME),
    running: false,
  },
  setTimer: function(){
    this.timer = setInterval(() => {
      this.time = this.time - 1;
      if (this.time < 0) {
        clearInterval(this.timer);
        return;
      }
      this.setData({
        timeText: formatTime(this.time),
      })
    }, 1000)
  },
  onStart: function(){
    if(!this.timer) {
      this.time = DEFAULT_TIME
      this.setTimer()
      this.setData({
        running: true
      })
    }
  },
  onreset: function(){
    clearInterval(this.timer)
    this.timer = null
    this.time = DEFAULT_TIME
    this.setData({
      timeText:formatTime(this.time),
      running: false
    })
  }
})

实现样式

个人总结

重点：

第三方开发应用最简单最方便的方式
小程序语法(熟悉TTML、JS、TTSS)
实现番茄小时钟(基本掌握TTML、JS、TTSS的用法)

难点：

理解、应用小程序语法
思考怎么实现番茄小时钟

收获：

了解了小程序的发展历程
了解小程序的业务价值
学习小程序语法
掌握小程序开发(实现番茄时钟)

思考：

通过学习本节课，结合之前的前端基础，可以轻易地做出番茄时钟的案例，增大了小程序这一块的知识储备，也让我对类似案例有了更多想法。

小程序技术全解 | 青训营笔记