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

小程序的基本目录结构简介

在微信小程序的基本目录结构中，项目主目录下 有2个子目录（pages和utils）和4个文件(app.js、app.json、app.wxss、和 project.config.json)。

pages：用于存放所有小程序的页面。

utils：用来存放工具函数模块的。

project.config.json：项目的配置文件。

主体文件

包括 app.js、app.json、app.wxss 这三个。

app.js  是小程序的脚本代码。

app.json 是对整个小程序的全局配置。

app.wxss 是整个小程序的公共样式表。

页面文件

包含.js，.json，.wxml，.wxss这些文件。

.js 页面逻辑文件。

.json 页面配置文件

.wxml 页面结构文件，用于设计页面的布局。

.wxss 页面样式表，用于定义页面中用到的各种样式表。

小程序的开发框架简介

微信团队为小程序的开发提供了MINA框架。小程序MINA框架将整个系统分为视图层和逻辑层。

视图层

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

组件(Component)是视图的基本组成单元。

 逻辑层

逻辑层用于处理事务逻辑。

小程序开发框架的逻辑层是由JavaScript编写。

数据层

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

 创建页面项目

在项目主目录下新建一个pages目录，在pages目录下新建一个news（任意）目录，并在它下新建 news.js、news.json、news.wxml、news.wxss文件。

配置文件

小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配置文件(*.json)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容。

全局配置文件

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

全局配置文件内容的整体结构如下:

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

pages配置项 

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

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

 window配置项

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

 "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  }

tabBar配置项 

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

 "tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/zz/zz",
      "text": "首页",
      "iconPath": "/img/home.png",
      "selectedIconPath": "/img/home_1.png"
    },{
      "pagePath": "pages/zlfw/zlfw",
      "text": "首页",
      "iconPath": "/img/lock.png",
      "selectedIconPath": "/img/lock-fill.png"
    }]
  },

配置后的页面效果如下图：

 

network Timeout配置项 

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

"networkTimeout" :{
"request":20000,
"connectSocket":20000,
"uploadFile":20000,
"downloadFile":20000
}

debug配置项 

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

页面配置文件

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

逻辑层文件

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

项目逻辑文件

项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法, 已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。

App()函数用于注册一个小程序，参数为Object，用于指定小程序的生命周期函数，用户自定义属性和方法，其参数如下表所示：

页面逻辑文件

页面逻辑文件的主要功能有: 设置初始数据; 定义当前页面的生命周期函数; 定义事件处理函数等。 每个页面文件都有一个相应的逻辑文件, 逻辑文件是运行在纯javaScrict引擎中。 因此, 在逻辑文件中不能使用浏览器提供的特有对象(document、window) 及通过操作DOM改变页面, 只能采用数据绑定和事件响应来实现。

（1）设置初始数据

设置初始数据是对页面的第一次数据绑定。对象data将会以JS0N(Javascript 0bject Notaton，Js对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式(字符串、数字、布尔值、对象、数组)。

数据初始：

数据绑定：

效果图：

 

（2）定义当前页面的生命周期函数 

在Page() 函数的参数中, 可以定义当前页面的生命周期函数。在Page() 函数的参数中, 可以定义当前页面的生命周期函数。 页面的生命周期函数主要有onload、onShow、onReady、onHide、onUnload。

（3)定义事件处理函数

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

页面结构文件

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

数据绑定

小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示 data中的数据。小程序的数据绑定使用Mustache语法({{}})将变量或运算规则包起来。

简单绑定

简单绑定是指使用双大括号({{}})将变量包起来，在页面中直接作为字符串输出使用,简单绑定可以作用于内容、组件属性、控制属性等的输出。

运算 

在{{}}内可以做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符串运算等)，这些运算均应符合JavaScript运算规则。

条件数据绑定

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

（1）wx.if条件数据绑定

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

（2）block wx.if条件数据绑定

 当需要通过一个表达式去控制多个组件时，可以通过<block>将多个组件包起来，然后在<block>中添加wx.if属性即可。

列表数据绑定 

列表数据绑定用于将列表中的各项数据进行重复数据绑定。

wx:for

在组件上，可以使用 wx:for 控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件

block wx:for 

 与 block wx:if类似，在wxml中也可以使用<block>包装多个组件进行列表数据绑定

模版

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

定义模板

 模板代码由 wxml组成，因此其定义也是在 wxml 文件中。

<template name="模版名"></template>

调用模板 

将模板定义后，就可以对其进行调用了。

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

引用页面文件 

在WXML文件中，不仅可以引用模板文件，还可以引用普通的页面文件。WXML提供
了两种方式来引用其他页面文件。

import方式

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

include方式 

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

页面事件

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

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

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

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

在WXML中，冒泡事件共6个，如下所示：

页面样式文件 

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

尺寸单位

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

样式导入

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

选择器

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

WXSS常用属性

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