image.png
开始课程之前，先来了解小程序相关的知识
image.png
因为有些同学对原生小程序可能还不是很了解，所以才有这节课程。带领大家简单的了解原生小程序的开发，只是讲解小程序的基本操作，更多的内容不会涉及。
就以微信小程序为例
百度搜索微信开发者工具
image.png

这里选择稳定版
image.png
注意根据自己电脑选择
image.png

下载安装后，第一打开可能需要登陆一下。微信扫一扫登陆。
image.png
image.png
点击添加一个小程序
image.png
image.png
我们来新建一个项目。
appID微信会提供测试号
image.png
image.png
添加成功后，这是初始的
image.png
选择75%，让我我们的模拟器可以全部的显示出来。
image.png
这是模拟器。打开或者关闭模拟器
image.png
编辑器，打开或者关闭
image.png
打开调试控制台
image.png
小程序模式。因为我们只讲小程序基础，所以这里选择小城模式即可。
image.png

image.png
可以添加一个编译模式
image.png
都是默认的，点击确认
image.png
就可以预览我们当前的编译页面
image.png
切换到普通的编译模式。普通编译模式就是我们的首页。
image.png
点击编译，我们的项目就会重新编译。
image.png
预览会给我们生成一个二维码。应我们的微信扫一扫就会打开 开发版的小程序，可以去预览我们当前的这个项目。
image.png

项目目录

pages放所有的页面。
image.png
utils放工具类。
image.png

文件入口 app.js
image.png
app.json是 我们项目的配置
image.png
app.wxss全局样式表。在这里写的演示，所有的页面都可以去应用。
image.png
这俩也是配置文件，我们暂时用不到
image.png

image.png

一个页面的构成

显示的就是当前index页面。
image.png
由这四个文件组成。
image.png
index.js是当前页面所有业务逻辑全写在这里。
image.png
index.json是当前页面的配置
image.png
.wxml是模板，
image.png
当前应用的样式。就是当前页面的样式，样式只会在当前页面生效。
image.png

从入口开始讲解，微信小程序怎么去开发。

默认先把里面的内容删除。
image.png
首先我们需要一个App的实例，回车选择第一个
image.png
生成下面的代码，生成了基本的生命周期
image.pngimage.png

保存文件，点击调试
image.png
image.png
把index.js也清空
image.png
都清空文件
image.png
这样页面的报错就消失 了
image.png
回到入口页面，看看生命周期都是做什么的

image.png
image.png
没有onHide的输出
image.png
image.png
点击切后台后，onHide就输出了。
image.png
所以入口必须要有一个App的实例，然后才可以正常的进入到我们的应用
image.png

app.json配置文件

image.png
pages里面有两个路径，
image.png
表示的是这两个页面。也就是我们的每一个页面都要在pages里面注册一下。
image.png
把我们的两个页面删除
image.png
删除后，没有找到这两个页面就会报错
image.png
我们新建index文件夹，
image.png
再新建index文件，。会自动生成，自动生成这四个文件
image.png
先把这俩删了
image.png
删除后。
image.png
index指的是这四个文件，不加后缀的路径。
image.png
这是我们的模板，有一个路径地址
image.png

index.js

必须要使用Page构造器，来构造我们的页面。
image.png

页面生命周期

也有基础的生命周期的方法
image.png
页面打开和关闭会分别触发onShow和onHide这两个事件
image.png
这里的生命周期是应用进入前台和后台时触发。
image.png
页面卸载时执行
image.png
这三个暂时用不到 ，先删除
image.png
都加上日志的输出
image.png

image.png
点击调试器，然后重新编译
image.png

image.png
前面这俩是app.js内的输出
image.png
这是index内的输出
image.png
同样的没有onHide和onUnload。因为我们的页面既没有卸载也没有隐藏。
image.png

结束