课程目标
了解小程序技术,认识小程序的基本开发方式,为小程序技术学习打下良好的基础。
一、小程序与web区别
小程序分类
- 微信:以社交流量为载体
- 今日头条:以信息传播流量为载体
- 支付宝:以交易属性为载体
小程序特点
小程序与web在技术上的区别
- 小程序部分组件直接通过原生实现如camera、canvas、video、map 和 textarea 等
- 小程序会在端上做资源的缓存、销毁等,控制小程序的周期,让小程序能够更快速的加载
- 小程序在架构上将逻辑和渲染进行了分离,而 web 是在同一个进程中。
小程序与web在生态上的区别
- 小程序各方面限制更加严格,将渲染和逻辑分开,这样做的直接后果就是之前很多在WEB中的东⻄不能直接用了,必须在平台给定的规则进行开发,方便了平台进行管控。
- 各端提供官方入口,包括扫码,我的小程序,文章内嵌等等。并可快速分享。
- 发布被各平台管控,有着统一的应用版本管理。
小程序架构
二、小程序发展历程
三、小程序开发方案
小程序开发者工具
小程序语法介绍
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 运行时方案
想对于原生,一些情况下运行性能比较差