Web前端_微信小程序实战开发
一、微信小程序
它是一种混合开发的方式。
是安装在微信中的程序（一个程序最多2m空间）。
1.1 注册
|
1 2 点击立即注册：进入下方页面 3 4 点击小程序进入表单填写页面 5 6 填写完毕之后提交，会让你去邮箱中激活。激活之后就可以进入小程序开发了。 |
1.2 安装开发工具
经过1.1注册之后，我们有了开发账号，但是没有办法凭空开发内容，我们需要下载开发工具。使用微信提供的开发工具进行开发。
下载地址：
|
1 |
进入之后，会看到让你选择版本的信息。
|
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: 事件类型