微信小程序--熟悉项目结构

微信小程序–熟悉项目结构

本文讲解微信小程序的项目结构，让我们对小程序有一个初步的认识。

1 安装开发工具

微信web开发工具链接如下，我们打开来链接下载安装相应的版本即可。当然也可以用sublime等其它工具。
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

2 创建第一个项目

• 创建项目目录
  

• 创建quickStart项目

  用微信扫描二维码登录，添加项目。在开发阶段我们可以选择无APPID。

  

  点击添加项目之后，就会进入带预览页面

  

3 了解项目结构

• 最原始的项目结构

  

• pages目录

  这个目录是放置微信小程序当中的页面的，在我们自动生成的quickStart项目当中已经存在两个页面，即index页面和log页面，不同的页面之间可以互相跳转。每个页面当中存在三个文件：xx.js、xx.wxml、xx.wxss。
  xx.js：用来编写页面逻辑
  xx.wxml：用来排版页面结构
  xx.wxss：用来渲染页面样式

• utils目录
  这个文件属于公共脚本文件，例如整个应用当中的公用方法，我们可以抽取出来放置在util.js当中，供全局调用，类似于java应用当中的工具类。

• app.js文件
  应用程序的逻辑写在此文件。比如调用APP函数创建小程序实例，小程序的初始化，加载，销毁等，总之小程序的不同生命周期所要执行的业务逻辑都在这里编写。APP函数是一个全局函数，它就是用来创建应用程序实例的，在这里也可以定义全局函数，全局变量。

• app.json文件
  应用程序的配置信息写在这个文件。
  pages可以定义页面的加载顺序，pages里面的顺序可以自定义，我们的程序将index放在第一个位置，小程序初始化时第一个页面就是index页面，如果将log页面放在前面，首先将加载log页面。
  window可以定义窗口的背景颜色，导航条的颜色，文字等等。

  

• app.wxss文件
  应用程序的公共样式写在此文件，每个页面都可以使用。