微信小程序开发实战教程

一、微信小程序

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

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

1.1 注册

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

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

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

1.2 安装开发工具

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

下载地址：

1 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

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

选择对应的版本进行安装。例如：我的电脑就是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 插值

插值模板:

1 <view>{{num * 2}}</view>

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

插值数据的定义：

1 data: {

2 num: 123,

3 title: "aichuangketang"

4 }

渲染之后：

4.2 修改数据

要使用页面去修改数据:

this.setData(option);

option 是一个对象

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

value: 要修改的对应key的值

demo:

更改数据之前：

更改代码：

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 },

代码执行之后：

4.3 数据丢失

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

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

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

demo:

更改数据之前：

更改代码：

1 setTimeout(function() {

2 me.data.title = "爱创课堂";

3 console.log(me.data)

4 }, 3000)

数据状态：

页面状态：

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

五、事件

根据事件的特性，有两类

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

touchstart 触摸开始

touchend 触摸结束

touchmove 触摸移动

touchcancel 触摸取消

tap 轻按

longtap 长按

longpress 长按

transitionend 过渡完成

animationstart 动画开始

animationend 动画结束

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

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

例如表单的提交事件

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

一类是冒泡事件

bind[eventName]

另一类是不冒泡事件

catch[eventName]

5.1 绑定冒泡事件

组件结构：

1

2 <view bindtap=‘parent‘>

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

4 </view>

对应的js代码：

1 // pages/event/event.js

2 Page({

4 /**

5 * 页面的初始数据

6 */

7 data: {

9 },

10 // 定义show事件

11 show: function() {

12 console.log("点击我了");

13 },

14 // 定义parent事件

15 parent: function() {

16 console.log("点击到爸爸了")

17 }

18 })

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

5.2 绑定不冒泡事件

组件结构：

1

2 <view bindtap=‘parent‘>

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

4 </view>

代码

1 // pages/event/event.js

2 Page({

4 /**

5 * 页面的初始数据

6 */

7 data: {

9 },

10 // 定义show事件

11 show: function() {

12 console.log("点击我了");

13 },

14 // 定义parent事件

15 parent: function() {

16 console.log("点击到爸爸了")

17 }

18 })

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

5.3 事件对象

查看事件对象：

changedTouches: 改变的手指的列表

currentTarget: 绑定事件的组件

id: 当前组件的id

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

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

dataset: 该组件的自定义数据

detail: 手指位置

target: 触发事件的组件

timeStamp：页面加载到事件触发的时间间隔

touches: 手指列表

type: 事件类型

原文地址：https://www.cnblogs.com/Vhaomei0452/p/11202479.html

时间： 2024-10-08 14:25:36

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