网站导航
> 技术文档 > 学《微信小程序》一文入门 Day1_微信小程序API调用示例

学《微信小程序》一文入门 Day1_微信小程序API调用示例

网友: 技术文档 2025-09-03 23:15:47

Day 1

target：

  1. 如何创建项目
  2. 项目的组成结构
  3. 页面的组成部分
  4. 常用组件的使用
  5. 协同开发和发布

1. 小程序简介

与普通网页开发的区别：

1.1.运行环境不同

​ | 网页运行在浏览器环境中，小程序运行在微信环境中

1.2. API 不同

​ | 由于运行环境不同，小程序当中无法调用 DOM 和 BOM 的API

​ 但小程序中可以调用微信环境提供的各种 API

1.3. 开发模式不同

​ | 网页的开发模式：浏览器 + 代码编辑器。

​ 小程序有自己的一套标准开发模式：

  • 申请小程序开发账号
  • 安装小程序开发者工具
  • 创建和配置小程序项目

2. 第一个小程序

2.1. 注册流程

​

注册地址： https://mp.weixin.qq.com/

​ 注册账号类型选择：—> 小程序

​ 填写注册信息：—>账号信息、邮箱激活、信息登记

​ ！注：用于注册小程序的邮箱不得绑定任何微信相关内容

2.2. 获取 APPID

​ 管理后台—>菜单—>开发—>开发设置—>开发者ID

2.3. 安装开发者工具

！官方推荐的小程序开发工具，其功能如下：

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

不推荐使用 VSCode(代码编辑工具)

​

2.4. 下载步骤：

  • 小程序—>菜单—>开发与服务—>开发工具—>选择稳定版

  • 安装完成后，使用注册好的开发者账号登录即可

2.5. 外观设置和代理：

  • 外观设置为浅色，字号18，行距12，模拟器位置左边
  • 代理设置为不使用任何代理，勾选后直连网络

2.6. 小程序项目创建：

  • 设置项目名称
  • 设置项目目录
  • 填写APPID
  • 设置开发模式
  • 后端服务：不使用云服务
  • 语言设置：JavaScript

2.7. 运行效果查看：

  • 通过编译后，在编译器中查看
  • 通过真机扫码查看

3. 代码构成部分

3.1. 界面的组成部分：

  • 菜单栏
  • 工具栏
  • 模拟器
  • 代码编辑区
  • 调试区

3.2. 项目的基本组成结构：

  • pages：存放所有小程序的页面
  • utils：存放工具性质的模块
  • app.js：小程序项目的入口文件
  • app.json：小程序项目的全局配置文件
  • app.wxss：小程序项目的全局样式文件
  • project.config.json：项目的配置文件
  • sitemap.json：配置小程序及其页面是否允许被微信索引

3.3. 页面的组成部分：

​ ！小程序官方建议：将小程序的页面以单独的文件夹存放在 pages 目录中

在这里插入图片描述

其中，每个页面以单独的文件夹存在，

每个文件夹中包含四个文件：

  • .js：页面的脚本文件，存放页面的数据，事件处理函数等
  • .json：当前页面的配置文件，配置窗口的外观、表现等
  • .wxml：页面的模板结构文件
  • .wxss：当前页面的样式表文件

3.4. 关于 JSON 文件：

JSON 是一种数据格式，在实际开发中，JSON 总是以配置文件的形式出现。小程序项目中也不例外：通过不同的 .JSON 配置文件，可以对小程序项目进行不同级别的配置。

​ 在小程序项目中有 4 种 json配置文件，分别是：

  • 项目根目录中的 app.json 配置文件

​ | app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab等 Demo 项目里边的 app.json 配置内容如下：

# app.json 配置文件默认情况下只有如下四项配置。{ # 用来记录当前小程序所有页面的路径 \"pages\": [ \"pages/index/index\" ], # 全局定义小程序所有页面的背景色、文字颜色等 \"window\": { \"navigationBarTextStyle\": \"black\", \"navigationStyle\": \"custom\" }, # 全局定义小程序组件所使用的样式版本 # v2 代表使用最新的组件样式 \"style\": \"v2\", # 用来指明sitemap.json 的位置 \"sitemapLocation\": \"sitemap.json\", }
  • 项目根目录中的 project.config.json 配置文件

​ project.config.json 是项目配置文件，用来记录我们对微信小程序开发工具所做的个性化配置。

{ # projectname 保存项目名称 # 小程序的账号 ID \"appid\": \"wx4ed6827d4fe55c6d\", \"compileType\": \"miniprogram\", \"libVersion\": \"3.8.9\", \"packOptions\": { \"ignore\": [], \"include\": [] }, # 编译相关的配置 \"setting\": { \"coverView\": true, \"es6\": true, \"postcss\": true, \"minified\": true, \"enhance\": true, \"showShadowRootInWxmlPanel\": true, \"packNpmRelationList\": [], \"babelSetting\": { \"ignore\": [], \"disablePlugins\": [], \"outputPath\": \"\" } }, \"condition\": {}, \"editorSetting\": { \"tabIndent\": \"insertSpaces\", \"tabSize\": 2 }}
  • 项目根目录中的 sitemap.json 配置文件

​ 微信已开放小程序内搜素，效果类似于 PC 网页的 SEO。sitemap.json 文件用来配置小程序页面是否允许被 微信索引。

​ 当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和 页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

{ \"desc\": \"关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html\", \"rules\": [{ # 都允许被微信进行索引;如不想被索引时将值改为：disallow \"action\": \"allow\", # 所有的页面 \"page\": \"*\" }]}
  • 每个页面文件夹中的 .json 配置文件

​ 小程序中的每一个页面，都可以使用 .json 文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖 app.json 的 window 中相同的配置项。

3.5. 关于页面创建

两种方式：

  • 在 pages 目录下手动按层级创建
  • 在 app.json 全局配置文件下，以代码形式创建
\"pages\": [ \"pages/index/index\", # 新增 list页面 \"pages/list/list\", ],

! 修改 pages 数组中的路径顺序，可更改小程序的首页或页面顺序

3.6. 关于 WXML 模板

小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的 HTML。

与 HTML 的区别：

  • 标签名称不同

​ HTML：(div，span，img，a)

​ WXML：(view，text，image，navigator)

  • 属性节点不同

​ 超连接

​

  • 提供了类似于 vue 中的模板语法
    • 数据绑定
    • 列表渲染
    • 条件渲染

3.7. 关于 WXSS

样式语言，用于描述 WXML 的组件样式，类似于网页开发中的 CSS。

与 CSS 的区别：

  • 新增了 rpx 尺寸单位

​ CSS 中需要手动进行像素单位换算，例如 rem

​ WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动换算

  • 提供了全局的样式和局部样式

​ 项目根目录中的 app.wxss 会作用于所有小程序页面

​ 局部页面的 .wxss 样式仅对当前页面生效

  • WXSS 仅支持部分 CSS 选择器
    • .clss 和 #id
    • element
    • 并集选择器、后代选择器
    • ::after 和 ::before 等伪类选择器

3.8. 关于 .JS 文件

一个项目仅仅提供界面展示是不够的，在小程序中，我们通过 .js 文件来处理用户的操作。例如：响应用户的点击、获取用户的位置等待。

小程序中 .js 文件分为以下三大类：

  • app.js

​ 整个小程序项目的入口文件，通过 app() 函数来启动整个小程序

  • 页面的 .js 文件

​ 页面的入口文件，通过 page() 函数来创建并运行页面

  • 普通的 .js 文件

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

4. 宿主环境

4.1. 关于宿主环境：

指的是程序运行所必须的依赖环境。例如：

Android 系统 和 ios 系统，是两个不同的宿主环境。安卓版的微信 App不能在 ios 环境下运行。所以，Andorid是安卓软件的宿主环境，脱离了宿主环境的软件是没有意义的。

微信小程序的宿主环境：

在这里插入图片描述

4.2. 小程序宿主环境包含的内容：

  • 通信模型

    通信的主体：

    小程序中通信的主体是渲染层和逻辑层，其中：

    • WXML 模板和 WXSS 样式工作在渲染层
    • JS 脚本工作在逻辑层

通信模型的两部分：

  • 渲染层和逻辑层的通信

    • 由微信客户端进行转发

  • 逻辑层和第三方服务器之间的通信

    • 由微信客户端进行转发

在这里插入图片描述

  • 运行机制

小程序的启动过程：

​ 把小程序的代码包下载到本地

​ 解析 app.json 全局配置文件

​ 执行 app.js 小程序入口文件，调用 App() 函数创建小程序实例

​ 渲染小程序首页

​ 小程序启动完成

页面渲染的过程：

​ 加载并渲染页面的 .json 配置文件

​ 加载页面的 .wxml 模板和 .wxss 样式

​ 执行页面的 .js 文件，调用 page() 创建页面实例

  • 组件

​ 组件的分类：

​ 小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类，分别是：视图容器、基础内容、表单组件、导航组件、媒体组件、map 地图、canvas 画布组件、开放能力、无障碍访问。

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

  1. view

​ 普通视图区域

​ 类似于 HTML 中的 div，是一个块级元素

​ 常用来实现页面的布局效果

  1. scrill-view

​ 可滚动的视图区域

​ 常用来实现滚动列表效果

  1. swiper 和 swiper-item

​ 轮播图容器组件和轮播图 item 组件

view 组件的基本使用：

实现如图中 flex 横线布局效果：

在这里插入图片描述

先在 页面.wxml 中设置样式：

 A B C

然后 到页面.wxss 中 设置 container1 容器的像素：

.container1 view{ width: 100px; height: 100px; text-align: center; line-height: 100px;}

继续 c3 选择器设置view的背景色：

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

最后 设置布局样式：

.container1{ display: flex; justify-content: space-around;}

scroll - view 组件的基本使用：

实现如图中滚动效果：

在这里插入图片描述

先在 页面.wxml 中设置样式：

  A B C

然后 到页面.wxss 中设置容器的像素：

.container1{ border: 1px solid red; width: 100px; height: 120px; display: flex; justify-content: space-around;}

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

实现如图中轮播图效果：

在这里插入图片描述

编写页面结构：

    A    B    C

设置页面样式：

/* 设置轮播图样式 */.swiper-container { height: 150px;}.item { height: 100%; line-height: 150px; text-align: center;}swiper-item:nth-child(1) .item{ background-color: lightgreen;}swiper-item:nth-child(2) .item{ background-color: lightskyblue;}swiper-item:nth-child(3) .item{ background-color: lightpink;}

swiper 组件的常用属性：

在这里插入图片描述

常用的基础内容组件：

  1. text

​ 文本组件

​ 类似于 HTML 中的span 标签，是一个行内元素

  1. rich - text

​ 富文本组件

​ 支持把 HTML 字符串渲染为 WXML 结构

text 组件的基本使用：

通过 text 组件的 selectable属性，实现长按选中文本的效果：

 手机号支持长按选中效果： 12322333233

rich - text 的基本使用：

通过该组件的 nodes 属性节点，把HTML字符串渲染为对应的 UI 结构：

<rich-text nodes=\"
标题
\">

其他常用组件：

  1. button

​ 按钮组件

​ 功能比 HTML 中的 button 按钮丰富

​ 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

  1. image

​ 图片组件

​ image 组件默认宽度约 300px、高度约 240px

button 组件的基本使用：

在这里插入图片描述

image 组件的基本使用：

设置 图片的边框：

image { border: 1px solid red;}

image 组件的其他属性：

mode 属性用来指定图片的裁剪和缩放模式，常用的model属性值如下：

在这里插入图片描述

  • API

概述：小程序中的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力，例如：获取用户信息、本地存储、支付功能等。

小程序官方把 API 分为3类：

  1. 事件监听 API

​ 特点：以 on 开头，用来监听某些事件的触发

​ 举例：wx.onWindowResize(function callback) 监听窗口尺寸变化事件

  1. 同步 API

    特点：以 Sync 结尾的 API 都是同步API。

    ​ 同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常

    举例：wx.setStorageSync(‘key’,‘value’) 向本地存储中写入内容

  2. 异步 API

    特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果。

    举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据

网络标签：

相关问题