第1~3章总结

第1章微信小程序概述总结

学习目标

        1 了解微信小程序的特点

        2 了解微信小程序的应用领域

        3 掌握微信小程序开发者工具的安装及使用

        4 掌握微信小程序的开发流程

        5 熟练使用微信小程序开发者工具

认识微信小程序

小程序简介

小程序简介：微信（WeChat) 是腾讯公司一2011年1月21日推出的一款为智能终端提供即时通信（Instant Messaging，IM)服务的应用程序。

        小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫（二维码）或者搜一下（关键词）即可打开应用，用户不用关心是否安装太多应用的问题，无需安装与卸载

        小程序 、订阅号 、服务号、企业微信（企业号）属于微信公众平台的四大生态体系，它们面向不同的

小程序的特征

1 无须安装

2 触手可及

3 用完即走

4 无须卸载

小程序应用场景的特点

1 简单的业务逻辑

        简单是指应用本身的业务逻辑并不复杂

2 低频度的使用场景

        低频度是小程序使用场景的另一个特点

微信小程序开发流程

1 在微信公众平台上注册小程序账号

2 下载开发者工具进行编码

3 通过开发者工具提交代码，待通过审核后便可以发布

微信小程序开发者工具界面功能介绍

我们把微信小程序开发者工具界面划分五大区域：工具栏 模拟区 目录文件区 编辑区和调试区

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

学习目标

        1、了解小程序的基本目录结构

        2、了解小程序的开发框架

        3、掌握小程序的文件类型

        4、掌握小程序的相关配置信息

小程序的基本目录结构

主体文件

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

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

app.wxss小程序主样式表文件

页面文件

.js文件 页面逻辑文件

.wxml 页面结构文件

.wxss 页面样式表文件

.json 页面配置文件

小程序的开发框架

视图层 

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

逻辑层

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

        微信小程序开发框架的逻辑层是采用javaScrict编写的。 在javaScrict的基础上, 微信团队做了适当修改, 以便提高开发小程序的效率。 主要修改包括:

1  增加app()和Page()方法, 进行程序和页面的注册。

2  提供丰富的API, 如扫一扫、支付等微信特有的能力。

3 每个页面有独立的作用域, 并提供模块化能力。

数据层

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

1 页面临时数据或缓存

2文件存储（本地存储）

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

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

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

3 网络存储与调用

wx.request: 发起网络请求

wx.uploadFile: 上传文件

wx.downloadFile: 下载文件

调用URL的API接口，如下：

wx.navigateTo ：新窗口打开页面

wx.redirectTo: 原窗口打开页面

创建小程序页面

启动微信开发者工具 创建新项目

 创建另一个页面文件

1、先将pages中的"index"删除

2、打开app.json将里面的"pages/index/index"删除

3、在项目主目录下新建一个don目录，并在don目录下新建don.js、don.json、don.wxml和don.wxss

打开app.json输入代码

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

打开don.json输入

{
  
}

 打开don.js输入 （注意P得是大写）

Page({
 
})

在don.wxml输入内容

谁不玩原神啊！

运行效果如下

配置文件

全局配置文件

 Pages配置项

设置Pages配置时要注意以下三点：

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

2、在小程序新准则或减少页面时，都需要对数组进行修改

3、文件名不需要写文件扩展名

widow配置项

widow配置项负责设置小程序状态栏、导航栏、窗口背景等系统样式

taBar配置项

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

 其中taBar配置项中list选项

networkTimeout配置项

小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项统一设置，不能单独在API中设置，显示颜色就近原则

5.debug配置项

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

页面配置文件

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

逻辑层文件

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

项目逻辑文件

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

页面逻辑文件

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

设置初始数据

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

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

  配置logs.js 代码如下

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

 配置 logs.wsml 代码如下

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

页面结构文件

页面结构文件(WXML) 是框架设计的一套类似HTML的标签语言, 结合基础组件、事件系统, 可以构建出页面的结构, 即.wxml 文件。 在小程序中, 类似HTML的标签被称为组件, 是页面结构文件的基本组成单元

数据绑定 

1 简单绑定

2 运算

条件数据绑定

1 wx:if条件数据绑定

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

2 block wx:if条件数据绑定

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

3 列表数据绑定

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

1 wx:for

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

2 block wx:for

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

模板

1 定义模板

2 调用模板

引用页面文件

1 import方式

2 include方式

页面事件

 页面样式文件

1.尺寸单位

2.样式导入

3.选择器

4.WXSS常用属性

第三章页面布局总结

学习目标

了解盒子模型的基本原理

掌握浮动与定位 

熟练掌握flex布局方式

盒子模型

        盒子模型就是我们在页面设计中经常用到的一种思维模型。 在ＣＳＳ 中, 一个独立的盒子模型由内容(ｃｏｎｔｅｎｔ)、内边距(ｐａｄｄｉｎｇ)、边框(ｂｏｒｄｅｒ)和外边距( ｍａｒｇｉｎ) ４ 个部分组成

此外对paddin border和margin可以进一步细化为上、下、左、右4个部分在CSS中可以分别设置

块级元素及行内元素

        元素按显示方式分为块级元素、行内元素和行内块元素, 它们的显示方式由ｄｉｓｐｌａｙ 属性控制。

1、块级元素

        块级元素默认占一行高度, 一行内通常只有一个块级元素(浮动后除外), 添加新的块级元素时, 会自动换行, 块级元素一般作为盒子出现。 块级元素的特点如下:

( １ ) 一个块级元素占一行。
( ２ ) 块级元素的默认高度由内容决定 , 除非自定义高度。
( ３ ) 块级元素的默认宽度是父级元素的内容区宽度 , 除非自定义宽度。
(４) 块级元素的宽度、高度、外边距及内边距都可以自定义设置。
(５ ) 块级元素可以容纳块级元素和行内元素。

<view style="border: 1px solid #f00;">块级元素 </view>
<view style="border: 1px solid #0f0;margin: 15px;padding: 20px;">块级元素2</view>
<view style="border: 1px solid #00f;width: 200px;height: 80px;">块级元素3</view>
<view style="border: 1px solid #ccc;">
<view style="height: 60px ;">块级元素4</view>
</view>
<view style="border: 1px solid #f00;width: 100px;background-color: #ccc;">父级元素高度随内容决定，内容为文本</view>

 

2、行内元素

        行内元素, 不必从新一行开始, 通常会与前后的其他行内元素显示在同一行中, 它们不占有独立的区域, 仅靠自身内容支撑结构, 一般不可以设置大小, 常用于控制页面中文本的样式。 将一个元素的dispay 属性设置为inline 后, 该元素即被设置为行内元素。 行内元素的特点如下:

        (１) 行内元素不能被设置高度和宽度, 其高度和宽度由内容决定。

        (２) 行内元素内不能放置块级元素, 只级容纳文本或其他行内元素。

        (３) 同一块内, 行内元素和其他行内元素显示在同一行。

<view style="pad: 20px;">
<text style="border: 1px solid #f00;">文本1</text>
<text style="border: 1px solid #0f0;margin: 10px;padding: 5px;">文本2</text>
<view style="border: 1px solid #00f;display: inline;">块级元素设置为行内元素</view>
</view>

3、行内块元素

当元素的display属性被设置为inline-block时，元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。

<view>
元素显示方式的<view style="display: inline-block;border: 1px solid #f00;margin: 10px;padding: 10px; width: 200px;">块级元素、行内元素和行内块元素</view>三种类型
</view>

浮动与定位

元素浮动与清除

元素浮动

        元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制, 移到其父元素中指定位置的过程。 在CSS 中, 通过float 属性来定义浮动。

        none——默认值，表示元素不浮动

        left——元素向左浮动

        right——元素向右浮动

<view>box1,box2,box3设置浮动</view>
<view style="border: 1px solid #ff0,;padding: 5px;">
<view style="border: 1px solid #0f0;">box1</view>
<view style="border: 1px solid #0f0;">box2</view>
<view style="border: 1px solid #0f0;">box3</view>
</view>
<view>box1左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid #0f0;">box1</view>
<view style="border: 1px solid #0f0;">box2</view>
<view style="border: 1px solid #0f0;">box3</view>
</view>
<view>box1 box2左浮动</view>
<view style="border: 1px solid #f00; padding: 5px;">
<view style="float: left;border:1px solid #0f0;">box1</view>
<view style="float: left;border:1px solid #0f0;">box2</view>
<view style="border:1px solid #0f0;">box3</view>
</view>
<view>box1 box2 box3左浮动</view>
<view style="border: 1px solid #f00; padding: 5px;">
<view style="float: left;border:1px solid #0f0;">box1</view>
<view style="float: left;border:1px solid #0f0;">box2</view>
<view style="float: left; border:1px solid #0f0;">box3</view>
</view>

清除浮动

在CSS中 clear属性用于清除元素对其他元素的影响

left——清除左边浮动的影响，也就是不允许左侧有浮动元素

right——清除右边浮动的影响，也就是不允许左侧有浮动元素

both——同时清除左右两侧浮动的影响

none——不清除浮动

<view>box1 box2左浮动 box3清除左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid #f0f;">box1</view>
<view style="float: left;border: 1px solid #f0f;">box2</view>
<view style="clear: left; border: 1px solid #f0f;">box3</view>
</view>

元素定位

        浮动布局虽然灵活, 但无法对元素的位置进行精确的控制。 在CSS 中, 通过position属性可以实现对页面元素的精确定位。

static——默认值，该元素按照标准流进行布局

relative——相对定位

absolute——绝对定位

fixed——固定定位

flex布局

        flex布局是万维网联盟(World Wide Web Consortium,W3C) 在２００９ 年提出的一种新布局方案, 该布局可以简单快速地完成各种可以伸缩的设计, 以便很好地支持响应式布局。flex是flexible box的缩写, 意为弹性盒子模型, 可以简便、完整、响应式地实现各种页面布局。

flex布局主要由容器和项目组成, 采用flex 布局的元素称为flex容器(flex container),flex布局的所有直接子元素自动成为容器的成员, 称为flex项目。

容器属性

flex窗口属性有7种

项目属性

容器内的项目支持6个属性