第二章、微信小程序开发基础知识总结

一、小程序基本目录结构

项目主目录下有两个子目录pages和utils和四个文件（app.js、app.json、app.wxss和project.config.json）

三个app开头的文件（app.js、app.json、app.wxss）是微信小程序框架的主描述文件，是应用程序级别的文件，不属于任何页面。

project.config.json文件是项目配置文件

{
  "compileType": "miniprogram",
  "libVersion": "trial",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "coverView": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "enhance": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmRelationList": [],
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    }
  },
  "condition": {},
  "editorSetting": {
    "tabIndent": "auto",
    "tabSize": 2
  },
  "appid": "wxc33e1b4994f9badf"
}

1、主体文件

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

2、页面文件

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

二、小程序的开发框架

        小程序MINA框架将整个系统划分为视图层和逻辑层。

1、视图层

        对于微信小程序而言，视图层就是所有.wxml文件和wxss文件的集合。.wxml文件用于描述页面的结构；.wxss文件用于描述页面的样式。

        微信小程序在逻辑层将数据进行处理后发送给视图层并接受视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层。

2、逻辑层

        逻辑层用于处理事务逻辑。对于微信小程序而言逻辑层就是所有.js脚本文件的集合。

        微信小程序在逻辑层将数据进行处理后发送给视图层并接受视图层的事件反馈。

        微信小程序开发框架的逻辑层是采用JavaScript编写的。

3、数据层

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

        1、页面临时数据或缓存

        在Page中，使用setDate函数将数据从逻辑层发送到视图层，同时改变对应的this.data的值

        setDate()函数的参数接收一个对象，以（key，value）的形式表示将key在this.date中对应的值改变成value。

        2、文件存储

        使用数据API接口

        wx.getStorage        获取本地数据缓存。

        wx.setStorage        设置本地数据缓存。

        wx.clearStorage        清理本地数据缓存

        3、网络存储与调用

        上传或下载文件API接口

        wx.request        发起网络请求。

        wx.uploadFile        上传文件。

        wx.downloadFile        下载文件。

        调用URL的API接口

        wx.navigateTo        新窗口打开页面

        wx.redirectTo        原窗口打开页面

三、创建小程序页面

        1、创建第一个页面文件

        创建一个新项目

        将原来的pages目录下的index文件删除并新建一个文件夹，在新文件夹目录下新建.js、.json、.wxss和.wxml文件

告诉系统这个文件的名称及其所处路径

app.json

{
"pages": [
   "pages/news/news",
  ],
}

.js中引入

Page({
  
})

.json

{}

.wxml

欢迎大家学习小程序

四、配置文件

小程序的全局配置保存在全局配置文件app.json中，使用全局配置文件来配置页面文件pages的路径、设置窗口window表现、设定网络请求API的超时时间值networkTimeout以及多个切换页tabBar

全局配置文件

全局配置文件内容整体结构：

//设置页面路径
"pages":[ ],
//设置默认页面的窗口表现
"window":{|,
//设置底部 tab的表现
"tabBar":{}，
//设置网络请求 API的超时时间值
"networkTimeout":{},//设置是否开启 debug 模式"debug":false

1、pages配置项

 pages 配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages配置项是必填项。
设置pages 配置项时，应注意以下3点:
(1)数组的第一项用于设定小程序的初始页面。
(2)在小程序中新增或减少页面时，都需要对数组进行修改。
(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、.wxml和.wxss文件进行整合数据绑定。

{
    "pages":[
            "pages/news/news",
            "pages/index/index"
            ]
}

2、window配置项

window配置项负责设置小程序状态栏、导航条、标题、背景窗口等

"window": {
"navigationBarBackgroundcolor":"#fff","navigationBarTextStyle": "black",
"navigationBarTitleText":"小程序window 功能演示","backgroundColor":"#ccc",
"backgroundTextStyle": "light"
}

3、tabBar 配置项

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

其中，list接受数组值，数组中的每一项也都是一个对象。

{
"tabBar":{
    "color":"#666666"，
    "selectedColor":"#ff0000"，"borderStyle":"black".
    "backgroundColor":"#ffffff"，
    "list":[
            {

            "pagePath":"pages /index/index","iconPath": "images /index1.png",
            "selectedIconPath":"images/index2.png","text":"首页"
            }，
            {
            "pagePath": "pages /news /news","iconPath": "images/news1.png",
            "selectedIconPath":"images /news2.png","text":"新闻"
            }
        ]
    }
}

4、networkTimeout配置项

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

5.debug 配置项

debug配置项用于开启开发者工具的调试模式，默认为false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以info的形式输出到Console(控制台)面板上。

页面配置文件

页面配置文件(*.json)只能设置本页面的窗口表现，而且只能设置window配置项的内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件(app.json)中的配置值。
页面中的window配置只需书写配置项，不必书写window。

{
"navigationBarBackgroundColor":"#ffffff"，
"navigationBarTextStyle": "black",
"navigationBarTitleText":"页面window 配置演示",
"backgroundColor":"#eeeeee","backgroundTextStyle": "light"
}

五、逻辑层文件

1、项目逻辑文件

项目逻辑文件app.js中可以通过APP（）函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其它页面逻辑文件中通过getAPP（）获取。

APP（）函数用于注册一个小程序，参照数为Object，用于指定小程序的生命周期函数、用户自定义属性和方法。

app.js配置文件：

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

运行结果：

2、页面逻辑文件

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

在逻辑层，Page（）方法只能用来注册一个页面，并且每个页面有且仅有一个。

设置初始数据

设置初始数据是对页面的第一次数据绑定。对象date将会以JSON的形式由逻辑层传输到视图层。

视图层可以通过WXML对数据进行绑定。

index.js

Page({
  data:{
    name:'lwk',
    age:18,
    brithday: [{year:2003},{month:7},{date:29}],
    object:{hobby:'cumputer'},   
  }
})

index.wxml

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

 

六、页面结构文件

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

WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

1、数据绑定

简单绑定：指用大括号（{{ }}）将变量包起来，在页面中直接作为字符串输出使用。

运算：在{{ }}内可以做一些简单的运算：算术运算、逻辑运算、三元运算、字符串运算等。

2、条件数据绑定

条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。

wx:if条件数据绑定：指使用wx:if这个属性来判断是否数据绑定当前组件。

<view wx:if ="{{condition}}">内容</view>

使用wx:elif、wx:else属性添加多个分支。当控制表达式为true时，数据绑定一个分支；当控制表达式为false时，数据绑定另一个分支。

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

3、模板

 在小程序中，如果要经常使用几个组件的组合，通常要把这几个组件结合定义为一个模板，在以后需要的文件中直接使用。

定义模板在wxml文件中

<tamplate name = "模板名">

 调用模板

<template is="模板名称" date=="{{传入的数据}}"/>

4、引用页面文件

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

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

5、页面事件

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

要实现这种机制，需要定义事件函数和调用事件。

定义事件函数：在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码

调用事件：调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key =value”形式出现，key(属性名)以bind或catch开头，再加上事件类型，如bindtap、catchlongtap。其中，bind 开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。

下列示例代码定义了click函数，将事件信息输出到控制台:

//.wxml
<view,bindtap- *click*>单击我</view>
//.js Page({
click:function(event){
console, log( event );
})

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

冒泡事件：

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

非冒泡事件：

非冒泡事件指某个组件上的事件被触发后，该事件不会向父节点传递。在WXML中，冒泡事件有6个

七、页面样式文件

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

1、尺寸单位

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

2.样式导入

为了便于管理WXSS文件，我们可以将样式存放于不同的文件中。如果需要在某个文件中引用另一个样式文件，使用@import 语句导人即可

//a.wxss
.cont { border:1px solid #f00;}
//b.wxss
@ import "a.wxss;"
.cont {padding:5rpx; margin:5px;}

 

//b.wxss
.cont { border:lpx solid #f00; Padding:5px;margin:5px;}

3.选择器

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

4、WXSS常用属性

WXSS文件与CSS文件有大部分属性名及属性值相同。