小程序和浏览器的区别

  1. 运行环境不同

  2. API不同

    小程序无法调用DOM和BOM的API，但可以调用微信环境提供的各种API

  3. 开发模式不同

体验小程序

微信官方的组件展示小程序

image-20221107192210739

小程序ID在哪？

登录网页->点击“开发栏”中的“开发管理”->开发者ID（AppID）

查看小程序效果

点击编译按钮，在电脑端模拟器中查看

image-20221107193348705

点击预览按钮，扫描二维码，在自己手机上查看

image-20221107193444453

主界面组成

image-20221107193831534

小程序项目结构

image-20221107194335460

小程序页面组成部分

每个页面有一个文件夹组成，一个文件夹中有四个文件

image-20221107194528936

image-20221107194544899

最后编译时，会将四个文件编译成一个完整的页面。

文件作用介绍

.json文件

JSON是一种数据格式，常作为配置文件出现。

小程序中有四种JSON文件

  1. 根目录中的app.json
  2. 根目录中的project.config.json
  3. 根目录中的sitemap.json
  4. pages中每个页面中的json文件

app.json

整个项目的全局配置文件，包括所有页面路径、窗口外观、界面表现、底部Tab等

image-20221107202757785

  1. pages：用来记录当前小程序所有页面的路径
  2. window：全局定义小程序所有页面的背景色、文本颜色等
  3. style：全局定义小程序组件所使用的样式版本
  4. sitemapLocation：用来指明sitemap.json的位置

project.config.json

对小程序开发工具所做的个性化配置

image-20221107203215033

  1. setting中保存了编译相关的配置
  2. projectname中保存的是项目名称
  3. appid中保存的是小程序的账号id

sitemap.json

开放小程序内搜索，类似SEO

页面.json文件

在页面配置文件与全局配置中相同的项，会用页面配置文件中的项覆盖。

新建小程序页面

在app.js中，pages项中添加代码

修改首页

app.js中的pages中第一个项即首页界面

WXML和HTML的区别

  1. 标签名称不同
  2. 属性节点不同
  3. 提供了类似Vue中的模板语法

WXSS和CSS的区别

  1. wxss新增rpx尺寸单位
  2. 提供了全局的样式（app.wxss作用全局）
  3. wxss仅支持部分CSS选择器（类、id、元素、并集、后代、伪类选择器等）

小程序中的js文件分类

app.js

整个程序的入口文件，通过App()函数启动整个小程序

页面.js文件

页面入口文件，通过调用Page()函数来创建并运行页面

普通.js文件

普通的功能模块文件，用来封装公共的函数或属性供页面使用

小程序的宿主环境

什么是宿主环境？

image-20221107205043601

小程序的宿主环境？

image-20221107205130868

通信模块

通信主体为渲染层和逻辑层

通信模型

image-20221107205435164

小程序的运行机制

小程序启动过程

  1. 下载代码包
  2. 解析app.json全局配置文件
  3. 执行app.js小程序入口文件，调用App()创建小程序实例
  4. 渲染小程序首页
  5. 小程序启动完成

小程序页面渲染过程

  1. 加载页面.json配置文件
  2. 加载页面.wxml模板和.wxss样式
  3. 执行页面.js文件，调用Page()创建页面实例
  4. 页面渲染完成

小程序的组件

常用视图容器类组件

  1. view
  • 类似HTML中的div，是一个块级元素
  • 实现布局效果
  1. scroll-view
  • 可滚动的视图区域
  • 实现滚动列表效果
  1. swiper和swiper-item
  • 轮播容器组件和轮播图item组件

view组件使用

实现flex横向布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container1 view{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    margin-bottom: 10px;
}
.container1 view:nth-child(1){
  background-color:lightcoral;
}

.container1 view:nth-child(2){
  background-color:lightgreen;
}

.container1 view:nth-child(3){
  background-color:lightskyblue;
}
.container1{
  display: flex;
  justify-content: space-around;
}

scroll-view组件使用

1
2
3
4
5
<scroll-view scroll-y class="container2">
  <view>A</view>
  <view>B</view>
  <view>B</view>
</scroll-view>

swiper组件使用

1
2
3
4
5
6
7
8
9
10
11
<swiper class="container3" indicator-dots indicator-color="white" indicator-active-color="black" autoplay="true" circular>
  <swiper-item>
    <view class="item">a</view>
  </swiper-item>
  <swiper-item>
    <view class="item">b</view>
  </swiper-item>
  <swiper-item>
    <view class="item">c</view>
  </swiper-item>
</swiper>

相关属性

image-20221107220122995

常见基础内容组件

  1. text
  • 文本组件，类似于span标签
  1. rich-text
  • 富文本组件
  • 支持将HTML字符渲染为WXML架构

text组件使用

在text组件中，利用selectable属性实现长按选中文本内容的效果

rich-text组件使用

1
<rich-text nodes="<h1 style="color:red">标题</h1>"></rich-text>

button组件使用

通过open-type属性可以调用微信提供的各种功能。

image组件使用

默认宽高为：300px*240px

  • mode属性可以对指定图片进行裁剪和缩放

常见属性值

image-20221108074221139

小程序页面导航组件

  • 类似HTML中的a标签