第二章总结看

小程序的基本目录结构

子目录：

Pages:所有页面，每个页面一个文件夹。含有两个子目录：index和logs，每个子目录保存着一个页面的相关文件。一个页面包含四个不同扩展名（.wxml、.wxss、.js、.json)的文件。

Utils:工具包，用来存放一些公共的.js文件，当某个页面需要用到utils.js函数时，可以将其引入后直接使用。

主体文件：

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

App.json:小程序公共设置文件，配置小程序全局设置

App.wxss:小程序主样式表文件，类似HTML的.css文件(就近原则）

页面文件：

.js:逻辑文件

.json:配置文件

.wxml:结构文件

.wxss:样式文件

小程序的开发框架

视图层

视图层是所有.wxml文件与.wxss文件的集合；.wxml文件用来描述页面的结构；.wxss文件用来描述页面的样式。

逻辑层

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

数据层 

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

1.页面临时数据或缓存

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

setData（）函数的参数接受一个对象，以（key,value）的形式表示将key在this.data中对应的值改变成value。

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

使用数据API接口，如下：

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

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

wx.clearStorage:清理本地数据缓存

3.网络存储与调用

上传或下载文件API接口，如下：

wx.request:发起网络请求

wx.uploadFile:上传文件

wx.downloadFile:下载文件

调用URL的API接口，如下：

wx.navigateTo:新窗口打开页面

wx.redirectTo:原窗口打开页面

创建微信小程序

1.删除index文件

2.删除app.js文件中的"page/index/index"

3.在page文件夹中建一个new文件夹

4.在new文件夹建四个页面文件（new.js、new.json、new.wxml、new.wxss)

5.在new.wxml中写下一段话；在app.js文件夹中写"page/new/new"语句

new.wxml的代码：

生活只有一次，你要活的酣畅淋漓

app.js的代码： 

{
  "pages": [
    "pages/new/new",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

6.在new.json文件夹中弄“{   }”；在new.js文件中写Page（{ }）（其中P是大写）

new.json的代码

{
  
}

new.js的代码：

Page（{

}）

7.最后Ctrl+S，实现代码截图

配置文件

全局配置文件

全局配置文件（app.json)中，使用全局配置文件来配置

1.pages配置项

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

注意3点：

1）数组的第一项用于设定小程序的初始页面。

2）在小程序中新增或减少页面时，都需要对数组进行修改。

3）文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、.wxss、.wxml文件进行整合数据的绑定

{
  "pages": [
    "pages/new/new",
    "pages/logs/logs"
  ]
}

2.window配置项

是负责设置小程序状态栏、导航栏、标题、窗口背景颜色等样式。

对象	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如#000
navigatiomBarTextStyle	String	white	导航栏标题颜色，仅支持white/black
navigatiomBarTitleText	String	—	导航栏标题文字内容
BackgroundColor	HexColor	#ffffff	下拉刷新窗口的背景色
backgroundTextStyle	String	dark	下拉背景字体，仅支持dark/light
enablePullDownRefresh	Boolean	flase	是否开启下列刷新

 

"window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "wei",
    "navigationBarBackgroundColor": "#ffffff",
    "BackgroundColor": "blue",
    "backgroundTextStyle":"light"
  }

3.tabBar配置项

是用来程序顶部或底部设置菜单栏。

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

 

"tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/new/new",
        "iconPath": "images/xx.jpg",
        "selectedIconPath": "images/xx.jpg",
        "text":"图一"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "images/hh.jpg",
        "selectedIconPath": "images/hh.jpg",
        "text":"图二"
      }
    ]

4.networkTimeout配置项

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

5.debug配置项

用于开启开发者工具的调试模式，默认为false。

页面配置文件

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

逻辑层文件

1.项目逻辑文件

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

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

2.页面逻辑文件

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

1.设置初始数据

设置初始数据是对页面的第一次数据绑定。数据必须是可以转成JSON的格式（字符串、数字、布尔值、对象、数组）。

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

页面的生命周期函数主要有：onLoad、onShow、onReady、onHide、onUnload

onLoad：页面加载函数

onShow：页面显示函数

onReady：页面数据绑定函数

onHide：页面隐藏函数

onUnload：页面卸载函数

new.js

Page( {
  data:{
    name:"lwk",
    age:30,
    birthday:[
      {year:1988},
      {month:11},
      {day:18}
    ]
  }
})

new.wxml

<view>姓名：{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期：
{{birthday[0].year}}年
{{birthday[1].month}}年
{{birthday[2].day}}年
</view>

代码运算

 

页面结构文件 

数据绑定

小程序的数据绑定使用Mustache语法（{{   }}）将变量或运算规则包起来。

1.简单绑定

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

2.运算

算术运算、逻辑运算、三元运算、字符运算

<view>姓名：{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期：
{{birthday[0].year}}年
{{birthday[1].month}}年
{{birthday[2].day}}年
</view>
<view>算术运算：{{age+50}}</view>
<view>逻辑运算：{{age==40}}</view>
<vie>三元运算：{{1==1?'good':'bad'}}</vie>

wx.if条件数据绑定

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

运行结果

wx.for 

new.js

 students:[
      {nickname:"Mike",height:180,weight:150},
      {nickname:"An",height:168,weight:90}
    ]

new.wxml 

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

运行结果

 

 模板

模板代码由wxml组成，<template>为模板标签，is属性用于指定要调用的模板名称；data属性定义要传入的数据。

<template name="s">
    <view wx:if="{{age>40}}">1</view>
    <view wx:elif="{{age==40}}">0</view>
    <view wx:else>-1</view>
</template>
<template is="s" data="{{students}}"></template>

运行结果

 

冒泡事件 

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

页面样式文件（wxss)