微信小程序开发实战教程
一、微信小程序
它是一种混合开发的方式。
是安装在微信中的程序(一个程序最多2M空间)。
1.1 注册
2 点击立即注册:进入下方页面
3
4 点击小程序进入表单填写页面
5
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 <!--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 })
点击之后:两个事件都会输出
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 })
点击之后:只有子元素的事件触发 父元素的事件没有触发
5.3 事件对象
查看事件对象:
changedTouches: 改变的手指的列表
currentTarget: 绑定事件的组件
id: 当前组件的id
offsetLeft: 该组件的距离父组件的left值
offsetTop: 该组件的距离父组件的top值
dataset: 该组件的自定义数据
detail: 手指位置
target: 触发事件的组件
timeStamp:页面加载到事件触发的时间间隔
touches: 手指列表
type: 事件类型
。。。。。未完待续。。。。。
头像处获取更多前端资料
原文地址:https://blog.51cto.com/14337100/2421064