小程序公开课 - day1（转载）

小程序公开课 - day1

1. 技术の准备

1. HTML + CSS

   • 能够像素级还原UI设计稿
   • 掌握 CSS3 中的 Flex 布局

2. Javascript 基础

   • 数据类型、变量

   • 循环、分支、判断

   • 函数、对象、数组

   • 面向对象*、ES6*

3. 了解至少一种前端的 MVVM 框架

   • Vue
   • React
   • Angualr

2. 环境の配置

1. 安装 Node.js
2. 安装 Git 源代码管理工具
3. 安装 微信开发者工具
4. 申请 微信公众平台的开发者账号

3. 必知の基础概念

3.1 区分 开放平台 与 公众平台

开放平台 https://open.weixin.qq.com

• 概念：微信开放平台是微信对外提供开放接口的一个平台，这些开放出来的微信接口，供第三方的网站或App使用；

• 开放平台的能力：对外提供了微信分享、微信支付、微信登录等功能，从而方便第三方的网站或应用调用微信的能力。

• 注意：开放平台主要是给后台开发人员使用的。

公众平台 https://mp.weixin.qq.com

• 概念：是运营者通过公众号这个媒介，为微信用户提供资讯和服务的平台；

• 公众号的具体分类：

  • 订阅号
  • 服务号
  • 企业微信
  • 小程序
  • 小游戏

3.2 认识微信小程序

• 概念：微信小程序相比于传统的订阅号、服务号来说，用户体验更加出色，它是公众号中的新成员，是连接用户与服务的新媒介。
• 特点：体积小、方便获取与传播；用户体验好；
• 理念：用完即走；
• 业务场景
  • 适合做用完即走的应用，例如：点外卖、打车、代驾、共享单车等；
  • 不适合做重度依赖的应用，例如：音乐视频播放类、大型手机游戏类等；

3.3 小程序与App的区别

• App：直接安装并运行在手机操作系统之上；
• 小程序：必须基于手机微信才能安装和运行；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hiwRdcJt-1595645098648)(p1.png)]

3.4 申请小程序开发账号

申请开发账号的教程：https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18101214

注意：如果只是单纯体验小程序，可以使用 测试账号

4. 结构&配置

4.1 创建小程序项目

①打开小程序开发者工具，用微信扫码登录开发者工具

②点击左侧菜单中的小程序选项

③点击 + 号新建小程序项目

④填写项目名称

⑤选择项目存放路径（必须选择空目录）

⑥填写 AppID

⑦点击新建按钮

4.2 认识小程序开发者工具的界面组成结构

开发者工具主界面，从上到下，从左到右，分别为五大部分：

• 菜单栏

• 工具栏

• 模拟器

• 编辑器

• 调试器

4.3 预览小程序

通过预览功能，可以在真机环境下，快速查看小程序的实际效果

• 点击 工具栏 -> 预览 即可弹出预览窗口

• 两种预览方式：

  • 扫描二维码预览
  • 自动预览

4.4 小程序项目的结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JZ2InMqH-1595645098665)(p2.png)]

注意：

1. 对于小程序来说：app.js 和 app.json 文件是必须的
2. 对于小程序的页面来说：.js 和 .wxml 文件是必须的

4.5 小程序页面的组成部分及作用

每个小程序的页面，是由 .wxml 结构、.js 逻辑、.json 配置、.wxss 样式表 这4个文件组成的。

• .wxml : 用来描述当前这个页面的结构，同时提供了类似于Vue中指令的语法