微信小程序购物商城系统开发系列-目录结构

上一篇咱们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇)，相信你们都已经蠢蠢欲试创建一个本身的小程序，去完成一个独立的商城网站。

先别着急咱们一步步来，先尝试下写一个本身的小demo.

这一篇文章咱们主要的是介绍一下小程序的一些目录结构，以及一些语法，为咱们后面的微信小程序商城系统作铺垫。

首先咱们来了解下小程序的目录结构

 

Pages 咱们新建的一些页面将保存在这个文件夹下面，每个小程序页面是由同路径下同名的四个不一样后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。

Utils 咱们写的一些公共的工具js能够放里面。

app.js 是小程序的脚本代码。咱们能够在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。

app.json 是对整个小程序的全局配置。咱们能够在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle":"black"

  }

}

 

注：app.json中是对整个小程序的全局设置，固然每一个页面也有本身的json文件。每一个页面下的json文件只能对window 进行设置，因此页面json文件下只需写入window的配置便可

{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle":"black"

  }

 

 

app.wxss 是整个小程序的公共样式表。咱们能够在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

每一个页面中也能够定义本身的wxss。Wxss也就是微信所提供的css样式表，里面的写法几乎和css差很少。不过他支持的选择器相对比较少。在写的时候咱们之前的一些项目的css 基本能够拿过来用，不过除了下面这些选择器外，你使用了其余的选择器，可能使整个页面报错!

 

Index.whtml  wxml后缀的文件夹也就是微信小程序提供给咱们的页面结构文档，就至关于咱们之前的web页面的html 差很少，只不过他自定义了一些本身的标签。

 

接下来咱们就新建一个页面来尝试下

 

在pages 下新建页面test 注意新建的.js,.json,.xml,.wxss。和page 下定义的 test文件夹名称保持一致，微信微信小程序会自动读取这些文件，并生成小程序实例。

首先咱们要在app.json下配置好咱们刚新建的页面

注意:页面配置前后的顺序，在实际操做中发现，第一个配置的为首页。

配置好后咱们就能够编写咱们的页面代码。

 

你们能够看到，咱们在app.json 页面能够直接配置当前页面的一些window属性

 

Wxml 中咱们能够编写一些咱们页面展现的结构，也就是咱们之前写html同样。这中间咱们使用到了 <view> 标签，他就至关于咱们之前用的div 差很少。

 

Wxss 你们看到是否是和咱们之前写的css 差很少。这边是个咱们以前定义的 .box 加一个样式。

test.js 是页面的脚本文件，在这个文件中咱们能够监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

 

 

这边咱们使用bintap给view绑一个点击事件而后再弹出一个提示框。

注意：这边js的写法和咱们之前的写法彻底同样，只不过这里面不能使用window对象和document对象，一样的也不能使用jquery ,zepto等框架，由于这些框架中会使用到window和document 对象。

好啦！今天只是给你们简单介绍下小程序的目录结构和简单的使用了下，下一节咱们会来开始咱们商城系统的编写。

 

：本系列文章基于“闪酷SAAS微信小程序商城系统【酷客多】”概括整理，可自由转发，但须要保留知识产权，不然保留追究法律程序权利。