2023年7月17日发(作者：)

Web前端_微信⼩程序实战开发微信⼩程序开发实战教程⼀、微信⼩程序它是⼀种混合开发的⽅式。是安装在微信中的程序（⼀个程序最多2M空间）。1.1 注册1

2 点击⽴即注册：进⼊下⽅页⾯3

4 点击⼩程序进⼊表单填写页⾯5 6 填写完毕之后提交，会让你去邮箱中激活。激活之后就可以进⼊⼩程序开发了。1.2 安装开发⼯具经过1.1注册之后，我们有了开发账号，但是没有办法凭空开发内容，我们需要下载开发⼯具。使⽤微信提供的开发⼯具进⾏开发。下载地址：进⼊之后，会看到让你选择版本的信息。1

选择对应的版本进⾏安装。 例如：我的电脑就是windows64位操作系统，那么我就选Windows 64位点击之后就会开始下载1

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

双击进⾏安装，下⼀步下⼀步直到结束。安装完毕之后，会⾃动打开登录界⾯。有⼀个⼆维码，通过微信扫描该⼆维码登录。登录之后1

1.3 创建⼩程序项⽬点击上图中的⼩程序项⽬1

项⽬⽬录：就是项⽬所在⽬录AppId： ⼩程序的id。你通过注册之后会得到⼀个id。输⼊它即可。我们现在没有注册完毕，只能点击测试⼩程序进⾏测试项⽬名称： 你当前创建的项⽬的名称 这是唯⼀的。填写完毕之后：建⽴普通快速启动模板： 如果勾选 则会在项⽬⽬录下 ⾃动创建⼀个demo案例点击确定之后，编辑器会启动1

1

预览窗⼝： 你编写的⼩程序的预览窗⼝，可以进⾏点击 其实就是⼀个⼿机模拟器功能窗⼝： 许多功能按钮⽬录结构： 项⽬的⽬录状态代码编辑窗⼝：代码可以在这⾥编辑调试窗⼝： 代码书写过程中，调试时，会在这⾥输出⼀些信息。也有控制台的功能也有⽂档结构的功能。1.4 ⽬录结构介绍1.4.1 pages这个⽂件夹，是⽤来放所有的⼩程序需要的页⾯。该⽂件夹中是⼀个⼀个的⼦⽂件夹，每⼀个⼦⽂件夹表⽰⼀个页⾯。默认创建出来的pages中有两个：1 index 就代表index页⾯ 2 logs 就代表logs页⾯1.4.2 utils这个⽂件夹，是⽤来放所有的⼯具的。可以删除。1.4.3 这个⽂件，叫做应⽤程序构造器。整个应⽤程序的配置，都可以在这⾥⾯书写，主要是应⽤程序的声明周期函数以及全局数据。全局的脚本⽂件App({ /** onLaunch * 当⼩程序初始化完成时，会触发 onLaunch（全局只触发⼀次） */ /** onShow * 当⼩程序启动，或从后台进⼊前台显⽰，会触发 onShow */ /**onHide * 当⼩程序从前台进⼊后台，会触发 onHide */

/** onError * 当⼩程序发⽣脚本错误，或者 api 调⽤失败时，会触发 onError 并带上错误信息 */})

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

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

1.4.5 其实就是css⽂件。它⾥⾯配置的内容是全局样式。类似于我们的这是⼀个全局样式⽂件。会⾃动应⽤在所有页⾯中。1.4.6 这是针对项⽬的配置。1.5 局部⽂件pages是⼀个⽂件夹，该⽂件夹内是⼦⽂件夹，每⼀个⼦⽂件夹代表⼀个页⾯。⼦⽂件夹内：1.5.1 局部脚本.js⽂件： 局部脚本⽂件 该⽂件只对当前页⾯⽣效Page({

/**data * 页⾯的初始数据 */ /** onLoad * ⽣命周期函数--监听页⾯加载 */ /**onReady * ⽣命周期函数--监听页⾯初次渲染完成 */

/**onShow * ⽣命周期函数--监听页⾯显⽰ */

/**onHide * ⽣命周期函数--监听页⾯隐藏 */

/**onUnload * ⽣命周期函数--监听页⾯卸载 */

/**onPullDownRefresh * 页⾯相关事件处理函数--监听⽤户下拉动作 */ /**onReachBottom * 页⾯上拉触底事件的处理函数 */

/**onShareAppMessage * ⽤户点击右上⾓分享 */})1.5.2 局部样式位于页⾯内的wxss⽂件，是针对当前页⾯的局部样式。与全局⼀起负责当前页⾯的样式。如果有冲突，优先使⽤当前页⾯的wxss样式。1.5.3 页⾯⾻架页⾯内有⼀个wxml⽂件，⽤于搭建当前页⾯的⾻架。html⽂件内的标签，我们叫做元素。wxml⽂件内的标签，我们叫做组件。因为对html元素进⾏了封装。所以叫做组件。

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

4.2 修改数据要使⽤页⾯去修改数据:a(option);option 是⼀个对象key: 要修改的属性层级字符串 可以是单层级 可以是多层级value: 要修改的对应key的值demo:更改数据之前：1

更改代码：1 onLoad: function (options) {2 var me = this;3 ("index页⾯页⾯加载")4 setTimeout(function() {5 a({6 title: "爱创课堂",7 "": "王⽼四"8 })9 (me)10 }, 3000)11 },代码执⾏之后：1

4.3 数据丢失更改数据，⼀定要通过setData⽅法来修改。因为它是微信提供的⽅法。如果使⽤点语法或者⽅括号语法直接修改属性的值。则⽆法渲染到页⾯上。这就叫做数据丢失。注：尽量只更改关键的信息。demo:更改数据之前：1

更改代码：1 setTimeout(function() {2 = "爱创课堂";3 ()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/2 Page({3

4 /**5 * 页⾯的初始数据6 */7 data: {8

9 },10 // 定义show事件11 show: function() {12 ("点击我了");13 },14 // 定义parent事件15 parent: function() {16 ("点击到爸爸了")17 }18 })点击之后：两个事件都会输出1

5.2 绑定不冒泡事件组件结构：1 2 3 我是⼀个组件4 代码1 // pages/event/2 Page({3

4 /**5 * 页⾯的初始数据6 */7 data: {8

9 },10 // 定义show事件11 show: function() {12 ("点击我了");13 },14 // 定义parent事件15 parent: function() {16 ("点击到爸爸了")17 }18 })点击之后：只有⼦元素的事件触发 ⽗元素的事件没有触发1

5.3 事件对象查看事件对象：1

changedTouches: 改变的⼿指的列表currentTarget: 绑定事件的组件id: 当前组件的idoffsetLeft: 该组件的距离⽗组件的left值offsetTop: 该组件的距离⽗组件的top值dataset: 该组件的⾃定义数据detail: ⼿指位置target: 触发事件的组件timeStamp：页⾯加载到事件触发的时间间隔touches: ⼿指列表type: 事件类型