微信小程序实战开发【爱创课堂】

一、微信小程序
它是一种混合开发的方式。
是安装在微信中的程序（一个程序最多2M空间）。
1.1 注册
1
2点击立即注册：进入下方页面
3
4点击小程序进入表单填写页面
5
6填写完毕之后提交，会让你去邮箱中激活。激活之后就可以进入小程序开发了。
1.2 安装开发工具
经过1.1注册之后，我们有了开发账号，但是没有办法凭空开发内容，我们需要下载开发工具。使用微信提供的开发工具进行开发。
下载地址：
1https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
进入之后，会看到让你选择版本的信息。
1
选择对应的版本进行安装。 例如：我的电脑就是windows64位操作系统，那么我就选Windows 64位
点击之后就会开始下载
1
下载完毕之后，得到一个安装包
1
双击进行安装，下一步下一步直到结束。
安装完毕之后，会自动打开登录界面。有一个二维码，通过微信扫描该二维码登录。
登录之后
1
1.3 创建小程序项目
点击上图中的小程序项目
1
项目目录：就是项目所在目录
AppId： 小程序的id。你通过注册之后会得到一个id。输入它即可。
我们现在没有注册完毕，只能点击测试小程序进行测试
项目名称： 你当前创建的项目的名称 这是唯一的。
填写完毕之后：
1
建立普通快速启动模板： 如果勾选 则会在项目目录下 自动创建一个demo案例
点击确定之后，编辑器会启动
1
预览窗口： 你编写的小程序的预览窗口，可以进行点击 其实就是一个手机模拟器
功能窗口： 许多功能按钮
目录结构： 项目的目录状态
代码编辑窗口：代码可以在这里编辑
调试窗口： 代码书写过程中，调试时，会在这里输出一些信息。也有控制台的功能也有文档结构的功能。
1.4 目录结构介绍
1.4.1 pages
这个文件夹，是用来放所有的小程序需要的页面。
该文件夹中是一个一个的子文件夹，每一个子文件夹表示一个页面。
默认创建出来的pages中有两个：1 index 就代表index页面 2 logs 就代表logs页面
1.4.2 utils
这个文件夹，是用来放所有的工具的。可以删除。
1.4.3 app.js
这个文件，叫做应用程序构造器。
整个应用程序的配置，都可以在这里面书写，主要是应用程序的声明周期函数以及全局数据。
全局的脚本文件
App({
/** onLaunch

• 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  /
  /* onShow
• 当小程序启动，或从后台进入前台显示，会触发 onShow
  */
  /**onHide
• 当小程序从前台进入后台，会触发 onHide
  /
  /* onError
• 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
  */
  })

1.4.4 app.json
这个文件，是小程序的配置文件。
配置的是小程序的内容。
这是一个JSON文件 需要使用符合规范的JSON语法。
key必须要使用双引号
不能有注释
对象的最后一个属性值之后不能有逗号

pages: 配置当前小程序在运行过程中所需要的页面
它的值是一个数组，每一个成员是一个页面文件的路径 本质上是在说明index.wxml 但是可以省略后缀
它有一个特点：如果在添加完某一项并保存之后，该文件和文件夹还没有存在，则会自动创建出来
window: 配置小程序的界面的
“window”
“backgroundTextStyle”: 背景文字颜色
“navigationBarBackgroundColor”: 导航部分的背景颜色
“navigationBarTitleText”: 导航标题文本
“navigationBarTextStyle”: 导航文本颜色
“tabBar”: 底部按钮
“list”: 每一个按钮都配置在这里面 它是一个数组
数组的成员是对象
“pagePath”: 点击该按钮的时候跳转到哪个页面 该属性的值必须是pages数组中的某一项
“text”: 文本
“iconPath”: 图标路径,
“selectedIconPath”: 选中时候的图标路径

1.4.5 app.wxss
其实就是css文件。它里面配置的内容是全局样式。类似于我们的reset.css
这是一个全局样式文件。会自动应用在所有页面中。
1.4.6 project.config.json
这是针对项目的配置。
1.5 局部文件
pages是一个文件夹，该文件夹内是子文件夹，每一个子文件夹代表一个页面。
子文件夹内：
1.5.1 局部脚本
.js文件： 局部脚本文件 该文件只对当前页面生效
Page({

/**data

• 页面的初始数据
  /
  /* onLoad
• 生命周期函数–监听页面加载
  */
  /**onReady
• 生命周期函数–监听页面初次渲染完成
  */
  /**onShow
• 生命周期函数–监听页面显示
  */
  /**onHide
• 生命周期函数–监听页面隐藏
  */
  /**onUnload
• 生命周期函数–监听页面卸载
  */
  /**onPullDownRefresh
• 页面相关事件处理函数–监听用户下拉动作
  */
  /**onReachBottom
• 页面上拉触底事件的处理函数
  */
  /**onShareAppMessage
• 用户点击右上角分享
  */
  })
  1.5.2 局部样式
  位于页面内的wxss文件，是针对当前页面的局部样式。与全局app.wxss一起负责当前页面的样式。如果有冲突，优先使用当前页面的wxss样式。
  1.5.3 页面骨架
  页面内有一个wxml文件，用于搭建当前页面的骨架。
  html文件内的标签，我们叫做元素。
  wxml文件内的标签，我们叫做组件。因为对html元素进行了封装。所以叫做组件。

二、混合开发
从一开始的浏览器只是一个内容发布器开始，到后来的WebApp。
本质上都是在网页端做事情。
Hybird就是混合开发。它的意思是： 一处开发，多端使用。
微信小程序就是属于混合开发。
混合开发有三种形式：
1 hybird 浏览器渲染
2 reactnative 原生API
3微信小程序
三、属性
对于一个html来说，内容是由标签构成的。对于JS来说，我们称标签为 “元素”。
对于一个wxml来说，内容是由标签构成的。对于JS来说，我们成标签为“组件”。
其实，wxml就是对html的标签进行了封装。封装之后，就不是元素了，而是组件。也不可以使用jQuery等内容。
3.1 通用属性
对于html的标签来说
标准属性分为两部分
一部分是所有的标签都有的属性（通用属性）
另一部分是某一些标签特有的属性（特有属性）
对于wxml的标签来说
标准属性分为两部分
一部分是所有标签都有的属性（通用属性）
另一部分是某一些标签特有的属性（特有属性）
wxml中的通用属性：
id 组件的id
class 用于通过类的形式设置样式
style 行内样式
hidden 用于隐藏组件
data-* 自定义属性
bind* | catch* 事件属性
非通用属性：
image组件的src属性等
四、数据相关
页面所需的数据定义在对应的js文件的对象中。 属性名叫做data。
微信小程序是属于数据驱动。
页面初始化时所需要的数据都必须先定义。
数据渲染的过程就是将对应的数据插入到页面中的过程。（插值的过程）
插值语法： {{}}
注：它里面并没有提供一个真正的js环境，只是一个伪环境。 只能够执行简单的运算 而不能够调用方法。
之前遇见过的插值语法：
underscore: <%=%>
MVC中: <%%>
ejs中: <%%>
ES6中： ${}
less中： @{}
sass中: #{}
4.1 插值
插值模板:
1{{num * 2}}
2{{title.toUpperCase()}}
插值数据的定义：
1data: {
2 num: 123,
3 title: “aichuangketang”
4}
渲染之后：
1

4.2 修改数据
要使用页面去修改数据:
this.setData(option);
option 是一个对象
key: 要修改的属性层级字符串 可以是单层级 可以是多层级
value: 要修改的对应key的值
demo:
更改数据之前：
1
更改代码：
1onLoad: function (options) {
2 var me = this;
3 console.log(“index页面页面加载”)
4 setTimeout(function() {
5 me.setData({
6 title: “爱创课堂”,
7 “obj.name”: “王老四”
8 })
9 console.log(me)
10 }, 3000)
11},
代码执行之后：
1
4.3 数据丢失
更改数据，一定要通过setData方法来修改。因为它是微信提供的方法。
如果使用点语法或者方括号语法直接修改属性的值。则无法渲染到页面上。这就叫做数据丢失。
注：尽量只更改关键的信息。
demo:
更改数据之前：
1
更改代码：
1setTimeout(function() {
2 me.data.title = “爱创课堂”;
3 console.log(me.data)
4}, 3000)
数据状态：
1
页面状态：
1
数据已经被修改，但是页面没有发生变化。
五、事件
根据事件的特性，有两类
所有组件都拥有的事件 通用事件
touchstart 触摸开始
touchend 触摸结束
touchmove 触摸移动
touchcancel 触摸取消
tap 轻按
longtap 长按
longpress 长按
transitionend 过渡完成
animationstart 动画开始
animationend 动画结束
animationinteration 动画执行一次就触发一次
还有一类是某些（个）特定组件的特有事件
例如表单的提交事件
根据事件的绑定方式，也可以分成两类
一类是冒泡事件
bind[eventName]
另一类是不冒泡事件
catch[eventName]
5.1 绑定冒泡事件
组件结构：
1
2
3 我是一个组件
4
对应的js代码：
1// pages/event/event.js
2Page({
3
4 /**
5 * 页面的初始数据
6 */
7 data: {
8
9 },
10 // 定义show事件
11 show: function() {
12 console.log(“点击我了”);
13 },
14 // 定义parent事件
15 parent: function() {
16 console.log(“点击到爸爸了”)
17 }
18})
点击之后：两个事件都会输出
1

5.2 绑定不冒泡事件
组件结构：
1
2
3 我是一个组件
4
代码
1// pages/event/event.js
2Page({
3
4 /**
5 * 页面的初始数据
6 */
7 data: {
8
9 },
10 // 定义show事件
11 show: function() {
12 console.log(“点击我了”);
13 },
14 // 定义parent事件
15 parent: function() {
16 console.log(“点击到爸爸了”)
17 }
18})
点击之后：只有子元素的事件触发 父元素的事件没有触发
1
5.3 事件对象
查看事件对象：
1
changedTouches: 改变的手指的列表
currentTarget: 绑定事件的组件
id: 当前组件的id
offsetLeft: 该组件的距离父组件的left值
offsetTop: 该组件的距离父组件的top值
dataset: 该组件的自定义数据
detail: 手指位置
target: 触发事件的组件
timeStamp：页面加载到事件触发的时间间隔
touches: 手指列表
type: 事件类型
六、组件
在HTML中，标签叫做元素
在WXML中，标签叫做组件。
其实，就是对元素的封装。因为无法直接使用元素所以封装，封装之后就叫做组件
6.1 view组件
对应的是div元素。
负责划分组件的区域。
它拥有4个专有属性
hover-class 当触碰之后添加什么类 （类名）
hover-start-time 当触碰之后多久添加这个类 （单位是毫秒）
hover-stay-time 类停留多久（单位是毫秒）
hover-stop-propagation 是否阻止冒泡（阻止父组件的hover-class添加）
1
2
3 我是下面的兄弟
4
5 我是一个view组件
6
7
6.2 text组件
对应span 专门针对文本
有三个特有属性：
space 决定如何处理空白符
默认是false 也就是空白折叠
nbsp 英文半角符号
ensp 半个汉字宽度
emsp 一个汉字短裤
decode 决定如何处理转移字符
selectable 决定长按是否可选中文字
1 我是一个 我是一个行内组件      >
6.3 icon组件
icon 用于定义图标
type 定义类型类型有限 success、success_no_circle、info、warn、waiting、cancel、download、search、clear
color 定义图标颜色
size 定义图标尺寸 单位是px 默认23px
1

6.4 富文本组件
文本组件内部只能够写文字，富文本组件内部什么都能写
组件名称： rich-text
通过属性 nodes定义显示内容
可选三种
文本 普通文本 内部的转义字符会支持（有限支持）
html字符串
nodes节点
本身是一个数组
[
// 一个对象表示一个节点
{
name: 节点的类型 div span p
attrs: { 表示该节点的属性
class: 类名属性
style: 样式属性
},
// 数组 表示子节点
children: [
// 一个对象表示一个子节点
{
type: 表示节点类型,
text: 节点的文本
}
]

}
]
第一种：
1
第二种:
1
2data: {
3 div: "

• 1
• 2

"
4}
第三种:
1
2data: {
3 nodes: [
4 {
5 name: “div”,
6 attrs: {
7 class: “hover”
8 },
9 children: [
10 {
11 type: “text”,
12 text: “nihao”
13 }
14 ]
15
16 }
17 ]
18 }
6.5 image组件
对应的是img元素
组件名称： image
负责显示图片 推荐使用线上的图片（因为不占小程序的空间）
src : 指定图片所在
mode: 指定如何裁剪图片
top 显示图片上方
bottom 显示图片下方
left 显示图片左侧
right 显示图片右侧
center 显示图片中部
scaleToFill 拉伸图片 图片可以完全显示 但是可能会变形
aspectFit 等比例缩放图片 优先长边
aspectFill 等比例缩放图片 优先短边 （长边会被裁剪掉）
widthFix 保持宽度不变 高度自适应
top left 显示图片的左上角
top right 显示图片的右上角
bottom left 显示图片左下角
bottom right 显示图片右下角
1

6.6 canvas组件
画布组件： canvas
属性： canvas-id 用于定义canvas的id
绘制代码：
1.onReady: function () {
2. // 定义一个canvas上下文
3. var ctx = wx.createContext();
4. // 执行行为
5. ctx.fillRect(50, 50, 100, 100);
6. // 将这些行为放到canvas上
7. wx.drawCanvas({
8. canvasId: “ickt1”,
9. actions: ctx.getActions()
10. })
11.}
绘制图像：
1.
wx: 是一个对象，起着命名空间的作用。
微信提供的方法都在它身上。等价于浏览器中的window。
wx.createContext()
用于创建一个上下文对象
wx.drawCanvas()
将上下文对象的行为放到canvas上 接受一个对象作为参数
canvasId: canvas的id字符串
actions: 要执行的操作集合
6.7 地图组件
组件名称： map
有很多属性 其中
latitude 表示纬度 ‘40.10251041128149’
longitude 表示经度 ‘116.38314396145992’
scale 表示缩放等级 取值范围 5 ~ 18 默认是 16 5最不精确 18 最精确
1.
显示内容：
1.