微信小程序开发学习—Day1

最新推荐文章于 2024-07-25 18:18:28 发布

谢小然

最新推荐文章于 2024-07-25 18:18:28 发布

阅读量328

点赞数 1

分类专栏：微信小程序文章标签：微信小程序学习小程序

本文链接：https://blog.csdn.net/Ping_Love_/article/details/125972414

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

1、小程序简介
2、第一个小程序
- - 2.1、注册小程序开发账号
  - 2.2、了解微信开发者工具
3、小程序代码的基本构成
4、小程序的宿主环境
- - 4.1、宿主环境简介
5、协同工作和发布

1、小程序简介

1.1、什么是小程序

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

1.2、发展背景

随着APP市场的饱和，大部分用户已经养成了使用习惯，开发新的APP很难在市场生存。此外，APP开发和推广成本高也是不争的事实。易观2018年3月份的报告显示，移动电商APP的下载成本高达120-200 元，而且这些后期未必能形成转化。互联网金融、二手车电商APP的新客户成本，更是动辄高达数千元。

1.3、小程序与普通网页开发的区别

运行环境不同
- 网页运行在浏览器中
- 小程序（运行在微信环境中）
API不同

由于运行环境不用，所以小程序中，无法调用 DOM 和 BOM 的 API。

但是，小程序中可以调用微信环境提供的各种 API，例如：
- 地理定位
- 扫码
- 支付
开发模式不同

网页开发模式：浏览器 + 代码编辑器

小程序开发模式：
- 申请小程序开发账号
- 安装小程序开发工具
- 创建和配置小程序项目

1.4、主要优势

对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。对于用户来说，能够节约使用时间成本和手机内存空间；对于开发者来说也能节约开发和推广成本。

2、第一个小程序

2.1、注册小程序开发账号

点击注册按钮

微信小程序开发官网➡[微信公众平台 (qq.com)]

在这里插入图片描述

获取小程序的 APPID

2.2、了解微信开发者工具

(1)微信开发工具主要功能

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

(2)下载

网址➡微信开发者工具

在这里插入图片描述

(3)安装成功并运行登录后的结果

在这里插入图片描述

3、小程序代码的基本构成

3.1、项目结构

（1）了解项目的基本组成结构

pages用来存放所有小程序的页面
utils用来存放工具性质的模块(例如:格式化时间的自定义模块)
app.js 小程序项目的入口文件
app.json 小程序项目的全局配置文件
appwxss小程序项目的全局样式文件
projectconfigjson项目的配置文件
sitemapjson用来配置小程序及其页面是否允许被微信索引

（2）小程序页面的组成部分

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

3.2、JSON 配置文件

（1）JSON配置文件的作用

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

4种 json 文件，分别是：

app.json
project.json
sitemap.json
页面中的 .json（页面中的配置项会覆盖 app.json 的 window 中相同的配置项）

（2）新建小程序页面

只需要在 app.json -> pages 中新增页面的存放路径，小程序开发工具即可帮我们自动创建对应的页面文件。

如图所示：

在这里插入图片描述

（3）修改项目首页

只需要调整 app.json -> pages 数组中页面路径的前后顺序，即可修改项目的首页。

如图所示：

在这里插入图片描述

3.3、WXML模板

（1）什么是WXML

WXML（Weixin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似网页开发的 HTML。

（2）WXML 和 HTML 的区别

标签名称不同
- HTML（div,span,img,a）
- WXML（view,text,image,navigator）

属性节点不同

```
<a href="#">超链接</a>
```

<navigator url="/pages/home/home"></navigator>

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

3.4、WXSS 样式

（1）什么是 WXSS

WXSS （Weixin Style Sheets）是一套样式语言，用于描述 WXML 的组建样式，类似于网页开发的 CSS。

（2）WXSS 和 CSS 的区别

新增 rpx 尺寸单位
- CSS 中需要手动进行像素单位换算，例如 rem
- WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算
提供了全局的样式和局部样式
- 项目根目录的 app.wxss 会作用于所有小程序页面
- 局部页面的 .wxss 样式仅对当前页面生效
WXSS 仅支持部分 CSS 选择器
- .class 和 #id
- element
- 并集选择器、后代选择器
- ::after 和 ::before 等为类选择器

3.5、JS 逻辑交互

小程序中的 JS 文件分为三大类，分别是：

app.js
🔸是整个小程序项目的入口文件，通过调用 App() 函数来启动整个小程序
页面的 .js 文件
🔸是页面的入口文件，通过调用 Page() 函数来创建并运行页面
普通的 .js 文件
🔸是普通的功能模块文件，用来封装公共的函数或属性供页面使用

4、小程序的宿主环境

4.1、宿主环境简介

（1）什么是宿主环境

宿主环境（host enviroment）指的是程序运行必须的依赖环境。

在这里插入图片描述

（2）小程序的宿主环境

**手机微信**是小程序的宿主环境，如图所示：

在这里插入图片描述

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。

例如：微信支付，微信登录，地理定位等……

（3）小程序宿主环境包含的内容

通信模型

在这里插入图片描述

渲染层和逻辑层之间的通信
🔹由微信客户端进行转发
逻辑层和第三方服务器之间的通信
🔹由微信客户端进行转发

运行机制
- 小程序启动的过程
  - 下载小程序的代码包到本地
  - 解析 app.json 全局配置文件
  - 执行 app.js 小程序入口文件，调用 App() 创建小程序实例
  - 渲染小程序首页
  - 小程序启动完成
- 页面渲染的过程
  - 加载解析页面的 .json 配置文件
  - 加载页面的 .wxml 模板和 .wxss 样式
  - 执行页面的 .js 文件，调用 Page() 创建页面实例
  - 页面渲染完成

组件

小程序的组件有宿主环境提供，官方把小程序的组件分为9类，分别是：

① 视图容器

常用的视图容器类组件

view

普通视图区域
类似于 HTML 中的 div，是一个块级元素
常用于实现页面的布局效果

view组件的基本使用

代码实现：

<!--wxml代码-->
<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

/*wxss代码*/
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1){
  background-color: aliceblue;
}

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

.container1 view:nth-child(3){
  background-color: palegoldenrod;
}

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

效果如下：

在这里插入图片描述

scroll-view

可滚动的视图区域
常用于实现滚动列表效果

scroll-view 组件的基本使用

代码实现：

<!--wxml代码-->
<!-- scroll-y 属性，允许纵向移动 -->
<!-- scroll-x 属性，允许横向移动 -->
<!-- 注意：使用纵向移动时，必须给 scroll-view 一个固定高度 -->
<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

/*wxss代码*/
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1){
  background-color: aliceblue;
}

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

.container1 view:nth-child(3){
  background-color: palegoldenrod;
}

.container1{
  border: 1px solid red;
  width: 100px;
  /* 如果是纵向滚动，就必须加一个强制性的高度；如果是横向滚动，就必须加一个强制性的宽度。 */
  height: 120px;
}

效果如下：

点击观看视频效果

swiper 和 swiper-item

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

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

代码实现：

<!-- 轮播图的结构 -->
<!-- indicator-dots 属性：显示面板指示点 -->
<swiper class="swiper-container" indicator-dots>
  <!-- 第一个轮播图 -->
  <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>

/* 轮播图的样式 */
.swiper-container{
  height: 150px;
}

.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item{
  background-color: lightblue;
}

swiper-item:nth-child(2) .item{
  background-color: lightgray;
}

swiper-item:nth-child(3) .item{
  background-color: lightgoldenrodyellow;
}

效果如下：

点击观看视频效果

swiper 组建的常用属性

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

② 基础内容
常用的基础内容组件
常用的基础内容组件

text

文本组件
类似于 HTML 中的 span 标签，是一个行内元素

text 组件的基本使用

代码实现:

<!-- 常用的基础内容组件 text 和 rich-text 的用法 -->
<!-- text 组件只有添加 selectable 属性是才能支持长按选中 -->
<view>
  手机号支持选中长按效果
  <text selectable>13823321543</text>
</view>

效果如下：

在这里插入图片描述

rich-text
- 富文本组件
- 支持把 HTML 字符串渲染为 WXML 结构
- rich-text 组件的基本使用
  
  代码实现：
```
<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>
```
  效果如下：
③ 表单组件

④ 导航组件

⑤ 媒体组件

⑥ map 地图组件

⑦ canvas 画布组件

⑧ 开放能力

⑨ 无障碍访问
⑩ 其他常用组件

button

按钮组件
功能比 HTML 中的 button 按钮丰富
通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

button 组件的基本使用

代码实现：

<!-- 按钮组件的基本使用 -->
<!-- 通过 type 属性指定按钮的颜色类型 -->

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

<view>------------------------------------------------------</view>
<!-- size="mini" 小尺度按钮 -->
<button size="mini">默认按钮</button>
<button size="mini" type="primary">主色调按钮</button>
<button size="mini" type="warn">警告按钮</button>

<view>------------------------------------------------------</view>
<!-- plain 镂空按钮 -->
<button size="mini" plain>默认按钮</button>
<button size="mini" type="primary" plain>主色调按钮</button>
<button size="mini" type="warn" plain>警告按钮</button>

效果如下：

在这里插入图片描述

image

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

image 组件的基本使用

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

mode 值	说明
scaleToFill	（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地保持将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另外一个方向会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变。

代码实现：

<image></image>
<image src="/images/封面.jpg" mode="apectFit"></image>

--------------------------------------------------------
image{
  border: 1px solid red;
}

效果如下：

在这里插入图片描述

navigator
- 页面导航组件
- 类似于 HTML 中的 a 链接

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

分类：

Ⅰ 事件监听 API
- 特点：以 on 开头，用来*监听某些事件的触发*
- 举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
Ⅱ 同步 API
- 特点1：以 Sync 结尾的 API 都是同步 API
- 特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
- 举例：wx.setStorageSync(‘key’,’value’) 向本地存储中写入内容
Ⅲ 异步 API
- 特点：类似于 JQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接受调用的结果
- 举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据