第二章总结

小程序的基本目录结构

        pages存放所有页面，每一个页面一个文件夹，一个页面包括4个不同扩展名（.wxml、.wxss、.js和.json)

                index.js表示页面逻辑文件

                index.json表示页面配置文件

                index.wxml表示页面结构文件

                index.wxss表示页面样式文件

        utils存放所有的工具包

        app.js主逻辑文件

        app.json公共设置文件

        app.wxss主样式文件

小程序的开发框架

        小程序MINA框架示意图：

        视图层：

                 决定我们看到什么东西。

        逻辑层：

                用于处理事务逻辑。

        数据层：

                1.页面临时数据或缓存

                2.文件存储（本地存储）

                3.网络存储与调用

创建小程序

        在pages目录下新建一个happy目录，并在happy目录下新建happy.js、happy.json、happy.wxml和happy.wxss空文件。

        首先打开happy.wxml文件，输入“好好学习，天天向上”。

        打开目录配置文件app.json，输入以下代码

{
  "pages": [
    "pages/happy/happy",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },
  "style": "v2",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

        打开happy.json文件，输入以下代码：

{
  
}

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

Page({
  
})

        运行截图

 配置文件

全局配置文件：

app.json文件的配置如下：

"pages": [
    "pages/happy/happy",
    "pages/logs/logs"
  ],

window配置项：

window配置项负责设置小程序状态栏、导航栏、标题、窗口背景色等系统样式。

                                                        window配置项及其描述

"window": {
    "navigationBarBackgroundColor": "#43FF9F",
    "navigationBarTextStyle":"black",
    "navigationBarTitleText": "微信小程序",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  },

tabBar配置项：

当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBy配置项来实现。

                                                        tabBy配置项及其描述

                                                        tabBy中list选项

"tabBar": {
    "color": "#43FF9F",
    "selectedColor": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/happy/happy",
        "iconPath": "images/ww.png",
        "selectedIconPath": "images/ww.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "images/ww.png",
        "selectedIconPath": "images/ww.png",
        "text": "新闻"
      }
    ]
  }

networkTimeout配置项：

小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统一设置，不能在API中单独设置。

                                                                 networkTimeout配置项

运行效果：

页面配置文件 ：

        页面配置文件（*.json）只能设置本页面的窗口表现，而且只能设置window配置项的内容。

逻辑层文件

        小程序的逻辑层文件分为项目逻辑文件和页面逻辑文件。

在app.js中加入如下代码：

App({
  onLaunch(){
    console.log("小程序初始化");
  },
  onShow(){
    console.log("小程序启动");
  },
  onHide(){
    console.log("小程序隐藏");
  },
})

运行结果：

在happy.js中输入如下代码

Page({
  date:{
    name:'lwk',
    age:18,
    birthday:[{year:1988},{month:11},{date:18}],
    object:{hobby:'computer'}
  }
})

在happy.json中输入如下代码

<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<view>出生日期：
{{birthday[0].year}}年
{{birthday[0].month}}月
{{birthday[0].date}}日
</view>
<view>爱好：{{object.hoppy}}</view>

运行结果 

页面结构文件 

        页面结构文件（WXML）是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建页面的结构，即.wxml文件。

代码如下

<view>算术运算：{{age+2}}</view>
<view>逻辑运算：{{age==40}}</view>
<view>三元运算：{{1==1 ?3:4}}</view>

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

<view wx:for="{{students}}">
<text>姓名:{{item.nickname}}</text>
<text>身高:{{item.height}}</text>
<text>体重:{{item.weight}}</text>
</view>


<template name="stu">
<view wx:for="{{students}}">
<text>姓名:{{item.nickname}}</text>
<text>身高:{{item.height}}</text>
<text>体重:{{item.weight}}</text>
</view>
</template>
<template is="stu" data="{{students}}"></template>

运行结果

 引用页面文件：

1.import方式：如果在要引用的文件中定义了模板代码，则需要用import方式引用。

2.include方式：include方式可以将源文件中除模板之外的其他代码全部引入，相当于将源文件中的代码复制到include所在的位置。

页面事件：

        小程序中的事件是用户的一种行为或通信方式。

冒泡事件：冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。

非冒泡事件：非冒泡事件是指某个组件上的事件被触发后，事件不会向父节点传递。

                                                                        冒泡事件

页面样式文件 

页面样式文件（WXSS）是基于css拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。