微信小程序开发

微信小程序-入门基础流程

一、开发前准备工作

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换上）

（未完待续）