微信小程序之项目文件夹及功能的介绍

微信小程序之项目文件夹及功能的介绍

总述
本篇文章就是简单的为大家介绍一下微信小程序的各个文件夹及其功能。

小程序项目文件介绍：
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

json配置文件
首先json配置文件，对于目前的项目而言有app.json和home.json。

app.json
app.json 是当前小程序的全局配置，包括页面路径、界面显示、底部tab等
pages字段 —— 用于描述当前小程序所有页面路径，每当新建页面时此处会自动增加页面的路径，但是删除页面时此处不自动删除（注：删除页面时注意将此处所删除的页面的路径删除）
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色及样式等。
详细配置项细节可参考微信小程序开发者文档

home.json
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

  {
   
    "navigationBarBackgroundColor": "#b3d4db"
  }

因此home.json 的navigationBarBackgroundColor配置项将会覆盖app.json的window中的。

wxml模板文件
wxml是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

<view class='container'>
  <text class='user-name'>Hello</text> <!--  昵称改成自己的 -->
  <view class='moto-container' >
    <text class='moto'>开启小程序之旅</text>
  </view>
</view> 

详解：

<视图容器view  样式：wxss文件中的container>
  <基础内容text  样式：wxss文件中的user-name>Hello</text>
  <视图容器view  样式：wxss文件中的moto-container>
      <基础内容text   样式：wxss文件中的moto>开启小程序之旅</text>
      </view>
 </view>

简单的介绍一下wxml的功能：
1、数据的绑定

<!--wxml-->
<view>