微信小程序开发环境流程步骤说明

微信小程序正式开发之前，需要安装开发工具、准备开发环境、获取开发需要的参数等等。这些准备工作都是必不可少的，不能省略的流程之一。本文小编就借用一个示例来介绍一下，微信小程序开发环境准备的流程步骤。

1、获取小程序APPID，下载开发工具

  在微信公众号官网中去下载安装小程序开发工具，并且注册一个小程序去获取它的APPID。

2、了解小程序开发框架

  小程序使用的开发框架为 MINA 框架，这个框架提供了视图层描述语言、WXML 和 WXSS 以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，能让开发者方便地去聚焦于数据与逻辑上。在打开开发工具时，自动提示创建一个demo，demo结构文件树如下：

3、结构文件总说明

  上述的结构文件树中，app.js、app.json、app.wxss 是必不可少的、生成小程序的依赖文件。其中app.js监控整个程序的生命周期，是全局变量声明的地方，它的部分代码如下：

4、app.js部分代码介绍

上述展示的app.js部分代码中，一些相关的参数介绍如下

5、app.json的全局配置

app.json 是对整个小程序的全局配置，不可注释。pages为注册页面的列表，均为相对路径，省去了后缀名，程序默认显示列表第一个。

  6、app.wxss介绍

app.wxss 是小程序的全局公共样式表。其中，apx 是尺寸单位，可根据屏幕宽度自适应大小。与之对应的有rem：规定屏幕宽度为20rem;1rem = (750/20)rpx 。

  7、 index 文件内容介绍

index 文件内容分为三个部分，分别是index.js、index.wxml、index.wxss，它们的作用介绍如下所示：

 （1）index.wxml 文件

index.wxml 文件是一个展示页面，它的作用与html相同，内容分块都是采用 view 标签，其中有很多 MINA 自定义的属性，可以进行{{ }}样式的值操作与数据双向绑定。不过，页面的展示，是需要在小程序全局的json配置文件中进行配置才行。

  （2）index.js 文件

本篇示例的index.wxml 文件使用了在全局 app.js 中定义的回调函数，将data中的数据更新，并且由于双向的数据绑定，页面中的 userInfo 实例也会更新，显示用户头像和昵称。

（3）index.wxss文件

index.wxss文件中同样定义了一些样式，写法思路与css文件基本一致，但不再需要再去关心屏幕适配问题。