1.认识

01如何安装和使用微信小程序

每个微信小程序的唯一标识是appid。

微信小程序的概念：在微信内被便捷地获取和传播，良好的用户体验，不需要下载即可使用，体积非常小的用于连接用户与服务的应用。

微信小程序的发展前景：开发成本低、微信用户数量大

微信小程序的特点：无需安装、触手可及，用完即走、无须卸载，名称唯一，入口丰富，传播能力强。

经济决定就业，人口影响教育。

微信小程序官方文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/

小程序注册网站：

https://mp.weixin.qq.com/wxopen/waregister?action=step1

网易邮箱：

https://mail.163.com/

微信小程序可以跨平台，微信小程序的宿主环境（Host Environment，程序运行所依赖的环境。）是微信客户端，宿主环境为微信小程序提供了丰富的API和组件。

步骤：
1.打开小程序注册网站，使用qq邮箱注册，注册成功后打开邮箱网站，进入小程序开发管理，将开发者id记在电脑桌面记事本。
2.安装微信开发者工具，傻瓜式安装
3.安装好后，打开软件，点击+号，然后先将路径改为自己的项目路径，再将路径后加“\lesson1”，改完后填写AppID，再将选项改为“不使用云服务”，最后将分类选择为“不使用模版”，点击确定即完成。

02项目结构

小程序根目录下，有三个app开头的文件（app.js，app.json，app.wxss）、project.config.json文件和两个文件目录（pages，utils）。其中，util文件下存放工具类文件。微信小程序的一个页面一般由多个文件组件，分别是js、json、wxml、wxss。

● pages：用来存放微信小程序的的所有页面。

● .eslintrc.js：用来格式化代码，使代码风格保持一致。

**● app.js：微信小程序的入口文件，用来描述微信小程序的整体逻辑。App()>是该文件的入口函数 **

● app.json：微信小程序的全局配置文件，用来设置页面路径、窗口外观、页面表现、标签栏等。

● app.wxss：微信小程序的全局样式文件，文件可以为空。

● project.config.json：在微信开发者工具上做的任何配置都会写入这个文件中，当重新安装工具或者更换计算机工作时，只要载入同一个项目的代码包，微信开发者工具会根据该文件自动恢复成开发微信小程序时的个性化配置。

● project.private.config.json：用于保存微信开发者工具 的私人配置，配置的优先级高于project.config.json。

● sitemap.json：用于配置微信小程序及其页面是否允许被微信索引，如果没有该文件，则默认为所有页面都允许被索引。

● JS：类似网页制作中的JavaScript语言，用于实现页面逻辑和交互，文件扩展名为.js。注意，微信小程序的JS中不含DOM和BOM,不可以使用DOM和BOM，但它提供了丰富的API，可以调用它封装的API。

● JSON（JavaScript Object Notation，JavaScript对象符号）：对页面进行配置，文件扩展名为.json。注意，在微信小程序中.json全部与配置相关。

● WXML（Weixin Markup Language）：类似于网页制作中的HTML语言，用于构建页面结构，文件扩展名为.wxml。

● WXSS（WeiXin Style Sheets，微信样式表）：类似于网页制作中的CSS语言，用于设置页面样式，文件扩展名为.wxss>。

通信模型：微信小程序实现了渲染层（wxml和wxss）、逻辑层和第三方服务器的通信。

.js表示逻辑与交互，.wxml表示结构。

2.页面设计1

01 wxml和html的区别：

①使用标签不同。

②wxml提供了和vue.js中模版语法类似的模版语法，而html没有。

③html在浏览器浏览，而wxml在微信或开发工具中。

④wxml标签必须有结束符</>。

02 wxss和css的区别：

①单位不同：css：px，wxss：rpx。

②wxss不能使用本地图片。

③wxss又去据央视文件爱你，而css没有。

03 组件

组件相当于html的标签。

3.1 view

view组件表示视图容器，常用于实现页面的布局效果。

①hover-class：点击时直接出现样式。

②hover-stay-time：点击态持续多少秒，单位是毫秒。

③hover-start-time：隔多少秒再出现点击态。

3.2 image

image组件默认宽度300px，高度225px。

rpx（Responsive Pixel，自适应像素）单位是微信小程序独有的，用来解决屏幕适配问题的尺寸单位，将手机屏幕分成750份。

1 px=750/物理宽度 rpx

1 rpx=物理宽度/750 px

例如：关于rpx和px的换算，当屏幕宽度为320px时，1rpx ≈ 0.427px。

3.3 swiper

swiper组件表示滑块视图容器，用于创建一块可以滑动的区域，即轮播图。

swiper-item组件表示组件的内容。

3.4 text

在微信小程序中，可以通过text组件定义行内文本。

text组件默认不换行，而设置选中要添加user-select=“true”，即长按是否允许被选中。

04 flex布局

要实现弹性盒布局，需要将父元素的displsy属性设置为flex。

05 其他

5.1 导入外部样式

@import “需要导入的外部样式表的相对路径”，中间要空格

5.2 切换编译模式

添加编译模式——“启动页面”选中要切换的路径——点击“确定”——配置.wxml的导航栏和.json文件的usingComponents。

5.3 新建页面

修改app.json里的pages属性，生成的文件夹中有4个文件：.js、.wxml、.wxss、.json

3 页面设计2

01 标签栏配置

标签栏个数在2-5之间。

02 vw、vh单位

两个都是视口（表示可视区域的大小）单位，而vw（View Width）、vh（View Height）分别表示可视区域的宽/高度。

1vh=视口宽度/100，1vh=视口高度/100

03 video组件

video组件用来播放视频，默认款300px，高225px。

04 表单组件

input 输入框

radio-group 单选按钮容器

radio 单选按钮的内容

checkbox-group 复选框容器

checkbox 复选框的内容

button 按钮

4.页面的交互1

01 Page()

参数是一个对象，微信小程序的所有js代码都要写在这个参数里面，通过该对象可以指定页面初始化数据（注意初始化数据data是一个对象）、页面生命周期函数（在特定的时间做特定的事。）和页面事件处理函数。

02 常用的事件

两种事件绑定的区别：

bind:tap 不阻止事件冒泡

catch:tap 阻止事件冒泡

注：事件冒泡指只会触发事件的同名事件。e：事件对象，event.currentTarget：当前对象，即被调用的对象，target是事件源，即触发事件的源头。

03 this

微信小程序开发中，this关键字代表当前页面对象。

注：页面上的变量源于data，而data的数据在当前页面，需要使用this。

04 setData()

为了实现在数据变化时使页面同步更新，微信小程序提供了setData()方法，该方法可以立即改变data中的数据，并通过异步的方式将数据渲染到页面上。

点击输入框的区别：

bind:input 每输入一个值就会渲染一次，输入多个就会渲染多次

bind:change 每次输入一次失焦后只渲染一次

05 wx:if

条件渲染通过标签的wx:if控制属性来完成。

wx:if，wx:elif，wx:else

06 hidden属性

hidden属性为true时隐藏，为false时显示。

hidden属性所在的组件始终都渲染在页面上，wx:if所在的组件在页面加载时不都会被渲染。

hidden的初次渲染开销更大。

频繁切换显示和隐藏时wx:if开销更大

5.页面的交互2

01 自定义属性

data-*（注，星号表示自定义属性名称）,在事件处理函数中通过target或currentTarget对象的dataset属性可以获取数据。dataset属性是一个对象，该对象的属性与data-*自定义属性相对应。

②使用bind或catch:事件名去绑定事件后，在js文件定义的函数中使用this.setData()修改。

③修改属性用e.currentTarget.dataset.属性名，注：属性名要全小写，js大小写敏感。

02 模块

模块的引用和暴露都和js中一样。

module.exports暴露 require 引入

03 列表渲染

wx:for，会根据列表中数据的数量渲染相应数量的内容。

索引 index，数组的某个值 item ，每一项设置唯一标识 key

04 网络请求

wx.request()发起网络请求

//什么是客户端 什么是服务器

客户端（Client）是指与服务器相对应并为客户提供本地服务的程序。 除了仅在本地运行的某些 应用程序外，它们通常安装在普通客户端上，并且需要与服务器一起使用。

服务器端：顾名思义是服务的，客户端发送的请求交给服务器端处理，是以response对象存在，务器端处理完毕后反馈给客户端。

//ip地址的作用 端口号的作用

ip地址相当于身份证，定位到某一台电脑（能找到你的主机），网络的唯一标识设备。

端口号则是定位到电脑的某一服务（能找到主机的一个应用或程序，软件的一个标识符）。

//get请求和post请求的用法和区别

get获取找资源，post用于提交数据或创建，更新数据

get请求的参数放在URL中 ，post请求的参数放在body中。

05 提示框

wx.showLoading()弹出加载提示框，不会自动关闭，需要调用wx.hideLoading 关闭加载框

wx:showToast 显示提示框

06双向数据绑定

双向绑定能实现数据的动态更改。

用法：model:value=“{{变量名}}”

6.常见API1

01 scroll-view

scroll-view组件支持横向滚动和纵向滚动，默认是不滚动的。

注：scroll-view组件中内容的宽度和高度大于scroll-view组件本身的宽度和高度时可以实现滚动。

02 背景音频API

wx.getBackgroundAudioManager()方法

注意：开启微信小程序的背景音频播放功能，需要在app.json文件中配置 “requiredBackgroundModes”: [“audio”]

03 音频API

wx.createInnerAudioContext()方法

区别：背景音频API：背景音乐，支持后台播放；音频API：微信语音。

InnerAudioContext实例常用的属性和方法与BackgroundAudioManager实例常用的属性和方法相同，但是InnerAudioContext实例没有title属性。

// 创建InnerAudioContext实例

var audioCtx = wx.createInnerAudioContext()

// 设置音频资源地址

audioCtx.src=127.0.0.1:3000/1.mp3'

// 开始播放

audioCtx.play()

04 选择媒体API

wx.chooseMedia()方法

05 文件上传API

wx.uploadFile()方法，发送post请求。

06 图片预览API

wx.previewImage()

//实现多张照片预览，wxml部分
<view wx:for="{{imgs}}">
<image src="{{item}}" bind:tap="preview" data-index="{{index}}"></image>
</view>
//js部分
preview: function (e) {
    wx.previewImage({
      urls: [this.data.imgs[e.currentTarget.dataset.index]],
    })
  }

7.常见API2

01 动画API

wx.createAnimation()

02 map组件

03 地图API

04 位置API

05 路由API

用于实现页面跳转。

wx.navigateTo()跳转新页面，保留原页面。

wx.redirectTo()关闭当前页面，跳转新页面。

wx.switchTab()跳转每个标签页，并关闭其他所有标签页的页面。

8.用户登录

01 登录流程时序图

“用户登录”微信小程序用于为用户提供登录。

登录流程时序由微信小程序官方文档提供，通过对登录流程时序的学习，可以完成登录功能的开发。微信官方提供的登录功能可以方便地获取微信提供的用户身份标识，从而使开发者服务器能够识别每个微信小程序用户。

用户登录流程的参与角色：小程序、开发者服务器、微信接口服务

02 登录API

登录API完成登录功能的开发，wx.login() 获取用户登录凭证code，临时code只有5分钟有效。

03 数据缓存API

数据缓存API可以实现数据的缓存，从而加快读取数据的速度。

存储的最大数据长度：单个key允许存储的最大数据长度为1MB，所有数据存储上限为10MB。

同步与异步的区别：①本质上，异步同时做多件事，同步只能一次做一件事；②写法上，同步的后缀需要加上Sync，而异步不需要；③异步方法需要通过传入回调函数获取结果，同步方法通过返回值获取结果；④在发生错误时，异步方法会执行fail()回调函数返回错误，同步方法通过try…catch捕获异常来获取错误信息。

//使用异步方法存储、获取缓存数据示例
wx.setStorage({		// 存储缓存数据
  key: 'key',		// 本地缓存中指定的key
  data: 'value',		// 需要存储的内容（支持对象或字符串）
  success: res => {},	// 接口调用成功的回调函数
  fail: res => {}		// 接口调用失败的回调函数
})
wx.getStorage({		// 获取缓存数据
  key: 'key',		// 本地缓存中指定的key
  success: res => {		// 接口调用成功的回调函数
    console.log(res.data)
  },
  fail: res => {}		// 接口调用失败的回调函数
})

04 头像昵称填写

头像选择的使用方法：将button组件的open-type属性值设置为chooseAvatar，当用户选择头像之后，可通过bindchooseavatar绑定的事件处理函数获取头像信息的临时路径。

昵称填写的使用方法：将input组件的type属性值设置为nickname，当用户在此input进行输入时，键盘上方会展示用户的微信昵称，用户可以使用该昵称，也可以手动填写昵称。

05 APP函数

在微信小程序启动、显示、隐藏时执行某些操作，或者在各个页面中需要共享一些数据时使用APP()。App()函数用于注册一个微信小程序，该函数必须在app.js文件中调用，且只能调用一次。

通过getApp()函数获取App实例之后，可以访问App实例的属性或调用App实例的方法。 注：定义在App()函数的参数{ }中的方法，可以直接使用this获取App实例，不必使用getApp()函数。

9.自定义便签栏

01 自定义组件

重复使用，有利于维护。

使用：“新建文件夹”-“新建Component"

02 普通页面与自定义组件的区别

①组件的初始函数是Component()函数，而普通页面是Page()。

②组件中的data放私有变量，properties存放共有变量。

③组件的方法放在methods里面。

④组件的json问蒋总的“component":true，表示这是一个组件。

03 使用

局部使用：需要引用的页面的json文件里面。

全局使用：app.json

04 引入第三方库

①打开终端，清除缓存。

选择“.eslintrc.js"-“在内建终端中打开”-输入 npm init -y

②安装vant weapp包（开源组件库）

npm install @vant/[email protected] -s -production

③删除原有样式库并构建npm

删除app.json中的“style":“v2”,之后点击菜单栏”工具“中的”构建npm"，会自动创建miniprogram_npm文件夹，然后就可以在.json和.wxml中使用。