第二章总结

微信小程序开发基础

2.1 小程序的基本目录结构s

        我们以第1章新建的系统默认示例项目为参考，了解微信小程序项目的基本目录结构。如图2-1所示,在微信小程序的基本目录结构中，项目主目录下有2个子目录（pages和utils)和4个文（app.js、app.json、app. wxss 和 project.config.json）。
        在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。这3个文件不属于任何页面。

2.1.1 主体文件

       微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责小程序的整体配置，它们的名称是固定的。
        ■app js 小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件会
和其他页面的逻辑文件打包成一个JavaScript文件。该文件在项目中不可缺少。
      ■app json 小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。

    ■app wxss  小程序主样式表文件，类似HTML的.css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

2.1.2  页面文件

        小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据app.json 设置的路径找到相对应的资源进行数据绑定。
        ■.js文件 页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
        ■.wxml文件 页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的，html文件。该文件在页面中不可缺少。
        ■.wxss 文件 页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式极文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则；否则，直接使用app.wxss 中指定的样式规则。该文件在页面中不可缺少。
        ■.json 文件 页面配置文件。该文件在页面中不可缺少。

2.2 小程序的开发框架

         微信团队为小程序的开发提供了MINA框架。MINA框架通过微信客户端提供文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供了一整套JavaScript API，让开发者能够非常方便地使用微信客户端提供的各种基础功能快速构建应用。
       小程序MINA框架示意如图2-3所示。

2.3 创建小程序页面

创建小程序页面
1.在pages目录下新建一个index目录，在index目录下新建index.js、index.json、in-dex.wxml、和index.wxss空文件。

2.打开index.wxml文件，输入“欢迎学习小程序”，打开项目配置文件app.json输入代码："pages/index/index"。

3.打开index.json文件，输入代码：

index.json{
}

4.打开index.js文件，输入代码：Page({
})

2.4 配置文件

表2-2 全局配置项

表2-3 window 配置项及其描述 

 表2-4 tabBar配置项及其描述

表2-5   tabBar中的list 选项

表2-6 networkTimeout配置项

表2-7  项目 逻辑文件配置项

表2-8 页面逻辑文件配置项

2.6 页面结构文件

表2-9  冒泡事件 

2.7 页面样式文件

表2-10 WXSS常用属性

 

小程序功能演示

 代码演示： 

Page({
  data:{
  name:'yjy',
  age:18,
  birthday:[{year:2004},{month:8},{day:8}],
  object:{hobby:'playgames'},
  num:1,
  stu:[
  {tikname:'tom',height:180,weight:12},
  {tikname:'jack',height:16,weight:100}
  ]
  
  }
  })

 小程序功能演示

 代码演示：

<view>姓名：{{name}}</view>
 <view>年龄：{{age}}</view>
<view>出身日期：
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].day}}日
</view>
 <view>爱好：{{object.hobby}}</view>
 <view>算数运算：{{age + num }}</view>
 <view>逻辑运算:{{ num == 10}}</view>
<view>三元运算：{{ num == age ? 'h' : 'j' }}</view>
<view wx:if="{{ num == 0 }}">0</view>
<view wx:elif="{{ num == 10 }}">1</view>
<view wx:else>2</view>
<view wx:for="{{stu}}">
<text>名字：{{item.tikname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>