微信小程序(1) 了解微信小程序
1. 下载并安装微信小程序IDE
1.官网注册https://mp.weixin.qq.com/,并下载相应的IDE。
2.运行下载的安装包
3.根据一般安装方法安装微信小程序的IDE
一直按照默认配置安装即可。
2. 微信小程序项目框架了解
1.创建项目,没有AppID的话,只是部分功能受限,不会太影响我们如今的学习。如果需要上传小程序的话,需要个人去注册并申请相应的AppID。
2.建立“普通快速启动模板”,其项目目录如下:
app.js——整个项目的启动文件
注释写的onlaunch方法有三大功能:- 浏览器缓存进行存和取数据
- 用登陆成功的回调
- 获取用户信息
globalData是定义整个项目的全局变量或者常量。
此外,若需要调用API的时候,一般我们会在该文件中的定义一些API变量,如API: "https://api.douban.com"
,之后在需要某个页面调用该API的时候,使用app.globaData.API
就能够使用该变量。
【为了整个项目的维护,还是建议把这种公用参数统一写在配置文件中】app.json——整个项目的配置文件
- 注册页面
- 配置tab页
- 设置整个项目的样式
- 页面标题等等
注意:小程序启动默认的第一个页面,就是app.json的pages中的第一个页面。
- pages——小程序的页面组件
有几个页面就会有几个子文件夹。
在快速启动模板中,就有两个页面,index和logs - index目录——index页面
有三个文件,与web开发的文件是一一对应的
- index.wxml -> index.html
- index.wxss -> index.css
- index.js(js文件)
js文件中的部分函数解释:
- var app = getApp();
引入整个项目的app.js文件,用来取期中的公共变量等信息 - 整个page({})中,第一个data,就是本页面组件的内部数据,会渲染到该页面的wxml文件中(类似于vue、react),通过setData修改data数据,驱动页面渲染
- 一些生命周期函数
- onload() (监听页面加载)
- onready() (页面初次渲染)
- onshow() (页面显示)
- onhide() (页面隐藏)
- onShareAppMessage() (设置页面分享的信息)
- …… (更多的可查官网API)
- var app = getApp();
- .json文件
作为该页面组件的配置文件,设置页面标题等功能。
json中不能写注释,不然容易出错。