微信开发了一款专门针对小程序的IDE，叫做微信开发者工具

最新版本的微信开发者工具还集成了微信公众号的调试和开发工作，让您改变开发模式。

如果选择无，则可以不使用它进行开发，但无法预览；

2. 基本架构和配置文件

1. 小程序架构

主要由两部分组成，主体部分（app）和各个页面（page）。

与很多框架类似，主体部分主要用于核心配置，各个页面主要用于不同的业务场景。

app是一个小程序的框架。支持，逻辑层的调用，数据的解析，wxss，wxml；

页面，主要是业务层，用于实现界面操作功能，是程序员使用频率最高的部分。

1.1、主体部分主要由3个文件组成

这三个应用程序文件是 app.js、app.json 和 app.wxss。

app.js 文件是一个处理一些通用或全局逻辑的脚本文件。例如，这里定义全局变量来处理登录逻辑、指定主页等。

app.json文件是小程序的整体配置文件。我们必须在这个文件中配置小程序由哪些页面组成。我们还可以在这个文件中配置整个小程序统一的窗口背景色、导航栏样式以及默认标题。但必须注意的是，不能向该文件添加任何注释。

app.wxss文件是整个小程序的通用样式表。我们可以直接在小程序子页面组件的属性上使用app.wxss中声明的样式规则。换句话说，该文件中定义的样式可以在任何其他子页面中使用。这也是为了代码的简洁和整体风格的统一。

1.2、页面由4个文件组成

小程序所有显示的页面都必须以子文件夹的形式存放在该文件夹中，包括主页。项目中会显示多少个页面，文件夹下会创建多少个子文件夹。每个页面的子文件夹必须包含以下四个文件：*.js、*.wxml、*.wxss 和*.json（* 代表文件名）。这四个文件的文件名必须与子文件夹的名称相同。

*.js文件是当前页面的脚本文件，也是业务逻辑的处理文件。当前页面与后端服务器接口的所有交互，以及请求数据的逻辑都在这个文件中完成。它是一个核心文件，必须创建。

*.wxml 文件是构建当前页面元素的文件。负责构建当前页面的结构和布局，相当于Web开发中的*.html文件。该文件存放了一些布局代码如div span form等，是必须创建的。

*.wxss文件是当前页面的样式文件。负责调整当前页面的样式、元素之间的间距、字体大小、字体颜色、背景图片等。相当于Web开发中的css文件，在需要时创建。

*.json文件是当前页面的配置文件。配置当前页面的窗口背景颜色、导航栏样式、默认标题等。

1）app.js：小程序逻辑，初始化APP

2）app.json：小程序配置，如导航、窗口、页面http请求跳转等。

3）app.wxss：公共样式配置

主要配置完成后，就开发相应的业务，这是开发者操作最频繁的页面。小程序页面设计基本按照MVC结构构建。

1）js：页面逻辑，相当于控制层（C）；还包括部分数据（M）

2）wxml：页面结构展示，相当于视图层（五）

3）wxss：页面样式表，纯前端，用于辅助wxml显示

4）json：页面配置，配置页面显示的一些数据，作为部分模型（M）

应用程序.js

用于注册一个小程序。当小程序启动时调用，并创建小程序直到它被销毁。它存在于小程序的整个生命周期中。显然它是单例和全局的。所以，

1）在app.js中只能注册一次。

2）可以在代码中任意位置通过()获取这个独特的小程序单例，

例如 var app = ();

App()的参数是{}类型，指定小程序的生命周期函数。

功能

监视小程序初始化。

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

功能

监视小程序的显示。

当小程序启动或从后台显示到前台时会触发。

功能

监控小程序被隐藏。

当小程序从前台进入后台时会触发。

所谓前后端的定义类似于手机上的app。例如，当您不使用微信时，您进入后台。

应用程序.json

接受一个数组，每一项是一个字符串，用于指定小程序由哪些页面组成

“”：[

“//”，

“//”，

“//”

],

用于设置小程序的状态栏、导航栏、标题、窗口背景颜色。

“”：{

“”：“”，

“”：“#”，

"xt": "名称计算",

“乐”：“#”

},

通过配置项指定标签栏的性能以及标签切换时显示的相应页面。

配置阵列时，您只能配置最少 2 个、最多 5 个选项卡。选项卡按数组顺序排序。

“”：{

“”：“#”，

“”：“#”，

“”：“”，

“”：“#fff”，

“列表”： [

“”：“//”，

"text": "名称计算",

"": "/ico1.png",

"": "/.png"

},

“”：“//”，

"text": "计算历史",

"": "/ico2.png",

"": "/.png"

},

您可以设置各种网络请求的超时时间。

“”：{

“”：

三视图预渲染

组件、小程序开发者文档

弹性-：行

弹性-：

四种数据绑定

2.1 数据绑定

{{}}

数据：{

：'，！'

2.2 事件（小程序不能操作DOM）

{{}}

:(){

.log("按钮被点击了~")

2.3 动态修改内容（对于数据修改只能使用()

{{}}

{{文本}}

数据：{

文本：“这是文本”

:(){

.log("按钮被点击了~")

this.({text:"这是新内容~"})

2.4 渲染标签

{{text}}

或者

{{}}

{{text}}

data:{

         show:false

}

动态改变这个值

btnClick：function(){

            var isShow = this.data.show;

            console.log( “isShow:”+isShow)

this.setData({text:“这是改变后的内容…”，show:!isShow})

}

{{text}}1

{{text}}2

2.4 循环

{{}}-{{物品}}

data:{

         news: [‘aaa’,‘bbb’,‘ccc’]

}

自己定义

{{ix}}-{{}}

动态修改数组的值

数据：{

         news: [‘aaa’,‘bbb’,‘ccc’]

btnClick：function(){

            var newsdata = this.data.news;

            newsdata.shift()

this.setData({news:newsdata})

}

模板

1、比如头部

.html

这是头

介绍

相当于复制了全部内容

2.例如脚

脚.html

这是底部1

这是底部2

介绍

相当于引入部分模块内容

五个生命周期

用户第一次打开小程序时触发（全局仅触发一次）。

小程序初始化完成后，触发onShow方法，监听小程序显示。

小程序从前台进入后台，触发 onHide方法。

小程序从后台进入前台显示，触发 onShow方法。

小程序后台运行一定时间，或系统资源占用过高，会被销毁。

示例代码：

App({

 onLaunch:function(){

    // Do something initial when launch.

  },

 onShow:function(){

     // Do something when show.

  },

 onHide:function(){

     // Do something when hide.

  },

 onError:function(msg){

   console.log(msg)

  },

 globalData:'I am global data'

})

 

小程序提供了()函数，可以获取小程序实例。

// other.js

varappInstance = getApp()

console.log(appInstance.globalData)// I am global data

总结：

onLoad: 页面加载。 1)一个页面只会调用一次。 2)参数可以获取wx.navigateTo和wx.redirectTo及中的 query。

onShow: 页面显示 1)每次打开页面都会调用一次。

onReady: 页面初次渲染完成 1)一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。 2)对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。

onHide: 页面隐藏 1)当navigateTo或底部tab切换时调用。

onUnload: 页面卸载

1)当redirectTo或navigateBack的时候调用。

跳转微信小程序页面的六种方式

为了不让用户在使用小程序时造成困扰，微信小程序规定页面路径只能是五层，请尽量避免多层级的交互方式。  页面跳转的话就涉及到了多个页面层级

跳转到新页面

pen-type="" 相当于API的wx，wx的url。是应用程序内需要跳转的非页面的路径。

保留当前页面，跳转到应用程序中的某个页面，使用wx.返回原始页面。

在当前页面打开

open-type="" 相当于 wx. API 的名称和 wx.是应用程序中需要重定向的非页面的路径。