第二章 总结

小程序的基本目录结构

pages：放了所有页面文件，每个页面都有一个文件夹

utils：工具包，所有的页面都可以用到

app.js：主逻辑文件，主要用来注册小程序全局实例

app.json：主配置文件，配置小程序全局设置

app.wxss：主样式文件，在主样式表文件中设置的样式在其他页面文件中同样有效

视图层：视图层就是所有.wxml文件与.wxss文件的集合，决定我们看到什么

逻辑层：逻辑层就是所有.js脚本文件的集合，进行交互处理或者网络处理

数据层：数据层在逻辑上包括页面临时数据或缓存、文件存储（本地存储）和网络存储与调用

删除小程序页面

单击pages文件目录下的lz文件按delete即可删除。

在找到app.json配置文件删除如下代码即可：

 "pages/lz/lz",

创建小程序页面

在pages下新建一个lz文件夹，并在lz目录下新建lz.js、lz.json、lz.wxml、lz.wxss空文件。新建lz文件页面后的项目结构如下：

打开lz.wxml文件，输入小程序开发。然后打开项目配置文件app.json，输入如下代码：

这段代码将lz页面注册到小程序中，这个对象的第一属性pages接受了一个数组，该数组的每一项是一个字符串，该字符串由“路径”+“文件名”组成，多个页面之间用“,”分隔接下来，打开lz.json文件，输入如下代码：

打开lz.js文件，输入如下代码：

Page({
    
})

将这4个文件保存后进行编译，在模拟器中即可得到所需结果如下：

配置文件

app.json的pages和window的配置项：

app.json的tabBar配置项及其描述：

lz.json配置文件代码如下：

{
  "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle":"black",
    "navigationBarTitleText": "微信小程序-新闻",  //导航栏的标题，因为就近原则
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
}

运行结果：

逻辑文件

app.js代码如下

lz.wxml代码如下：

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
  {{birthday[0].year}}年
  {{birthday[1].month}}月
  {{birthday[2].date}}日
</view>
<view>爱好：{{object.hobby}}</view>
<view>算数运算：{{age+num}}</view>
<view>逻辑运算：{{age==40}}</view>
<view>三元运算：{{1==1?3:4}}</view>

<view wx:if="{{age>30}}">1</view>
<view wx:elif="{{age==30}}">0</view>
<view wx:else>-1</view>

<template name="stu">              //定义模板，名为"stu"
  <view wx:for="{{students}}">         
<text>姓名：{{item.xm}}</text>        //数组当前项的变量名默认为item
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>
</template>
                                      
<template is="stu" data="{{students}}"></template>   //使用"stu"模板,数据来源"students"

lz.js代码如下：

Page({
    //页面初始数据
    data:{
      name:'linzi',
      age:20,
      num:100,
      students:[
        {xm:"Tom",height:"180",weight:"150"},
        {xm:"Anne",height:"160",weight:"100"}
      ],
      birthday:[{year:2004},{month:6},{date:19}],
      object:{hobby:'吃零食'}

    }  
})

运行结果如下：

冒泡事件

wxss常用属性