前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序开发入门

小程序开发入门

原创
作者头像
王秀龙
修改2021-08-27 11:35:45
4.9K0
修改2021-08-27 11:35:45
举报
文章被收录于专栏:云开发分享云开发分享

课程目标

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

一、小程序与web区别

小程序分类

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

小程序特点

小程序特点
小程序特点

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

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

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

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

小程序架构

小程序架构
小程序架构

二、小程序发展历程

小程序发展历程
小程序发展历程
小程序发展历程2
小程序发展历程2

三、小程序开发方案

小程序开发者工具

微信开发者工具
微信开发者工具
小程序语法介绍

1.数据绑定

渲染层

代码语言:javascript
复制
<view>{{ message }}</view>

逻辑层

代码语言:javascript
复制
Page({

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

})

2.列表渲染

渲染层

代码语言:javascript
复制
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this">
  {{idx}}: {{itemName.message}}
</view>

逻辑层

代码语言:javascript
复制
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

3.条件渲染

渲染层

代码语言:javascript
复制
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

逻辑层

代码语言:javascript
复制
Page({

  data: {
    length: 0
  }
})

3.Page 对象

渲染层

代码语言:javascript
复制
<view>
  <button type="button" bindtap="addCount">
    count is: {{ count }}
  </button>
</view>

逻辑层

代码语言:javascript
复制
Page({

  data: {
    count: 0
  },

  addCount() {
    // this.data.count = this.data.count + 1 不会引起视图更新
    this.setData({
      count: this.data.count + 1
    })
  }
})
如何提升开发效率?

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

Taro 写法

Taro写法
Taro写法

写法对比

写法对比
写法对比

四、Taro 原理解析

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

解析
解析

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

AST抽象语法树
AST抽象语法树

解析、转换、生成

编译过程
编译过程

Taro编译时方案的缺点

无法完全抹平差异

Taro 运行时方案

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

Taro运行时方案
Taro运行时方案
运行过程
运行过程

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、小程序与web区别
  • 二、小程序发展历程
  • 三、小程序开发方案
    • 小程序语法介绍
      • 如何提升开发效率?
      • 四、Taro 原理解析
      相关产品与服务
      云开发 CloudBase
      云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档