一、简介
微信小程序是运行在微信环境中的应用,无需下载无需安装,它只能在微信中运行,不能在浏览器等其他环境中运行,微信团队提供了专门的开发工具用于微信小程序的开发,还提供了风度的API,让我们的小程序能够具备和微信交互的能力,比如,获取摄像头拍照、访问文件系统等,与微信交互主要体现在一下三个方面:
1.获取当前登录微信的用户信息;
2.微信支付;
3.使用模板消息向微信发送通知;
开发微信小程序需要具备wxml
、wcss
、JavaScript
能力
二、开发工具下载安装
下载:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
下载完成后按照提示安装
三、新建第一个小程序
新建项目必填项:
AppId:可选择无AppId
项目名称:按照实际填写,全英名称
项目目录:目录名称与项目名称保持一致
勾选“建立普通快速模板”
点击确定后可看到初始页面如下:
四、目录结构及页面组成
1.app.js
App()
函数用来注册一个小程序,接受object(对象)
类型的额参数,其中onLanuch()
会在打开应用时执行
object参数说明:
属性 | 类型 | 描述 | 触发时机 |
---|---|---|---|
onLaunch | Function | 生命周期函数–监听小程序初始化 | 当小程序初始化完成时,会触发onLaunch(全局只触发一次) |
onShow | Function | 生命周期函数–监听小程序显示 | 当小程序启动,或从后台进入前台显示,会触发onShow |
onHide | Function | 生命周期函数–监听小程序隐藏 | 当小程序从前台进入后台,会触发onHide |
其他 | Any | 开发者可以添加任意的函数或数据到Object参数中,用this 可以访问 |
2.app.jaon
app.json是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景颜色,配置导航条样式,配置默认标题等等。注意该文件不可添加任何注释
3.app.wxss
整个小程序的公共样式,此处定义的样式所有页面都可以用。
4.创建页面及页面组成
创建的页面路径必须在app.json中注册。
页面由wxml、js、wxss、json四个文件组成,四个文件的文件名必须相同。
wxml
:组成页面结构,必须
js
:页面初始化数据和页面逻辑(如:点击事件),必须
wxss
:该页面的页面样式,如果与app.wxss的样式冲突,在该页面中,会优先应用此文件中的样式定义。
json
:设置app.json中的window配置项的内容,页面中配置项会覆盖app.json的window中相同的配置项,此处定义的配置项对此窗口起作用
5.Page()
Page()函数用来注册一个页面。接受一个object参数,其指定页面的初始数据、生命周期函数、事 件处理函数等。
object参数说明:
属性 | 类型 | 描述 |
---|---|---|
data | Object | 页面的初始数据 |
onLoad | Function | 生命周期函数–监听页面加载 |
onReady | Function | 生命周期函数–监听页面初次渲染完成 |
onShow | Function | 生命周期函数–监听页面显示 |
onHide | Function | 生命周期函数–监听页面隐藏 |
onUnload | Function | 生命周期函数–监听页面卸载 |
onPullDownRefresh | Function | 页面相关事件处理函数–监听用户下拉动作 |
其他 | Any | 开发者可以任意添加任意的函数数据到Object参数中,用this 可以访问 |
6.页面的路由
路由是一个专业术语,页面路由可以简单地理解为页面切换。
在小程序中所有页面的路由全部由框架进行管理,对于路由的触发方式以及页面生命周期函数如下:
路由方式 | 触发时机 | 路由后页面 | 路由前页面 |
---|---|---|---|
初始化 | 小程序打开的第一个页面 | onLoad,onShow | |
打开新页面 | 调用APIwx.navigateTo 或使用组件<navigator/> | onLoad,onShow | onHide |
页面重定向 | 调用APIwx.redirectTo 或使用组件<navigator/> | onLoad,onShow | onUnload |
页面返回 | 调用APIwx.navigateBack 或用户按左上角返回按钮 | onShow | onUnload |
Tab切换 | 多Tab模式下用户切换Tab | 第一次打开onLoad,onShow;否则onShow | onHide |