前端工程实训

Posted 2021-03-01 jjl0229

1. 课程安排

1. 共6天课，6个周末进行，每天6个小节。2天来学基础，4天来做项目
2. 2天基础课的内容，复习时可以参考发的小程序ppt
   1. 小程序概念、微信开发概念
   2. 小程序账号申请、工具下载使用
   3. 学习一下小程序项目结构、小程序生命周期概念
   4. 小程序中写页面的模板语法
   5. 小程序中写交互的事件的相关知识
   6. 小程序页面跳转的路由知识
   7. 小程序中异步请求的知识

2. 课程内容

1. 微信开发：因为微信有大量的用户群体，所以有大量的企业商家在微信上做生意，所以此时微信就推出微信开放平台，这个平台来服务商家，提供大量的微信基础功能（服务通知、支付等功能）供商家的开发人员使用。微信另外推出了微信公众平台来服务大量的消费者。

2. 总起来说，微信通过微信公众平台来服务消费者(toC: to customer)，再通过微信开放平台(toB: to business)来服务商家。

3. 微信公众平台，根据用户属性的不同，分为以下几种账号类型

   1. 订阅号：类似报刊杂志，它向订阅者定期推送新的消息内容，它的缺点是功能不健全，接口调用次数有限制（比如支付功能就没有）
   2. 服务号：功能强大，需要企业资质来申请，认证有400块的认证服务费。企业开发中绝大部分都是服务号（一般在企业中直接说公众号表示就是服务号）
   3. 小程序：小程序的适应用户与订阅号和服务号重叠，小程序优势在于性能好，用户体验好。
   4. 企业号：面向企业使用，适用公司内部员工的打卡、审批等行政服务。

4. 小程序

   1. 17年1月9号，微信推出小程序
   2. 理念或者说使用方式：用完即走
   3. 前端开发（web前端+app前端+桌面客户端应用的前端）的内容
      1. 给用户使用的，就需要一些展示性质的组件：ui（user interface）组件，包括文字组件、图片组件、输入框组件、按钮组件、轮播图组件等等
      2. 需要处理用户的操作以及给用户相应的反馈：事件交互
      3. 需要把交互处理的结果反馈到用户界面上：更新数据到页面上
      4. 小程序的主要内容也是上面这3块。

5. 账号申请

   因为小程序的代码最终发布到微信的服务器上，web项目是发布在自己的服务器上，所以web项目有天然的划分和确定的从属关系。小程序项目全部都在微信服务器上，就需要一种划分规则，来明确某个小程序的从属，所以需要申请账号来进行。

   1. 通过https://mp.weixin.qq.com 右上角的立即注册跳转到注册页面，填写邮箱密码验证码等信息，然后去邮箱验证激活（注意邮箱不能是在微信下使用过的邮箱）
   2. 从邮箱激活链接点开去填写信息登记，这里注意账号类型选个人，选择小程序，不要选小游戏
   3. 注册完成后，进行账号的登录

6. 工具下载

   1. 下载地址: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

   2. 根据当前电脑是windows64还是32，选择稳定版中对应的版本下载安装

   3. 安装完成后，打开工具，弹出一个二维码，使用微信扫码登录

   4. 后面使用这个工具进行小程序项目的创建和开发

   5. 创建项目

      1. 填写项目名字，项目名字默认会取项目路径的最后一层文件夹的名字
      2. 填写项目的路径，注意一定要选择空目录，因为创建项目是一个模板项目从远程下载到本地，下载的文件如果要放进一个非空的目录，遇见文件冲突等问题比较麻烦，所以就要求提供一个空目录
      3. 填写appId，在https://mp.weixin.qq.com上登录账号后台-左侧边栏【开发】- 【开发设置】-【开发者ID】- 复制appId项
      4. 选择开发模式 - 小程序
      5. 选择后台服务 - 不使用云服务
      6. 最后点击创建（注意点创建时有可能工具会自动跳到云开发模式上，这种情况删掉项目重新再创建）

   6. 删除项目

      1. 在开发者工具中-【查看所有项目】-【管理】-勾选要删掉的项目-点击【删除】（这个删除只会删除开发者工具快速打开项目的引用，不会真的删项目文件）
      2. 要想把项目文件也删掉，可以根据【查看所有项目】界面上有项目的路径，根据路径把项目的文件也删掉

   7. 梳理项目结构

      .
      ├── app.js  // 【必须】 小程序项目的入口文件
      ├── app.json // 【必须】 小程序的全局配置文件
      ├── app.wxss // 小程序的全局样式（样式：控制页面的外观表现）
      ├── pages // 文件夹 专门存放所有的页面
      │?? ├── index // 首页 页面文件夹
      │?? │?? ├── index.js // 页面的js入口文件 【必须】
      │?? │?? ├── index.json // 页面的配置文件
      │?? │?? ├── index.wxml // 页面的ui结构文件 【必须】
      │?? │?? └── index.wxss // 页面的样式文件（美化页面的）
      │?? └── logs // 日志 页面文件夹
      │??     ├── logs.js
      │??     ├── logs.json
      │??     ├── logs.wxml
      │??     └── logs.wxss
      ├── project.config.json // 项目的配置文件，这是自动生成的，不需要关心
      ├── sitemap.json // 项目的地图文件，这是给搜索引擎收录用的，也不需要关心
      └── utils // 项目的工具集文件
          └── util.js // 项目的工具文件
      
      // 1. 每个小程序至少有1个页面，页面的组成文件中，至少有.js和.wxml文件
      // 2. 每个页面由4个文件组成，这4个文件最终被小程序编译成1个文件，这1个文件是页面。页面的4个组成文件前缀名字一定要保持一致，最后使用这个前缀作为页面的名字
      // 3. 页面的路径：所在的路径+页面的名字 举例index页面的路径: /pages/index/index
      // 4. 项目必须要有app.js 入口文件和app.json 全局配置文件及上面的1所说的至少1个页面
      

   8. 生命周期与生命周期函数

      1. 生命周期：一个事物从诞生到消亡这一过程 （—————某时刻—某时刻————整体是过程）
      2. 生命周期函数（钩子函数）：当事物发展/运行到某一时刻时执行的函数
      3. 举例 网页的加载过程，有一个变量来描述网页加载的进度readyState: initial - loading - interactive - loaded - destoryed
      4. 小程序的生命周期
         1. 先启动小程序，然后再运行其中的页面（默认是显示首页，后续根据用户的操作跳转到哪个页面就显示哪个页面）
         2. 退出时：先隐藏页面，然后再隐藏小程序应用
         3. 小程序中有两个生命周期：
            1. 小程序的生命周期，它的范围大，作为一个容器来使用，内部承载任意多个页面，它是管理小程序本身运行过程，以及对其内部页面的管理
            2. 小程序中页面的生命周期，它的范围小，仅仅是显示当前这个页面使用，它是对页面内部的逻辑进行管理及对页面本身的运行过程的管理
         4. 小程序中生命周期函数
            1. 小程序的生命周期函数，是小程序这个容器本身的运行过程中某时刻关联的函数
               1. onLaunch 小程序启动时会执行的钩子函数，需要在小程序一启动就要执行的逻辑就放入这个函数中
               2. onShow 小程序显示（第一次显示，或者后续反复从前台到后台 后台再到前台的切换，只要小程序到了前台就会执行该函数）的钩子函数
               3. onHide 小程序隐藏（后续反复从前台到后台 后台再到前台的切换，只要小程序到了后台就会执行该函数 或者 直接杀掉微信）就执行该函数
               4. onError 监听到小程序出错了，就会执行这个函数
               5. onPageNotFound 监听到跳转到了一个不存在的页面，就会执行该函数
            2. 页面的生命周期函数
               1. onLoad 页面加载时执行这个钩子函数
               2. onShow 页面显示（只要到了前台，且它是当前页面）时执行
               3. onHide 页面隐藏（只要到了后台，且它是当前页面）时执行
               4. onReady 页面第一次准备好了，第一次渲染好了时执行
               5. onUnload 当页面销毁时会执行