一、小程序简介

1.小程序与网页开发的区别

2.体验小程序

3.第一个小程序

3.1 注册小程序账号

使用浏览器打开 https://mp.weixin.qq.com/ 网址，点击右上角的“立即注册”即可进入到小程序开发账号的注册流程

获取AppID:

AppID：wx36cd32df4f0b5f68

3.2 安装微信开发者工具

微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下：

快速创建小程序项目
代码的查看和编辑
对小程序功能进行调试
小程序的预览和发布

推荐下载和安装最新的稳定版（Stable Build）的微信开发者工具，下载页面的链接如下：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

3.3 创建小程序项目

二、项目的基本组成结构

1.项目总体结构

1.pages 用来存放所有小程序的页面

2.utils 用来存放工具性质的模块（例如：格式化时间的自定义模块)

3.app.js 小程序项目的入口文件

4.app.json 小程序项目的全局配置文件

5.app.wxss 小程序项目的全局样式文件

6.project.config.json 项目的配置文件

7.sitemap.json 用来配置小程序及其页面是否允许被微信索引

2.小程序页面结构

小程序官方建议把所有小程序的页面，都存放在 pages 目录中，以单独的文件夹存在，如图所示：

一个小程序页面由4个文件组成：

.js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）

.json 文件（当前页面的配置文件，配置窗口的外观、表现等）

.wxml 文件（页面的模板结构文件）——> 即template

.wxss 文件（当前页面的样式表文件) ——> 即css

注：list.vue = list.js + list.json + list.wxml + list.wxss = list文件夹

三、小程序代码的构成

1.JSON配置文件

1.1 JSON 配置文件的作用

1.2 app.json 文件

style:v2 指的是使用2.0版本的样式（更好看）

1.3 project.config.json 文件

1.4 sitemap.json 文件

如果没有checkSiteMap可以手动写一下这项

“action”:“allow” 允许索引

“action”:“disallow” 不允许索引

1.5 页面的 .json 配置文件

index.json中的配置覆盖了app.json中的内容！

1.6 新建小程序页面

1.7 修改项目首页

总结：

在app.json的pages属性中新增页面存放路径，开发者工具会自动创建。

将新添加的页面调整为首页：调整代码顺序，使新添加的位于第一位

代码如下（我创建的是list）：

"pages":[
    "pages/list/list", //后面两个一定一样
    "pages/index/index",
    "pages/logs/logs"
  ],

2.WXML 模板

2.1 什么是 WXML

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作

用类似于网页开发中的 HTML。

2.2 WXML 和 HTML 的区别

3.WXSS 样式

3.1 什么是 WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，类似于网页开发中的

CSS。

3.2 WXSS 和 CSS 的区别

4.JS 逻辑交互

4.1 小程序中的 .js 文件

一个项目仅仅提供界面展示是不够的，在小程序中，我们通过 .js 文件来处理用户的操作。

例如：响应用户的点击、获取用户的位置等等。

4.2 小程序中 .js 文件的分类

四、小程序的宿主环境

1.宿主环境简介

1.1 什么是宿主环境

1.2 小程序的宿主环境

小程序是基于各手机操作系统的微信系统的环境！

1.3 小程序宿主环境包含的内容

2.通信模型

2.1 通信的主体

2.2 小程序的通信模型

中间人都是微信客户端

3.运行机制

3.1 小程序启动的过程

3.2 页面渲染的过程

.js是决定页面显示的关键

4.组件

4.1 小程序中组件的分类

红色的用的比较多：

4.2 常用的视图容器类组件

4.2.1 view 组件的基本使用

view就相当于div，所以默认也是占满一整行的

① view(普通视图区域） 代码示例：

vue

<view class="container1">
    <view>A</view>
    <view>B</view>
    <view>C</view>
</view>

wxss效果：代码示例：

css

/*视图大小*/
.container1 view{
   
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
/*设置区域颜色*/
.container1 view:nth-child(1){
   
    background-color: aqua;
}
.container1 view:nth-child(2){
   
    background-color: blue;
}
.container1 view:nth-child(3){
   
    background-color: crimson;
}
/*横向分散布局*/
.container1{
   
    display: flex;
    justify-content: space-around;
}

4.2.2 scroll-view 组件的基本使用

红框里面有三个子元素，用手拖动（或者鼠标）可以进行滚动

scroll-y就是允许纵向滚动

scroll-x就是允许横向滚动

并且最外层容器必须有一个固定的高度！

scroll-view(可滚动视图区域）代码示例：

vue

<!--注：类名不能用container，会有默认样式-->
<scroll-view class="container1" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>

wxss效果：代码示例：

css

/*设置滚动区域的边框，区域大小，不用flex布局*/
.container1{
   
    border: 1px solid red;
    width: 100px;
    height: 120px;
}

4.2.3 swiper 和 swiper-item 组件的基本使用

swiper 组件的常用属性

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动

swiper 和 swiper-item(轮播图容器组件和轮播图 item 组件）

代码示例：

vue

<!-- 轮播图结构-->

<!-- 常用属性：
    indicator-dots 是否显示指示点 
    		-color 指示点颜色
    		-active-color 被激活的指示点颜色 
    autoplay 自动切换
    interval 自动切换的时间间隔（毫秒单位） 
    circular 衔接滑动
-->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000" circular>
	<!--第1个轮播图-->
    <swiper-item>
        <view class="item">A</view>
    </swiper-item>
	<!--第2个轮播图-->
    <swiper-item>
        <view class="item">B</view>
    </swiper-item>
	<!--第3个轮播图-->
    <swiper-item>
        <view class="item">C</view>
    </swiper-item>
</swiper>

wxss效果：代码示例：

css

/*轮播图样式*/
.swiper-container {
   
    height: 150px;
}
/*文本样式*/
.item{
   
    height: 100%; /*撑着父容器swiper-item*/
    line-height: 150px; /*让文本垂直居中*/
    text-align: center;
}
/*设置背景颜色*/
swiper-item:nth-child(1){
   
    background-color: salmon;
}
swiper-item:nth-child(2){
   
    background-color: seagreen;
}
swiper-item:nth-child(3){
   
    background-color: slateblue;
}

4.3 常用的基础内容组件

只有text组件支持长按选中操作，选中即可进行复制等操作

view不支持长按选中操作

4.3.1 text 组件的基本使用

text（文本组件）

通过 text 组件的 selectable 属性，实现长按选中文本内容的效果：代码示例：

vue

<view>
    手机号支持长按选中效果
    <text selectable>2873390654</text>
</view>

2022年，selectable已经废弃，要使用user-select属性：

vue

<view>
    手机号支持长按选中效果
    <text user-select>2873390654</text>
</view>

4.3.2 rich-text 组件的基本使用

rich-text（富文本组件）

通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构：代码示例：

vue

<rich-text nodes="<h1 style='color: red;'>这是一个标题</h1>"></rich-text>

最终渲染出的效果就是：

这是一个标题

4.4 其他常用组件

4.4.1 button 按钮的基本使用

①通过type属性指定按钮类型

代码示例：

vue

<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

②size=“mini” 小尺寸按钮

并且位于一行

代码示例：

vue

<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

③plain 镂空按钮

代码示例：

vue

<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

4.4.2 image 组件的基本使用

image 组件的 mode 属性

aspectFit比较好，因为不会失真，与原图比例一样，但是可能不会填满屏幕

代码示例：

vue

<!--空图片-->
 <image></image>
   <!--使用src指向图片路径-->
 <image src="/images/1.jpg" mode="widthFix"></image>

wxss设置边框：

css

/*图片边框*/
image{
   
    border: 1px solid red;
}

5.API

5.1 小程序 API 概述

小程序中的 API 是由宿主环境提供的，通过这些丰富的小程序 API，开发者可以方便的调用微信提供的能

力，例如：获取用户信息、本地存储、支付功能等。

5.2 小程序 API 的 3 大分类

wx相当于浏览器的window，可以全局调用

五、协同工作和发布

1.协同工作

1.1 了解权限管理需求

1.2 了解项目成员的组织结构

1.3 小程序的开发流程

2.小程序成员管理

2.1 成员管理的两个方面

2.2 不同项目成员对应的权限

2.3 开发者的权限说明

开发者权限包括了体验者的权限！

2.4 添加项目成员和体验成员

后台管理系统：https://mp.weixin.qq.com/

3.小程序的版本

3.1 软件开发过程中的不同版本

3.2 小程序的版本

版本阶段	说明
开发版本	使用开发者工具，可将代码上传到开发版本中。开发版本只保留每人最新的一份上传的代码。点击提交审核，可将代码提交审核。开发版本可删除，不影响线上版本和审核中版本的代码。
体验版本	可以选择某个开发版本作为体验版，并且选取一份体验版。
审核中的版本	只能有一份代码处于审核中。有审核结果后可以发布到线上，也可直接重新提交审核，覆盖原审核版本。
线上版本	线上所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。

4.发布上线

4.1 小程序发布上线的整体步骤

一个小程序的发布上线，一般要经过上传代码 --> 提交审核 --> 发布这三个步骤

4.2 上传代码

4.3 在后台查看上传之后的版本

4.4 提交审核

4.5 发布

4.6 基于小程序码进行推广

5.运营数据

5.1 查看小程序运营数据的两种方式

总结：

一、小程序简介 ​

1.小程序与网页开发的区别 ​

2.体验小程序 ​

3.第一个小程序 ​

3.1 注册小程序账号 ​

3.2 安装微信开发者工具 ​

3.3 创建小程序项目 ​

二、项目的基本组成结构 ​

1.项目总体结构 ​

2.小程序页面结构 ​

三、小程序代码的构成 ​

1.JSON配置文件 ​

1.1 JSON 配置文件的作用 ​

1.2 app.json 文件 ​

1.3 project.config.json 文件 ​

1.4 sitemap.json 文件 ​

1.5 页面的 .json 配置文件 ​

1.6 新建小程序页面 ​

1.7 修改项目首页 ​

2.WXML 模板 ​

2.1 什么是 WXML ​

2.2 WXML 和 HTML 的区别 ​

3.WXSS 样式 ​

3.1 什么是 WXSS ​

3.2 WXSS 和 CSS 的区别 ​

4.JS 逻辑交互 ​

4.1 小程序中的 .js 文件 ​

4.2 小程序中 .js 文件的分类 ​

四、小程序的宿主环境 ​

1.宿主环境简介 ​

1.1 什么是宿主环境 ​

1.2 小程序的宿主环境 ​

1.3 小程序宿主环境包含的内容 ​

2.通信模型 ​

2.1 通信的主体 ​

2.2 小程序的通信模型 ​

3.运行机制 ​

3.1 小程序启动的过程 ​

3.2 页面渲染的过程 ​

4.组件 ​

4.1 小程序中组件的分类 ​

4.2 常用的视图容器类组件 ​

4.2.1 view 组件的基本使用 ​

4.2.2 scroll-view 组件的基本使用 ​

4.2.3 swiper 和 swiper-item 组件的基本使用 ​

4.3 常用的基础内容组件 ​

4.3.1 text 组件的基本使用 ​

4.3.2 rich-text 组件的基本使用 ​

这是一个标题

4.4 其他常用组件 ​

4.4.1 button 按钮的基本使用 ​

4.4.2 image 组件的基本使用 ​

5.API ​

5.1 小程序 API 概述 ​

5.2 小程序 API 的 3 大分类 ​

五、协同工作和发布 ​

1.协同工作 ​

1.1 了解权限管理需求 ​

1.2 了解项目成员的组织结构 ​

1.3 小程序的开发流程 ​

2.小程序成员管理 ​

2.1 成员管理的两个方面 ​

2.2 不同项目成员对应的权限 ​

2.3 开发者的权限说明 ​

2.4 添加项目成员和体验成员 ​

3.小程序的版本 ​

3.1 软件开发过程中的不同版本 ​

3.2 小程序的版本 ​

4.发布上线 ​

4.1 小程序发布上线的整体步骤 ​

4.2 上传代码 ​

4.3 在后台查看上传之后的版本 ​

4.4 提交审核 ​

4.5 发布 ​

4.6 基于小程序码进行推广 ​

5.运营数据 ​

5.1 查看小程序运营数据的两种方式 ​

一、小程序简介

1.小程序与网页开发的区别

2.体验小程序

3.第一个小程序

3.1 注册小程序账号

3.2 安装微信开发者工具

3.3 创建小程序项目

二、项目的基本组成结构

1.项目总体结构

2.小程序页面结构

三、小程序代码的构成

1.JSON配置文件

1.1 JSON 配置文件的作用

1.2 app.json 文件

1.3 project.config.json 文件

1.4 sitemap.json 文件

1.5 页面的 .json 配置文件

1.6 新建小程序页面

1.7 修改项目首页

2.WXML 模板

2.1 什么是 WXML

2.2 WXML 和 HTML 的区别

3.WXSS 样式

3.1 什么是 WXSS

3.2 WXSS 和 CSS 的区别

4.JS 逻辑交互

4.1 小程序中的 .js 文件

4.2 小程序中 .js 文件的分类

四、小程序的宿主环境

1.宿主环境简介

1.1 什么是宿主环境

1.2 小程序的宿主环境

1.3 小程序宿主环境包含的内容

2.通信模型

2.1 通信的主体

2.2 小程序的通信模型

3.运行机制

3.1 小程序启动的过程

3.2 页面渲染的过程

4.组件

4.1 小程序中组件的分类

4.2 常用的视图容器类组件

4.2.1 view 组件的基本使用

4.2.2 scroll-view 组件的基本使用

4.2.3 swiper 和 swiper-item 组件的基本使用

4.3 常用的基础内容组件

4.3.1 text 组件的基本使用

4.3.2 rich-text 组件的基本使用

4.4 其他常用组件

4.4.1 button 按钮的基本使用

4.4.2 image 组件的基本使用

5.API

5.1 小程序 API 概述

5.2 小程序 API 的 3 大分类

五、协同工作和发布

1.协同工作

1.1 了解权限管理需求

1.2 了解项目成员的组织结构

1.3 小程序的开发流程

2.小程序成员管理

2.1 成员管理的两个方面

2.2 不同项目成员对应的权限

2.3 开发者的权限说明

2.4 添加项目成员和体验成员

3.小程序的版本

3.1 软件开发过程中的不同版本

3.2 小程序的版本

4.发布上线

4.1 小程序发布上线的整体步骤

4.2 上传代码

4.3 在后台查看上传之后的版本

4.4 提交审核

4.5 发布

4.6 基于小程序码进行推广

5.运营数据

5.1 查看小程序运营数据的两种方式