安装必要内容：

首先安装：node.js

安装完成之后下载微信开发者工具，进行安装。

本文内容悉数源自微信平台及小程序，官方页面上的介绍十分详尽。

这里只不过是为了将个人的学习过程记录，方便分享复习。

框架介绍

微信小程序框架十分简单且容易上手，分为两部分

视图层：*.wxml、*.wxss、

逻辑层：*.js   基于

该框架的核心构成是一个数据绑定机制，它能确保数据与视图之间的同步性——一旦逻辑层对数据进行调整，视图层便会自动执行相应的更新操作。

文件结构

小程序的文件组织结构相对简便，它包括一个针对主题应用的说明，以及针对各个独立页面的详细描述。

小程序主体部分详解

app.js

在app.js文件中，主要完成了注册小程序（页面名.js对应的是注册页面）的相关功能，这一过程主要涉及调用了一个名为App()的函数。

其接收了一个参数，用于指定小程序的生命周期等等...

view copy

App({

/**

* 当小程序初始化完成时，会触发 （全局只触发一次）

*/

: () {

.log(生命周期函数--监听小程序初始化);

.log(.path);//打开小程序的路径  

.log(.);//打开小程序的  

.log(.);//打开小程序的场景值  

.log(.);//转发信息  

当场景涉及另一个小程序的启动时，需返回该字段值.log(.);

.log(..);//来源小程序的  

.log(..);//来源小程序传过来的数据  

},

/**

* 当小程序启动，或从后台进入前台显示，会触发

*/

: () {

.log(生命周期函数--监听小程序显示);

},

/**

* 当小程序从前台进入后台，会触发

*/

: () {

.log(生命周期函数--监听小程序隐藏);

},

/**

若小程序遭遇脚本故障，亦或是API调用不成功，系统便会引发事件，并附上相应的错误详情。

*/

: (msg) {

.log(错误监听函数);

/**

* 其他自定义函数，全局变量

*/

:{

:cj,

:998

})

补充A：其中以及具有相同的参数

补充B：场景值：

补充C：()函数可以在其他js中获取到小程序实例，()..

确保App()在app.js文件中进行注册，并且只能注册一个实例；在App()函数内部，应避免使用括号，直接使用this关键字；在App()中，请勿调用括号内的函数，因为页面实例尚未生成；获取App()实例后，请勿调用其生命周期函数。

app.json

作为整个系统的配置文件，它能够设定页面上的各类特性，其中包括五个子项目。

请注意：在JSON文件中，斜杠双引号内的注释存在错误，若需使用，请先将所有注释彻底移除。此处添加注释仅是为了帮助理解文件内容。

完整的配置以及全参数

view copy

:

//必须

//,//小程序中每增减页面，都要对这边进行增减

/logs/

: {//非必须

: #,//导航栏默认颜色

le: ,//导航栏标题颜色，默认白色，仅支持黑白

xt: 微信接口功能演示,//导航栏文字内容

: #,//窗口默认背景色

调整下拉菜单的背景字体和图标的默认显示样式，此功能仅限于dark模式。

h:  //是否开启下拉刷新，默认

},

: {//非必须，底部切换页面

:,//必须/tab文字默认颜色

: ,//必须/tab文字选中的颜色

: ,//必须/tab背景色

: ,//tab边框颜色，默认，仅支持黑白

: ,//图标 top的时候则不显示

list:

//必须/tab列表

: //,//必须/页面路径

text: 首页,//必须/按钮文字

:,//图片路径

://选中时图片路径

},

: /logs/logs,

text: 日志

},

: {//非必须  设置网络请求时间

: ,//wx.的超时时间，单位毫秒，默认为：

: ,//wx.的超时时间，单位毫秒，默认为：

: , //wx.的超时时间，单位毫秒，默认为：

: //wx.的超时时间，单位毫秒，默认为：

},

: true    //非必须  是否开启模式

app.wxss

全局样式组件，和css差不多

在主体部分按照需求进行简单配置之后，便需着手构建页面，正如之前所述，页面主要由逻辑层和视图层构成，其中和WXML文件尤为关键。