小程序开发入门

课程目标

了解小程序技术，认识小程序的基本开发方式，为小程序技术学习打下良好的基础。

一、小程序与web区别

小程序分类

• 微信：以社交流量为载体
• 今日头条：以信息传播流量为载体
• 支付宝：以交易属性为载体

小程序特点

小程序与web在技术上的区别

1. 小程序部分组件直接通过原生实现如camera、canvas、video、map 和 textarea 等
2. 小程序会在端上做资源的缓存、销毁等，控制小程序的周期，让小程序能够更快速的加载
3. 小程序在架构上将逻辑和渲染进行了分离，而 web 是在同一个进程中。

小程序与web在生态上的区别

1. 小程序各方面限制更加严格，将渲染和逻辑分开，这样做的直接后果就是之前很多在WEB中的东⻄不能直接用了，必须在平台给定的规则进行开发，方便了平台进行管控。
2. 各端提供官方入口，包括扫码，我的小程序，文章内嵌等等。并可快速分享。
3. 发布被各平台管控，有着统一的应用版本管理。

小程序架构

二、小程序发展历程

三、小程序开发方案

小程序开发者工具

小程序语法介绍

1.数据绑定

渲染层

<view>{{ message }}</view>

逻辑层

Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: 'Hello World!'
  }

})

2.列表渲染

渲染层

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this">
  {{idx}}: {{itemName.message}}
</view>

逻辑层

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

3.条件渲染

渲染层

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

逻辑层

Page({

  data: {
    length: 0
  }
})

3.Page 对象

渲染层

<view>
  <button type="button" bindtap="addCount">
    count is: {{ count }}
  </button>
</view>

逻辑层

Page({

  data: {
    count: 0
  },

  addCount() {
    // this.data.count = this.data.count + 1 不会引起视图更新
    this.setData({
      count: this.data.count + 1
    })
  }
})

如何提升开发效率？

Taro 是一个开放式，跨端跨框架解决方案

Taro 写法

写法对比

四、Taro 原理解析

Taro 原理简单解析如果让大家自己实现，大家会如何实现用 React/Vue 来写小程序,可以简单思考下

Taro编译时方案 - AST抽象语法树

解析、转换、生成

Taro编译时方案的缺点

无法完全抹平差异

Taro 运行时方案

想对于原生，一些情况下运行性能比较差