第二章总结

2微信小程序开发基础

2.1小程序的基本目录结构

pages所有页面，每个页面一个文件夹，一个页面四个不同的文件夹分别表示页面结构、页面样式、页面逻辑和页面配置文件。

utils存放一些公共的 .js文件

2.1.1主体文件

1.app.js：小程序逻辑文件，用来注册小程序全局实例。

2.app.json：公共设置文件，配置小程序全局设置。

3.app.wxss：主样式表文件，类似HTML里面的 .css文件。

2.1.2页面文件

2.2小程序开发框架

2.2.1视图层

所有.wxml文件（描述页面的结构）与.wxss（描述页面样式）文件的集合

2.2.2逻辑层

逻辑层用于处理事务逻辑

2.2.3数据层

1.页面临时数据和缓存

2.文件存储

3.网络存储于调用

2..3创建小程序页面

2.3.1创建第一个页面文件

2.3.2创建另一个页面文件

2.4配置文件

2.4.1全局配置文件

1.pages配置项

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

2.window配置项

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

3.tabBar配置项

"tabBar":{
  "color":"#666666",
  "selectedColor":"#ff0000",
  "borderStyle": "black",
  "backgroundColor": "#ffffff",
  "list":[
    {
      "pagePath":"pages/logs/logs",
      "iconPath":"images/1 .png",
      "selectedIconPath":"images/2.jpg",
      "text":"首页"
    },
    {
      "pagePath":"pages/soga/soga",
      "iconPath":"images/1 .png",
      "selectedIconPath":"images/2.jpg",
      "text":"新闻"
    }
  ]
}

4.networkTimeout配置项

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

5.debug配置项

2.4.2页面配置文件

2.5逻辑层文件

2.5.1项目逻辑文件

2.5.2页面逻辑文件

1.设置初始数据

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

Page({
  data:{
    name:'lwk',
    age:30,
    birthday:[{year:1998},{month:11},{data:18}],
    Object:{hobby:'computer'}
  }
})

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

3.定义事件处理函数

4.使用setData更新数据

2.6页面结构文件

2.6.1数据绑定

1.简单绑定

2.运算

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

2.6.2条件数据绑定

1.wx:if条件数据绑定

2.block wx:if条件数据绑定

2.6.3列表数据绑定

1.wx:for

2.block wx:for

2.6.4模板

1.定义模板

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

2.调用模板

<template is="stu" data="{{students}}"/>

2.6.5引用页面文件

1.import方式

2.include方式

2.6.6页面事件

2.7页面样式文件

1.尺寸单位

2.样式导入

3.选择器

4.WXSS常用属性