第1~3章总结-CSDN博客

本文链接：https://blog.csdn.net/Zik_Echo/article/details/138106224

第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项目。