Web前端_微信小程序实战开发

微信小程序开发实战教程

一、微信小程序

它是一种混合开发的方式。

是安装在微信中的程序（一个程序最多2M空间）。

1.1 注册

1 

2 点击立即注册：进入下方页面

3 

4 点击小程序进入表单填写页面

5 

6 填写完毕之后提交，会让你去邮箱中激活。激活之后就可以进入小程序开发了。

1.2 安装开发工具

经过1.1注册之后，我们有了开发账号，但是没有办法凭空开发内容，我们需要下载开发工具。使用微信提供的开发工具进行开发。

下载地址：

1 https://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 <view>{{num * 2}}</view>

2 <view>{{title.toUpperCase()}}</view>

插值数据的定义：

1 data: {

2   num: 123,

3   title: "aichuangketang"

4 }

渲染之后：

1 

4.2 修改数据

要使用页面去修改数据:

this.setData(option);

option 是一个对象

key: 要修改的属性层级字符串 可以是单层级 可以是多层级

value: 要修改的对应key的值

demo:

更改数据之前：

1 

更改代码：

1 onLoad: 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 

更改代码：

1 setTimeout(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 <!--pages/event/event.wxml-->

2 <view bindtap='parent'>

3     <view bindtap='show'>我是一个组件</view>

4 </view>

对应的js代码：

1 // pages/event/event.js

2 Page({

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 <!--pages/event/event.wxml-->

2 <view bindtap='parent'>

3     <view catchtap='show'>我是一个组件</view>

4 </view>

代码

1 // pages/event/event.js

2 Page({

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: 事件类型