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

Dear 丶 2021-11-29 11:52 407阅读 0赞

微信小程序开发实战教程

# **一、微信小程序** #

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

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

## **1.1 注册** ##

<table style="width:695px;"> 
 <tbody> 
  <tr> 
   <td> <p>1&nbsp;<img title="51666301733241815536.png" src="https://www.icketang.com/static/upload/201907/51666301733241815536.png" alt="图片1.png"></p> <p>2&nbsp;点击立即注册：进入下方页面</p> <p>3&nbsp;<img title="79968380961018047780.png" src="https://www.icketang.com/static/upload/201907/79968380961018047780.png" alt="图片2.png"></p> <p>4&nbsp;点击小程序进入表单填写页面</p> <p>5&nbsp;<img title="05138602363353881407.png" src="https://www.icketang.com/static/upload/201907/05138602363353881407.png" alt="图片3.png"></p> <p>6&nbsp;填写完毕之后提交，会让你去邮箱中激活。激活之后就可以进入小程序开发了。</p> </td> 
  </tr> 
 </tbody> 
</table>

## **1.2 安装开发工具** ##

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

下载地址：

<table style="width:695px;"> 
 <tbody> 
  <tr> 
   <td> <p>1&nbsp;<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html" rel="nofollow">https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html</a></p> </td> 
  </tr> 
 </tbody> 
</table>

进入之后，会看到让你选择版本的信息。

选择对应的版本进行安装。 例如：我的电脑就是windows64位操作系统，那么我就选Windows 64位

点击之后就会开始下载

下载完毕之后，得到一个安装包

双击进行安装，下一步下一步直到结束。

安装完毕之后，会自动打开登录界面。有一个二维码，通过微信扫描该二维码登录。

登录之后

## **1.3 创建小程序项目** ##

点击上图中的小程序项目

AppId： 小程序的id。你通过注册之后会得到一个id。输入它即可。

我们现在没有注册完毕，只能点击测试小程序进行测试

项目名称： 你当前创建的项目的名称 这是唯一的。

填写完毕之后：

建立普通快速启动模板： 如果勾选 则会在项目目录下 自动创建一个demo案例

点击确定之后，编辑器会启动

预览窗口： 你编写的小程序的预览窗口，可以进行点击 其实就是一个手机模拟器

功能窗口： 许多功能按钮

代码编辑窗口：代码可以在这里编辑

调试窗口： 代码书写过程中，调试时，会在这里输出一些信息。也有控制台的功能也有文档结构的功能。

## **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 插值** ##

插值模板:

<table style="width:695px;"> 
 <tbody> 
  <tr> 
   <td> <p>1&nbsp;&lt;view&gt;{ {num * 2}}&lt;/view&gt;</p> <p>2&nbsp;&lt;view&gt;{ {title.toUpperCase()}}&lt;/view&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

插值数据的定义：

<table style="width:695px;"> 
 <tbody> 
  <tr> 
   <td> <p>1&nbsp;data: { </p> <p>2&nbsp;&nbsp;&nbsp;num: 123,</p> <p>3&nbsp;&nbsp;&nbsp;title: "aichuangketang"</p> <p>4&nbsp;}</p> </td> 
  </tr> 
 </tbody> 
</table>

渲染之后：

## **4.2 修改数据** ##

要使用页面去修改数据:

this.setData(option);

option 是一个对象

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

value: 要修改的对应key的值

demo:

更改数据之前：

更改代码：

<table style="width:695px;"> 
 <tbody> 
  <tr> 
   <td> <p>1&nbsp;onLoad: function (options) { </p> <p>2&nbsp;&nbsp;&nbsp;var me = this;</p> <p>3&nbsp;&nbsp;&nbsp;console.log("index页面页面加载")</p> <p>4&nbsp;&nbsp;&nbsp;setTimeout(function() { </p> <p>5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.setData({ </p> <p>6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title: "爱创课堂",</p> <p>7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"obj.name": "王老四"</p> <p>8&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})</p> <p>9&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(me)</p> <p>10&nbsp;&nbsp;&nbsp;}, 3000)</p> <p>11&nbsp;},</p> </td> 
  </tr> 
 </tbody> 
</table>

代码执行之后：

## **4.3 数据丢失** ##

更改数据，一定要通过setData方法来修改。因为它是微信提供的方法。

如果使用点语法或者方括号语法直接修改属性的值。则无法渲染到页面上。这就叫做数据丢失。

注：尽量只更改关键的信息。

demo:

更改数据之前：

更改代码：

<table style="width:695px;"> 
 <tbody> 
  <tr> 
   <td> <p>1&nbsp;setTimeout(function() { </p> <p>2&nbsp;&nbsp;&nbsp;me.data.title = "爱创课堂";</p> <p>3&nbsp;&nbsp;&nbsp;console.log(me.data)</p> <p>4&nbsp;}, 3000)</p> </td> 
  </tr> 
 </tbody> 
</table>

数据状态：

页面状态：

数据已经被修改，但是页面没有发生变化。

# **五、事件** #

根据事件的特性，有两类

所有组件都拥有的事件 通用事件

touchstart 触摸开始

touchend 触摸结束

touchmove 触摸移动

touchcancel 触摸取消

tap 轻按

longtap 长按

longpress 长按

transitionend 过渡完成

animationstart 动画开始

animationend 动画结束

animationinteration 动画执行一次就触发一次

还有一类是某些（个）特定组件的特有事件

例如表单的提交事件

根据事件的绑定方式，也可以分成两类

一类是冒泡事件

bind\[eventName\]

另一类是不冒泡事件

catch\[eventName\]

## **5.1 绑定冒泡事件** ##

组件结构：

<table style="width:695px;"> 
 <tbody> 
  <tr> 
   <td> <p>1&nbsp;&lt;!--pages/event/event.wxml--&gt;</p> <p>2&nbsp;&lt;view&nbsp;bindtap='parent'&gt;</p> <p>3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;view&nbsp;bindtap='show'&gt;我是一个组件&lt;/view&gt;</p> <p>4&nbsp;&lt;/view&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

对应的js代码：

<table style="width:695px;"> 
 <tbody> 
  <tr> 
   <td> <p>1&nbsp;// pages/event/event.js</p> <p>2&nbsp;Page({ </p> <p>3&nbsp;</p> <p>4&nbsp;&nbsp;&nbsp;/**</p> <p>5&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;页面的初始数据</p> <p>6&nbsp;&nbsp;&nbsp;&nbsp;*/</p> <p>7&nbsp;&nbsp;&nbsp;data: { </p> <p>8&nbsp;&nbsp;&nbsp;</p> <p>9&nbsp;&nbsp;&nbsp;},</p> <p>10&nbsp;&nbsp;&nbsp;//&nbsp;定义show事件</p> <p>11&nbsp;&nbsp;&nbsp;show: function() { </p> <p>12&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log("点击我了");</p> <p>13&nbsp;&nbsp;&nbsp;},</p> <p>14&nbsp;&nbsp;&nbsp;//&nbsp;定义parent事件</p> <p>15&nbsp;&nbsp;&nbsp;parent: function() { </p> <p>16&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log("点击到爸爸了")</p> <p>17&nbsp;&nbsp;&nbsp;}</p> <p>18&nbsp;})</p> </td> 
  </tr> 
 </tbody> 
</table>

点击之后：两个事件都会输出

## **5.2 绑定不冒泡事件** ##

组件结构：

<table style="width:695px;"> 
 <tbody> 
  <tr> 
   <td> <p>1&nbsp;&lt;!--pages/event/event.wxml--&gt;</p> <p>2&nbsp;&lt;view&nbsp;bindtap='parent'&gt;</p> <p>3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;view&nbsp;catchtap='show'&gt;我是一个组件&lt;/view&gt;</p> <p>4&nbsp;&lt;/view&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

代码

点击之后：只有子元素的事件触发 父元素的事件没有触发

## **5.3 事件对象** ##

查看事件对象：

changedTouches: 改变的手指的列表

currentTarget: 绑定事件的组件

id: 当前组件的id

offsetLeft: 该组件的距离父组件的left值

offsetTop: 该组件的距离父组件的top值

dataset: 该组件的自定义数据

detail: 手指位置

target: 触发事件的组件