微信小程序-入门基础流程
一、开发前准备工作
1.下载微信开发者工具
地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201716
2.然后扫码进入微信公众号,会自动获取公众号和微信
3.扫码后,做微信小程序就选微信小程序,做公众号就选公众号(小程序可关联到公众号上)
4.准备一个空文件夹作为“项目目录” ; appID要是未来得及申请, 就先选“测试号 小程序”,点击确定后进去如下图:
二、 该目录结构介绍
- app.js
定义: 脚本文件;
功能:
1)、监听并处理小程序的生命周期函数;
2)、声明全局变量以及调用各类提供的API;
- app.json
定义:配置文件;
功能:
1)、定义页面的路径;
2)、定义小程序的窗口背景色;
3)、配置导航条样式、配置默认标题;
4)、若添加新的页面也需要在该页面申明路径;
注意:app.json文件中不能添加任何注释;
- app.wxss
定义:
功能:里面定义小程序的公共样式,这里声明的样式可以在其他的页面中直接引用;
三、页面创建
-
前提:微信小程序的每一个页面的【路径+页面名】都需要在app.json的pages中声明;
-
小程序每个页面的组成部分:同路径下4个不同后缀文件,例如:
-
index.js
功能:监听处理页面的生命周期;获取小程序实例‘相应页面交互事件等;
- index.wxml
相当于平时写的html文件;但是与html有些区别,例如:wxml中的view标签与html中的div标签很相似;其他 image、text标签的使用和 .html 中的类似;
- index.wxss
类似.css 文件,页面的样式表中的样式规则会层叠覆盖app.wxss中的样式规则;
若不指定页面的样式表,也可以在也页面的结构文件中直接使用app.wxss中指定的样式规则;
- index.json
页面的配置文件非必须的;
当有页面的配置文件时,配置项在该页面会覆盖app.json中的window中相同的配置项,如果没有指定的页面配置文件, 则在该页面直接使用app.json中的默认值;
项目调试
点击开发框左侧的调试器进入调试界面,调试同 chrome 调试代码类似;
项目预览
工具栏顶部有设置,设置=》项目设置
AppID可更改(先前用测试号写的小程序,在上线前可重新注册申请微信小程序,将AppID换上)
(未完待续)