第二章:微信小程序开发基础

2.1 小程序的基本目录结构

1.基本目录结构

       项目主目录下有2个子目录(pages和utils)和4个文件(app.js、app.jsonapp.wxss 和project. config. json )。

       在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。这3个文件不属于任何页面。

       project. confg.json 文件是项目配置文件，包含项目名称、AppID等相关信息.

2.主体文件

       微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责小程序的整体配置，它们的名称是固定的。

       app.js 小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件会和其他页面的逻辑文件打包成一个JavaScript文件。该文件在项目中不可缺少。

       app.json 小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少

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

3.页面文件

       .js文件页面逻辑文件，在该文件中编写Javaserpt代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。

       .wxml文件 页面结构文件，用于设计页面的布局、数据定等。

       .wxss文件，页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则，直接使用app.wxss 中指定的样式规则。

       .json文件，页面配置文件。该文件在页面中不可缺少。

2.2 小程序的开发框架

1.小程序框架示意图

2.视图层

       MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。对于微信小程序而视图层就是所有、wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构;音，wxss 文件用于描述页面的样式。

3.逻辑层

       逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有,j脚本文件的集合徽信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

4.数据层

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

2.3 创建小程序页面

1.创建第一个页面文件

       继续在项目主目录下新建一个pages目录，在pmges日录下新建一个news目录，并在news目录下新建news.js、news. json、news.wxml 和news.wxss空文件。

       首先打开news.wxml文件，随便输入一行字,然后告诉系统这个文件的名称和路径，打开配置文件app.json,输入以下代码:

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

接下来打开news.json文件输入一对空“{}”即可,随即打开news.js文件输入以下代码：

Page({
  
})

保存后编译，在模拟器中即可运行成功。

2.4 配置文件

1. 全局配置文件

2. pages配置项

pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符
串，代表对应页面的“路径”+“文件名”。

3.window 配置项

window 配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式。window配置项可以配置的对象参考表

4.tabBar 配置项

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

tabBar中list(列表)接受数组值，数组中的每一项也是一个对象。

5.networkTimeout配置项

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

      6.运行代码：

app.json:

{
  "pages": [
    "pages/news/news",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序windou功能演示",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  },
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "components/img/1.png",
        "selectedIconPath": "components/img/1.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/news/news",
        "iconPath": "components/img/2.jpg",
        "selectedIconPath": "components/img/2.jpg",
        "text": "新闻"
      }
    ]
  },
  "style": "v2",
  "renderer": "skyline",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

运行结果：

2.5逻辑层文件

当启动小程序时，首先会依次触发生命周期函数onLanuch和onShow方法，然后通过app.json的 pages属性注册相应的页面，最后根据默认路径加载首页

1.app.js配置文件

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

2.页面逻辑文件

页面逻辑文件的主要功能有:设置初始数据:定义当前页面的生命周期函数;定义事件处理函数等。

3.news.js

//页面的初始数据
  data:{
    name:"lwk",//字符串
    age:30,//数字
    birthday:[{ year:1988 },{ month:11 },{ data:18 }],//数组
    object:{hobby:'computer'},//对象

4.news.wxml

<view>姓名 : {{name}}</view>
<view>年龄 : {{age}}</view>
<view>出生日期 :
{{birthbay[0].year}}年
{{birthbay[1].month}}月
{{birthbay[2].bate}}日
</view>
<view>爱好 : {{object.hobby}}</view>

5.运行结果

6.定义事件处理函数

开发者在 Page()中自定义的函数称为事件处理函数。视图层可以在组件中加人事件缃定，当达到触发事件时，小程序就会执行Page()中定义的事件处理函数.

7.使用setDate更新数据

小程序在 Page 对象中封装了一个名为setData()的函数，用来更新data中的数据数参数为 0bject，以“key:value”对的形式表示将 this.data中的 key 对应的值修改为 value.

2.6 页面结构文件

页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxm 文件。在小程序中，类似HTML 的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</vew>)标志，每个组件可以设置不同的属性(如id、class 等)，组件还可以嵌套。
WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

1.数据绑定

简单绑定作用于组件属性、控制属性时，双大括号外应添加双引号。

示例代码:        

news.wxml

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

nwqa.js

 students:[
      {nickname:'Tom',height:180,weight:140},
      {nickname:'Anne',height:180,weight:140}

2.运算

<view>算数运算:{{age + num}}</view>
<view>逻辑运算{{age==40}}</view>
<view>三元运算{{age==40 ?'happy' : 'nohappy'}}</view>

3.条件数据绑定

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

4.列表数据绑定

<view wx:for = "{{items}}">
  {{index}}:{{inem}}
</view>

5.模板与引用页面文件

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

6.运行结果

7 页面事件 

简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。
要实现这种机制，需要定义事件函数和调用事件。

在小程序中分为冒泡事件和非冒泡事件两大类型

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

8.页面样式文件

页面样式文件(wXSS)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WxsS具有CSs的大部分特性，小程序对 WXSS 做了一些扩充和修改。

尺寸单位：由于 CSS 原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS 在此基础上增加了尺寸单位rpx(respnesive pixel)。wXss规定屏幕宽度为750px，在系统数据绑定过程中rpx会按比例转化为px

样式导入：为了方便管理WXSS文件，我们可以将样式存放在不同的文件中。例如：

.con{border:1px solid #f00;
padding:5px;margin:5px;}

选择器：目前，WXSS 仅支持 CSS 中常用的选择器，如.class、#id、element、::before、:aftert 等

WXSS 常用属性
WXSS文件与CSS文件有大部分属性名及属性值相同，WXSS的常用属性及属性值

2.8 本章小结

本章首先讲解了小程序的目录结构，然后通过目录结构介绍了小程序的框架，最后主要介绍了小程序文件的类型及其配置。这些知识都是开发微信小程序的基础知识，大家必须深刻理解和熟练掌握，并勤写代码多加练习，为后续的学习打下扎实的基础。