微信小程序开发起步

已于 2022-12-22 13:08:49 修改
阅读量327 收藏
点赞数
分类专栏： JavaScript 前端 文章标签： 微信小程序 小程序 微信
于 2022-12-11 23:30:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55909367/article/details/128280530
版权

微信小程序开发起步

一、微信小程序简介

（一）小程序与开发与网页开发的区别

  1. 运行环境不同
    网页运行在浏览器中
    小程序运行在微信环境中
  2. API不同
    由于运行环境不同，所以小程序中无法调用DOM和BOM的API
    但是小程序中可以调用微信环境提供的各种API，例如：
    地理定位
    扫码
    支付
  3. 开发模式不同
    网页的开发模式：浏览器+代码编辑器
    小程序：
    申请小程序开发账号
    安装小程序开发者工具
    创建和配置小程序项目

（二）获取AppID

  1. 注册小程序开发账号

    （1）使用浏览器打开http://mp.weixin.qq.com/ 点击立即注册

    （2）选择账号类型为微信小程序

    （3）填写信息进行注册

  2. 获取小程序的AppID

    （1）登录开发者平台

    （2）选择开发设置

    （3）复制AppID

（三）安装微信开发者工具

推荐下载和安装最新的稳定版的微信开发者工具，下载页面的链接：下载

  1. 安装完成后微信扫码登录即可
  2. 设置-外观 调整主题颜色
  3. 设置-编辑器-调整字号以及行距
  4. 设置-代理设置-不使用代理直连网络

（四）主界面组成部分

  1. 菜单栏

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hThxccs8-1670772554137)(E:\Huaqingyuanjian\WeChat\img\image-20221002130438226.png)]

  2. 工具栏

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-boY3Feuz-1670772554139)(E:\Huaqingyuanjian\WeChat\img\image-20221002130502604.png)]

  3. 模拟器

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fLr5QEQe-1670772554139)(E:\Huaqingyuanjian\WeChat\img\image-20221002130345140.png)]

  4. 代码编辑区

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A4x3KE3Y-1670772554139)(E:\Huaqingyuanjian\WeChat\img\image-20221002130411800.png)]

  5. 测试区

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l1pCDOe5-1670772554140)(E:\Huaqingyuanjian\WeChat\img\image-20221002130526035.png)]

  6. 资源管理区

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ue6BTzlF-1670772554140)(E:\Huaqingyuanjian\WeChat\img\image-20221002130612826.png)]

（四）创建第一个微信小程序

  1. 扫描二维码登录开发者工具
  2. 选择小程序
  3. 项目命名
  4. 选择开发目录
  5. 将AppID复制到对应位置
  6. 后端服务选择不使用云服务
  7. 模板选择为Javascript
  8. 点击确定生成小程序项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2puIDHA6-1670772554140)(E:\Huaqingyuanjian\WeChat\img\image-20221002130715524.png)]

至此，小程序创建完成

二、微信小程序文件构成

（一）基本组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47Ee1knS-1670772554140)(E:\Huaqingyuanjian\WeChat\img\image-20221002130832709.png)]

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

（二）页面组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-smU6rdAa-1670772554141)(E:\Huaqingyuanjian\WeChat\img\image-20221002131027722.png)]

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

（三）JSON配置文件的作用

json是一种数据格式，在实际开发中，json总是以配置文件的形式出现
小程序中有4种json配置文件:

  • 项目根目录中的app.json配置文件
  • 项目根目录中的project.config.json配置文件
  • 项目根目录中的sitemap.json配置文件
  • 每个页面文件夹中的.json配置文件
1.app.json

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xs9y2MXD-1670772554141)(E:\Huaqingyuanjian\WeChat\img\image-20221002131316730.png)]

​ app.json是当前小程序的全部配置，包括小程序所有页面路径、窗口外观、界面表现、底部tab等

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ESJWX0ul-1670772554141)(E:\Huaqingyuanjian\WeChat\img\image-20221002131421342.png)]

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

  • setting中保存了编译相关的配置

  • projectname中保存的是项目名称

  • appid保存的是小程序的账号ID

3.sitemap.json

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S6TwkNaO-1670772554142)(E:\Huaqingyuanjian\WeChat\img\image-20221002131622303.png)]

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

4.页面.json

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9czXMLen-1670772554142)(E:\Huaqingyuanjian\WeChat\img\image-20221002131738294.png)]

对本页面的窗口外观进行设置，页面中的配置项会覆盖app.json的window中的相同配置项

（四）新建小程序页面

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8uAYILKA-1670772554142)(E:\Huaqingyuanjian\WeChat\img\image-20221002132832775.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eH3t60XO-1670772554142)(E:\Huaqingyuanjian\WeChat\img\image-20221002132902457.png)]

（五）修改首页

只需要调整app.json->pages数组中页面路径的前后顺序 ，即可修改项目的首页。
小程序会把排在第一位的页面，当做项目首页进行渲染

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cFnqGgLJ-1670772554143)(E:\Huaqingyuanjian\WeChat\img\image-20221002133150954.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DMpKhsDn-1670772554143)(E:\Huaqingyuanjian\WeChat\img\image-20221002133221342.png)]

（六）WXML

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

WXML与HTML的区别

  1. 标签名称不同
    • HTML(div span img a)
    • WXML(view text image navigator)
  2. 属性节点不同
    • HTML<a href="#"></a>
    • WXML<navigator url="/pages/home/home"></navigator>
  3. 提供了类似于Vue中的模板语法
    • 数据绑定
    • 列表渲染
    • 条件渲染

（七）WXSS

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

WXSS与CSS的区别

  1. 新增了rpx尺寸单位

    • css中需要手动进行像素单位换算，例如rem
    • wxss在底层支持新的尺寸单位rpx， 在不同大小的屏幕上小程序会自动进行换算

  2. 提供了全局样式和局部样式

    项目根目录中的app.wxss会作用于所有的小程序页面
    局部页面的.wxss样式仅对当前页面生效

  3. WXSS仅支持部分CSS选择器

    • class和id
    • element
    • 并集选择器 后代选择器
    • ::after和::before等伪类选择器

（八）js逻辑交互

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

  1. app.js

    是整个小程序项目的入口文件，通过调用App()函数来启动整个小程序

  2. 页面的.js

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

  3. 普通的.js文件

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

三、小程序的宿主环境

宿主环境指的是程序运行所必须依赖的环境，脱离了宿主环境的软件是没有任何意义的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XsXrPknI-1670772554143)(E:\Huaqingyuanjian\WeChat\img\image-20221002135459292.png)]

手机微信是小程序 的宿主环境
小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：微信扫码、微信支付、微信登录、地理定位、etc…

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

  1. 通信模型
  2. 运行机制
  3. 组件
  4. API

（二）通信模型

1.通信的主体

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

  • WXML模板和WXSS样式工作在渲染层

  • JS脚本工作在逻辑层

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-egpvg9Ou-1670772554143)(E:\Huaqingyuanjian\WeChat\img\image-20221002135916667.png)]

2.通信模型

通信模型分为两个部分，它们都是由微信客户端进行转发

  • 渲染层和逻辑层之间的通信

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BIfwPrh3-1670772554144)(E:\Huaqingyuanjian\WeChat\img\image-20221002140100535.png)]

（三）运行机制

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

（四）组件

1.分类

  • 视图容器

  • 基础内容

  • 表单组件

  • 导航组件

  • 媒体组件

  • map地图组件

  • canvas画布组件

  • 开放能力

  • 无障碍访问

2.视图容器组件

  • view

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

    实现flex布局

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-As1UfmvP-1670772554144)(E:\Huaqingyuanjian\WeChat\img\image-20221002142036446.png)]

    <view class="fa">
	<view class="son box1"></view>
	<view class="son box2"></view>
	<view class="son box3"></view>
</view>

    .fa{
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	height: 20%;
}
.son{
	width: 30%;
	height: 100px;
}
.box1{
	background-color: blue;
}
.box2{
	background-color: rgb(255, 81, 0);
}
.box3{
	background-color: rgb(0, 255, 98);
}

  • scroll-view

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

    实现纵向滚动

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zMsfQbW4-1670772554144)(E:\Huaqingyuanjian\WeChat\img\image-20221002142441938.png)]

    <scroll-view class="fa" scroll-y>
   	<!--scroll-y	允许纵向滚动--> 
    <!--scroll-x	允许横向滚动--> 
	<view class="son box1">1</view>
	<view class="son box2">2</view>
	<view class="son box3">3</view>
</scroll-view>

    .fa{
	width: 200px;
	height: 200px;
}
.son{
	width: 100%;
	height: 200px;
}
.box1{
	background-color: blue;
}
.box2{
	background-color: rgb(255, 81, 0);
}
.box3{
	background-color: rgb(0, 255, 98);
}

  • swiper和swiper-item

    轮播图区域，轮播图容器组件和轮播图item组件

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NdDr9ra5-1670772554144)(E:\Huaqingyuanjian\WeChat\img\image-20221002143313425.png)]

    <swiper class="fa box">
	<swiper-item>
		<view class="son box1"></view>
	</swiper-item>
	<swiper-item>
		<view class="son box2"></view>
	</swiper-item>
	<swiper-item>
		<view class="son box3"></view>
	</swiper-item>
	<swiper-item>
		<view class="son box4"></view>
	</swiper-item>
</swiper>

    .box{
	width: 100%;
	height: 200px;
}
.son{
	width: 100%;
	height: 200px;
}
.box1{
	background-color: blue;
}
.box2{
	background-color: rgb(255, 0, 0);
}
.box3{
	background-color: rgb(251, 255, 0);
}
.box4{
	background-color: rgb(255, 0, 191);
}

    • swiper的常用属性

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2aZtx5x4-1670772554145)(E:\Huaqingyuanjian\WeChat\img\image-20221002144956865.png)]

      <swiper class="fa box" indicator-dots indicator-color="white" indicator-active-color="red" autoplay circular></swiper>
      属性类型默认值必填说明
      indicator-dotsbooleanfalse否是否显示面板指示点
      indicator-colorcolorrgba(0, 0, 0, .3)否指示点颜色
      indicator-active-colorcolor#000000否当前选中的指示点颜色
      autoplaybooleanfalse否是否自动切换
      currentnumber0否当前所在滑块的 index
      intervalnumber5000否自动切换时间间隔
      circularbooleanfalse否是否采用衔接滑动
3.基础内容组件

  • text

    文本组件，类似于HTML中的span标签，是一个行内元素
    通过selectable属性 实现长按选中文本内容的效果

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gcxIMTDX-1670772554145)(E:\Huaqingyuanjian\WeChat\img\image-20221002145645319.png)]

    <text selectable>15655555555</text>

  • rich-text

    富文本组件，支持把HTML字符串渲染为WXML结构

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TnK4HbBg-1670772554145)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20221002150025913.png)]

    <rich-text nodes="<h1>hello world！</h1>"></rich-text>
4.其他常用组件

  • button

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

    • type

      设置按钮类型

    • size

      设置按钮大小

    • plain

      镂空按钮

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8EXjLlWk-1670772554145)(E:\Huaqingyuanjian\WeChat\img\image-20221002151043780.png)]

    <button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<button size="default">默认大小按钮</button>
<button size="mini">小按钮</button>
<button size="mini">小按钮</button>
<button size="mini">小按钮</button>
<button plain>镂空按钮</button>

  • image

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

    • mode

      在组件中，可以通过node属性用来指定图片的裁剪和缩放模式

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

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0YFqFgHA-1670772554146)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20221002152308063.png)]

      <image></image>
<!-- <image src="hero.jpg" mode="aspectFit"></image> -->
<!-- <image src="hero.jpg" mode="aspectFill"></image> -->
<!-- <image src="hero.jpg" mode="widthFix"></image> -->
<image src="hero.jpg" mode="heightFix"></image>

  • navigator

    导航组件，类似于HTML的a标签

（五）小程序API

1.分类
  • 事件监听API
  • 同步API
  • 异步API
2.事件监听API

我们约定，以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen，wx.onCompassChange 等。

这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。

wx.onCompassChange(function (res) {
  console.log(res.direction)
})
3.同步 API

我们约定，以 Sync 结尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等

try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}
4.异步 API

大多数 API 都是异步 API，如 wx.request，wx.login 等。异步 API 返回 Promise，这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定以下字段来接收接口调用结果：

  • Object 参数说明

    参数名类型必填说明
    successfunction否接口调用成功的回调函数
    failfunction否接口调用失败的回调函数
    completefunction否接口调用结束的回调函数（调用成功、失败都会执行）
    其他Any-接口定义的其他参数

  • 回调函数的参数

    success，fail，complete 函数调用时会传入一个 Object 类型参数，包含以下字段：

    属性类型说明
    errMsgstring错误信息，如果调用成功返回 ${apiName}:ok
    errCodenumber错误码，仅部分 API 支持，具体含义请参考对应 API 文档，成功时为 0。
    其他Any接口返回的其他数据

    异步 API 的执行结果需要通过 Object 类型的参数中传入的对应回调函数获取。部分异步 API 也会有返回值，可以用来实现更丰富的功能，如 wx.request，wx.connectSocket 等。

    wx.login({
  success(res) {
    console.log(res.code)
  }
})

// callback 形式调用
wx.chooseImage({
  success(res) {
    console.log('res:', res)
  }
})

// promise 形式调用
wx.chooseImage().then(res => console.log('res: ', res))

  • 注意事项

    • 部分接口如 downloadFile, request, uploadFile, connectSocket, createCamera（小游戏）本身就有返回值， 它们的 promisify 需要开发者自行封装。
    • 当没有回调参数时，异步接口返回 promise。此时若函数调用失败进入 fail 逻辑， 会报错提示 Uncaught (in promise)，开发者可通过 catch 来进行捕获。
    • wx.onUnhandledRejection 可以监听未处理的 Promise 拒绝事件。

  • 云开发API

    开通并使用微信云开发，即可使用云开发API，在小程序端直接调用服务端的云函数。

    wx.cloud.callFunction({
  // 云函数名称
  name: 'cloudFunc',
  // 传给云函数的参数
  data: {
    a: 1,
    b: 2,
  },
  success: function(res) {
    console.log(res.result) // 示例
  },
  fail: console.error
})

// 此外，云函数同样支持 promise 形式调用

微信小程序模板与配置

一、WXML模板语法

（一）数据绑定

1.数据绑定基本原则
  • 在data中定义数据
  • 在WXML中使用数据
2.在data中定义页面的数据

在页面对应的.js文件中，将数据定义到data中即可

Page({
    data:{
        //字符串类型的数据
        info:'init data',
        //数组类型的数据
        msgList:[{msg:'hello'},{msg:'world'}]
    }
})
3.Mustache语法格式

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-orpS0nwa-1670772554146)(E:\Huaqingyuanjian\WeChat\img\image-20221002214409017.png)]

4.Mustache语法的主要应用场景如下

  • 绑定内容

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZWM7uZXi-1670772554146)(E:\Huaqingyuanjian\WeChat\img\image-20221002214409017.png)]

  • 绑定属性

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HWYOPR1u-1670772554147)(E:\Huaqingyuanjian\WeChat\img\image-20221002215138218.png)]

  • 运算（三元运算、算数运算等）

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P7ucjYIG-1670772554147)(E:\Huaqingyuanjian\WeChat\img\image-20221002220014219.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qnhKppWm-1670772554147)(E:\Huaqingyuanjian\WeChat\img\image-20221002220729988.png)]

（二）事件绑定

1.什么是事件
  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息，如 id, dataset, touches。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3DUWkqL0-1670772554148)(E:\Huaqingyuanjian\WeChat\img\image-20221002224750639.png)]

2.小程序中常用事件
类型绑定方式描述
tapbindtap或bind:tap手指触摸后马上离开，类似click
inputbindinput或bind:input文本输入框事件
changebindchange或bind:change状态改变时的触发
3.事件对象的属性列表

当事件回调触发时，会收到一个event对象，它的详细属性如下：

属性类型说明
typeString事件类型
timeStampinteger页面打开到触发事件所经过的毫秒数
targetObject触发事件的组件的一些属性集合
currentTargetObject当前组件的一些属性值集合
detailObject额外的信息
touchesArray触摸事件，当前顶留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件，当前变化的触摸点信息数组
4.target和currentTarget的区别

target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。

5.bindtap的语法格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KBrjx9n4-1670772554148)(E:\Huaqingyuanjian\WeChat\img\image-20221002225452717.png)]

<button bindtap="show">点我一下</button>

Page({
    ...,
    show(e){
		console.log('你点我干啥啊');
	},
    ...
})
6.在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法，可以为页面data中的数据重新赋值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JP7jEOuX-1670772554148)(E:\Huaqingyuanjian\WeChat\img\image-20221002232016448.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VJpbx4Dm-1670772554149)(E:\Huaqingyuanjian\WeChat\img\image-20221002231911365.png)]

<button type="primary" bindtap="add">点击+1</button>
<view>当前值：{{count}}</view>

Page({
    data: {
        count:0
    },

    add(e){
        this.setData({
            count:this.data.count+1
        })
    }
})
7.事件传参

小程序的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传参。

错误示范：

<button type="primary" bindtap="log(123)">点击</button>

可以通过为组件提供data-*自定义属性传参，其中*代表的是参数的名字：

<button bindtap="btnHanddle" data-info="{{2}}">事件传参</button>
  • info会被解析为参数的名字
  • 数字2会被解析为参数的值

在事件处理函数中，通过event.target.dataset.参数名就可以获得具体的参数值，这里的event.target.dataset是一个参数对象

Page({
    ...,
    btnHanddle(e){
		console.log(e.target.dataset.info);//2
	},
    ...
})
8.bindinput的语法格式

通过e.detail.value来获取输入框的值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yB9sJ6p2-1670772554149)(E:\Huaqingyuanjian\WeChat\img\image-20221002234700981.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zT4eSc9E-1670772554149)(E:\Huaqingyuanjian\WeChat\img\image-20221002234714730.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VF37aUef-1670772554149)(E:\Huaqingyuanjian\WeChat\img\image-20221002234728480.png)]

<input type="text" bindinput="inputHandler" />

Page({
    ...,
    inputHandler(e){
		console.log(e.detail.value);
	},
    ...
})
9.实现文本框和data之间的数据同步

实现步骤

  • 定义数据

    Page({
    data{
    	msg:'你好'
    }
})

  • 渲染结构

    <input value="{{msg}}" bindinput="inputHandler" />

  • 美化样式

    input{
	border: 1px solid #000;
	padding: 5px;
	margin: 5px;
	border-radius:3px
}

  • 绑定input事件处理函数

    Page({
    data: {
        msg:'你好'
    },

    inputHandler(e){
        this.setData({
            msg:e.detail.value
        })
    },
})

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-edsiiMkj-1670772554150)(E:\Huaqingyuanjian\WeChat\img\image-20221003000219035.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bjwZvk7c-1670772554150)(E:\Huaqingyuanjian\WeChat\img\image-20221003000342061.png)]

（四）条件渲染

1.wx:if/wx:elif/wx:else

在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块，同样可以使用wx:elif="{{condition}}"和wx:else来进行条件判断，要注意的是wx:else不需要加条件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JV2x20js-1670772554150)(E:\Huaqingyuanjian\WeChat\img\image-20221003130321985.png)]

<view wx:if="{{gender===1}}">男</view>
<view wx:elif="{{gender===2}}">女</view>
<view wx:else>保密</view>

Page({
    ...,
    data: {
        gender:2
	},
    ...
})
2.结合<block>使用wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性，但<block>只起到了包裹作用，不会被渲染出来。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6amAvksX-1670772554150)(E:\Huaqingyuanjian\WeChat\img\image-20221003131136288.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kF9vL11d-1670772554151)(E:\Huaqingyuanjian\WeChat\img\image-20221003131309582.png)]

<block wx:if="{{type === 1}}">
	<view>123</view>
	<view>123</view>
	<view>123</view>
</block>

Page({
    ...,
    data: {
        type:2
	},
    ...
})
3.hidden

直接使用hidden="{{condition}}"也能控制元素的显示与隐藏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ffiZRQA-1670772554151)(E:\Huaqingyuanjian\WeChat\img\image-20221003131916891.png)]

<view hidden="{{type}}">条件为false的时候显示</view>

Page({
    ...,
    data{
    	type:false
	},
    ...
})
4.**wx:if和hidden的对比

  • 运行方式不同

    • wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏

    • hidden以切换样式的方式，控制元素的显示与隐藏

  • 使用建议

    • 频繁切换时，建议使用hidden
    • 控制条件复杂时，建议使用wx:if

（五）列表渲染

1.wx:for

通过wx:for可以根据指定的数组，循环渲染重复的组件结构，索引使用index表示，每一项使用item表示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0HKkJhk9-1670772554151)(E:\Huaqingyuanjian\WeChat\img\image-20221003133456763.png)]

<view wx:for="{{array}}">
	索引是{{index}},当前项是{{item}}
</view>

Page({
    ...,
    data{
    	array:['小米','华为','苹果','三星']
	},
    ...
})
2.手动指定索引和当前项的变量名
  • 使用wx:for-index可以指定当前循环项的索引的变量名
  • 使用wx:for-item可以指定当前项的变量名
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itx">
	索引是{{idx}},当前项是{{itx}}
</view>
3.wx:key的使用

在小程序实现列表渲染时，建议为渲染的列表指定唯一的key值，从而提高渲染效率

<view wx:for="{{array}}" wx:key="id">{{item,name}}</view>

Page({
    ...,
    data{
    	userList:[
    		{id:1,name:'小红'},
            {id:2,name:'小王'},
            {id:3,name:'小张'}
    	]
	},
    ...
})

二、WXSS模板样式

（一）什么是WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

（二）WXSS与CSS的关系

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

  • 尺寸单位，rpx
  • 样式导入，@import

（三）rpx

1.什么是rpx尺寸单位

rpx（responsive pixel）是微信小程序独有的，用来解决屏幕适配的尺寸单位，可以根据屏幕宽度进行自适应。

2.rpx的实现原理

由于不同设备的屏幕大小不同，为了实现屏幕的自动适配，rpx把所有的设备屏幕，在宽度上等分为750份（即当前屏幕的总宽度为750px）。

  • 在较小的设备上，1rpx所代表的宽度较小
  • 在较小的设备大，1rpx所代表的宽度较大
3.rpx和px的单位换算

在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

（四）样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

/*common.wxss*/
.small-p{
    padding:5px;
}

/*app.wxss*/
@import "/common/common.wxss";
.middle-p{
    padding:15px
}

（五）全局样式和局部样式

1.全局样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。

2.局部样式

在 page 的 .wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

注意

  • 当局部样式和全局样式冲突时，局部会覆盖全局
  • 当局部样式权重大于/等于全局样式的权重时，才会覆盖全局的样式

三、全局配置

（一）全局配置文件及常用配置项

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，文件内容为一个 JSON 对象，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

1.pages

记录当前小程序所有页面的存放路径

2.window

全局设置小程序窗口的外观

3.tabBar

设置小程序底部的tabBar效果

4.style

是否启用新版组件

（二）window

1.小程序窗口的组成部分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EdGF0aCA-1670772554151)(E:\Huaqingyuanjian\WeChat\img\image-20221003142427545.png)]

2.了解window节点常用的的配置项
属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000
navigationBarTextStylestringwhite导航栏标题颜色，仅支持 black / white
navigationBarTitleTextstringweixin导航栏标题文字内容
navigationStylestringdefault导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式，仅支持 dark / light
backgroundColorTopstring#ffffff顶部窗口的背景色，仅 iOS 支持
backgroundColorBottomstring#ffffff底部窗口的背景色，仅 iOS 支持
enablePullDownRefreshbooleanfalse是否开启全局的下拉刷新
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离，单位为 px。
3.设置导航栏的标题

步骤

  • app.json->window->navigationBatTitleText

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XOE6QOWY-1670772554152)(E:\Huaqingyuanjian\WeChat\img\image-20221003143315502.png)]

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "自定义文本",
    "navigationBarTextStyle":"black"
  },
4.设置导航栏的背景色

步骤

  • app.json->window->navigationBatBackgroundColor

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eJFQUiUE-1670772554152)(E:\Huaqingyuanjian\WeChat\img\image-20221003143620648.png)]

 "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "自定义文本",
    "navigationBarTextStyle":"black"
  },

注意：只能使用十六进制数来表示颜色

5.设置导航栏色标题颜色

步骤

  • app.json->window->navigationBarTextStyle

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VcVjM4hB-1670772554152)(E:\Huaqingyuanjian\WeChat\img\image-20221003151300617.png)]

 "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "自定义文本",
    "navigationBarTextStyle":"white"
  },

注意：只有black和white两个值可选

6.全局开启下拉刷新功能

步骤

  • app.json->window->enablePullDownRefresh

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ShpF8HcU-1670772554152)(E:\Huaqingyuanjian\WeChat\img\image-20221003151757172.png)]

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "自定义文本",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true
  },
7.设置下拉刷新时的窗口的背景色

步骤

  • app.json->window->backgroundColor

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fjtDWD3t-1670772554153)(E:\Huaqingyuanjian\WeChat\img\image-20221003152306017.png)]

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "自定义文本",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true,
    "backgroundColor": "#bababa"
},

注意：只能使用十六进制数来表示颜色

8.设置下拉刷新时loading的样式

步骤

  • app.json->window->backgroundTextStyle

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ivf3vT1n-1670772554153)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20221003152740528.png)]

"window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "自定义文本",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true,
    "backgroundColor": "#bababa"
},

注意：只有dark和light两个值可选

9.设置上拉触底的距离

上拉触底：通过手指在屏幕上的上拉滑动操作，从而加载更多的数据的行为

步骤

  • app.json->window->onReachBottomDistance

注意：默认为50px，没有特殊需求就不要修改

（三）tabBar

1.什么是tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

  • 底部tabBar
  • 顶部tabBar

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6XLSNciZ-1670772554153)(E:\Huaqingyuanjian\WeChat\img\image-20221003153647775.png)]

注意：

  • 只能配置最少2个、最多5个 tab页签
  • 渲染顶部tabBar时，不显示icon，只显示文本
2.tabBar的组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uCZphHNA-1670772554153)(E:\Huaqingyuanjian\WeChat\img\image-20221003153920948.png)]

  • backgroundColor：背景颜色
  • selectedIconPath：选中时的图片路径
  • borderStyle：上边框颜色
  • iconPath：未选中时的图片路径
  • selctedColor：文字选中时的颜色
  • color：未选中时的文字颜色
3.tabBar节点配置
属性类型必填默认值描述
colorHexColor是tab 上的文字默认颜色，仅支持十六进制颜色
selectedColorHexColor是tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColorHexColor是tab 的背景色，仅支持十六进制颜色
borderStylestring否blacktabbar 上边框的颜色， 仅支持 black / white
listArray是tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
positionstring否bottomtabBar 的位置，仅支持 bottom / top
customboolean否false自定义 tabBar，见详情
4.每一个tab项的配置
属性类型必填说明
pagePathstring是页面路径，必须在 pages 中先定义
textstring是tab 上按钮文字
iconPathstring否图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPathstring否选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OACJxyFm-1670772554154)(E:\Huaqingyuanjian\WeChat\img\image-20221003155002050.png)]

"tabBar": {
		"list": [{
			"pagePath": "pages/index/index",
			"text": "test"
		},
		{
			"pagePath": "pages/test/test",
			"text": "index"
		}]
	},
5.配置tabBar

步骤

  • 下载图片资源
  • 新建对应页面
  • 配置tabBar

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uIAtQq4c-1670772554154)(E:\Huaqingyuanjian\WeChat\img\image-20221003160644116.png)]

"tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
        "text": "index",
        "iconPath": "/image/002-book.png",
        "selectedIconPath": "/image/001-open-book.png"
    },{
        "pagePath": "pages/test/test",
        "text": "test",
        "iconPath": "/image/003-home.png",
        "selectedIconPath": "/image/004-home-1.png"
    },{
        "pagePath": "pages/logs/logs",
        "text": "log",
        "iconPath": "/image/005-user.png",
        "selectedIconPath": "/image/006-account.png"
    }],
    "backgroundColor":"#babbbb",
    "color": "#000000",
    "selectedColor": "#ffffff",
    "borderStyle": "white"
},

注意：有关tabBar的页面要放到Page页面的最前面

四、页面配置

（一）页面配置的作用

.json 文件来对本页面的窗口外观、页面效果等表现进行配置。

（二）页面配置和全局配置的关系

小程序中，app.json中window的节点，可以配置全局小程序中的每个页面的窗口表现。

如果某些页面想要拥有特殊的窗口表现，此时，页面级别的.json配置文件就可以实现这种需求

注意：当某些页面配置与全局配置冲突时，以页面配置为准

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JgtjyCkn-1670772554154)(E:\Huaqingyuanjian\WeChat\img\image-20221003163132100.png)]

{
	"usingComponents": {},
	"navigationBarBackgroundColor": "#ff00ff",
	"backgroundColor": "#00ff00"
}
属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000
navigationBarTextStylestringwhite导航栏标题颜色，仅支持 black / white
navigationBarTitleTextstring导航栏标题文字内容
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式，仅支持 dark / light
enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新。
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离，单位为px。

五、网络数据请求

（一）小程序中网络数据请求的限制

处于安全性方面的考虑，小程序官方对数据接口做出了如下两个限制

  1. 只能请求HTTPS类型的接口
  2. 必须将接口的域名添加到信任列表中，使用前要先添加进来

（二）配置request合法域名

需求：在自己的小程序中，希望请求https://www.escook.cn/域名下的接口

步骤

  • 小程序后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改request合法域名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ttNTN7iS-1670772554154)(E:\Huaqingyuanjian\WeChat\img\image-20221003181619696.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OXluRvRy-1670772554155)(E:\Huaqingyuanjian\WeChat\img\image-20221003181701379.png)]

注意

  1. 域名只支持HTTPS协议
  2. 域名不能使用IP或者localhost
  3. 域名必须经过ICP备案
  4. 服务器域名一个月内最多可以申请修改5次

（三）发起GET请求

调用微信小程序提供的wx.request()方法，可以发起GET请求

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c0EYpb32-1670772554155)(E:\Huaqingyuanjian\WeChat\img\image-20221003191510907.png)]

Page({
	...,
	getInfo(e){
		wx.request({
			url: 'https://www.escook.cn/api/get',
			method: 'GET',
			data:{
				name:'zs',
				age:20
			},
			success:(res)=>{
				console.log(res.data);
			}
		})
	},
	...
})

（四）发起POST请求

调用微信小程序提供的wx.request()方法，可以发起POST请求

Page({
	...,
	getInfo(e){
		wx.request({
			url: 'https://www.escook.cn/api/get',
			method: 'POST',
			data:{
				name:'zs',
				age:20
			},
			success:(res)=>{
				console.log(res.data);
			}
		})
	},
	...
})

（五）页面刚刚加载时请求数据

需要在页面的onLoad事件中调用获取数据的函数

onLoad(options) {
    this.getInfo()
  },

(六)跳过request合法域名校验

如果后端只提供了http的接口，暂时没有提供https协议的接口，可以选择不校验合法域名选项，跳过合法域名校验。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FUwHDShp-1670772554155)(E:\Huaqingyuanjian\WeChat\img\image-20221003191712782.png)]

注意：只在项目开发和调试阶段 才能使用

（七）关于跨域和Ajax的说明

小程序中不存在跨域问题，Ajax技术的核心是依赖于浏览器 中的XMlHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做发起ajax请求，而是叫做发起网络数据请求。

六、本地生活案例

（一）实现效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CUi71feS-1670772554155)(E:\Huaqingyuanjian\WeChat\img\image-20221003192226248.png)]

（二）实现步骤

1.新建项目并梳理结构
"pages":[
    "pages/index/index",
    "pages/test/test",
    "pages/logs/logs"
],
2.配置导航栏效果
"window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#2d476c",
    "navigationBarTitleText": "本地生活",
    "navigationBarTextStyle":"white"
},
3.配置tabBar效果
"tabBar": {
	"list": [{
			"pagePath": "pages/index/index",
			"text": "首页",
			"iconPath": "/image/002-book.png",
			"selectedIconPath": "/image/001-open-book.png"
		},
		{
			"pagePath": "pages/test/test",
			"text": "消息",
			"iconPath": "/image/003-home.png",
			"selectedIconPath": "/image/004-home-1.png"
		},
		{
			"pagePath": "pages/logs/logs",
			"text": "联系我们",
			"iconPath": "/image/005-user.png",
			"selectedIconPath": "/image/006-account.png"
		}]
},
4.实现轮播图效果
<swiper autoplay indicator-dots indicator-color="white" indicator-active-color="#666666" circular>
    <swiper-item><image class="swiper-img"mode="aspectFill" src="/image/1.jpg"></image></swiper-item>
    <swiper-item><image class="swiper-img"mode="aspectFill" src="/image/2.jpg"></image></swiper-item>
    <swiper-item><image class="swiper-img"mode="aspectFill" src="/image/3.jpg"></image></swiper-item>
    <swiper-item><image class="swiper-img"mode="aspectFill" src="/image/4.jpg"></image></swiper-item>
    <swiper-item><image class="swiper-img"mode="aspectFill" src="/image/5.jpg"></image></swiper-item>
</swiper>
5.实现九宫格效果
<view class="nineG">
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
</view>
6.实现推荐
<view class="mid">
    <view class="mid-box1">
        <text>商家推荐</text>
    </view>
    <view class="mid-box2">
        <text>商家推荐</text>
    </view>
</view>
6.实现图片布局
/**index.wxss**/
swiper{
    width: 750rpx;
    height: 300rpx;
}

.swiper-img{
    width: 750rpx;
    height: 300rpx;
}
.nineG{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 750rpx;
    height: 550rpx;
}

.nineG .nieG-img{
    width: 60rpx;
    height: 60rpx;
    margin: 10rpx 85rpx;
}

.nineG .gg{
    width: 250rpx;
    height: 184rpx;
    padding: 20rpx 0;
    border: 1px solid #aaaaaa;
    text-align: center;
}

.mid{
    display: flex;
    justify-content: space-around;
    width: 750rpx;
    height: 200rpx;
    margin: 30rpx 0;
}
.mid-box1,
.mid-box2{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 350rpx;
    height: 200rpx;
    border-radius: 10px;
}

.mid-box1{
    background-color: #f16191;
}

.mid-box2{
    background-color: #93bde1;
}

视图与逻辑

一、页面导航

（一）什么是页面导航

页面导航指的是页面之间的相互跳转，在浏览器中实现方法，<a></a>和window.location.href

（二）小程序中实现页面导航的两种方式

1.声明式导航
  • 在页面上声明一个<navigator>导航组件
  • 通过点击<navigator>组件实现页面的跳转
2.编程式导航
  • 调用小程序的API，实现页面的跳转

（三）声明式导航

1.导航到tabBar页面

tabBar页面是被配置的tabBar页面

在使用<navigator>组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性，其中：

  • url表示要跳转的页面的地址，必须以/开头
  • open-type表示跳转的方式，必须为switchTab
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
2.导航到非tabBar页面

tabBar页面是未被配置成tabBar页面

在使用<navigator>组件跳转到指定的非tabBar页面时，需要指定url属性和open-type属性，其中：

  • url表示要跳转的页面的地址，必须以/开头
  • open-type表示跳转的方式，必须为navigate
<navigator url="/pages/test/test" open-type="navigate">跳转到test页面</navigator>
<!--open-type可以不写-->
<navigator url="/pages/test/test" >跳转到test页面</navigator>
3.后退导航

如果要后退到上一个页面或者多级页面，则需要指定open-type属性和delta属性，其中：

  • open-type表示跳转的方式，必须为navigateBack，表示要进行后退导航
  • delta的值必须为数字，表示要后退的层级
<navigator open-type="navigateBack" delta="1">后退</navigator>
<navigator open-type="navigateBack">后退</navigator>

注意：如果是后退一级，delta="1"可以省略

（四）编程式导航

1.导航到tabBar页面

调用wx.switchTab(Object,Object)方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下：

属性类型必填说明
urlstring是需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）
<button bindtap="gotoMessage">跳转到message页面</button>

Page({
    ...,
    gotoMessage() {
        wx.switchTab({
            url: '/pages/message/message',
        })
	},
    ...
})
2.导航到非tabBar页面

调用wx.navigateTo(Object,Object)方法，可以跳转到非tabBar页面。其中Object参数对象的属性列表如下：

属性类型必填说明
urlstring是需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
eventsObject否页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）
<button bindtap="gotoMessage">跳转到message页面</button>

Page({
    ...,
    gotoMessage() {
        wx.navigateTo({
            url: '/pages/message/message',
        })
	},
    ...
})
3.后退导航

调用wx.navigateBack(Object object)方法，可以返回上一页或多级页面，其中Object参数对象的属性列表如下：

属性类型默认值必填说明
deltanumber1否返回的页面数，如果 delta 大于现有页面数，则返回到首页。
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）
<button bindtap="gotoMessage">返回一级</button>

Page({
    ...,
    gotoMessage() {
        wx.navigateBack()
	},
    ...
})

（五）导航传参

1.声明式导航传参

navigator组件的url属性用来指定将要跳转的页面路径，同时，路径后面还可以携带参数

  • 参数与路径之间用?分割
  • 参数键与值之间用=相连
  • 不同参数之间用&分割
<navigator url="/pages/test/test?name=zs&age=20" open-type="navigate">跳转到test页面</navigator>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-crG1aaYv-1670772554156)(E:\Huaqingyuanjian\WeChat\img\image-20221004140316208.png)]

2.编程式导航传参

调用wx.navigateTo(Object,Object)方法跳转页面时，也可以携带参数

<navigator bindtap="gotoInfo">跳转到info页面</navigator>

Page({
    ...,
    gotoInfo() {
        wx.navigateTo({
          url: '/pages/info/info?name=ls&age=55',
        })
  	},
    ...
})
3.在onLoad中接收导航参数

通过声明式导航传参和编程式导航传参所携带的参数，可以直接在onLoad事件中使用options直接获取到

Page({
    data:{
        query:null
    }
    ...,
    onLoad(options) {
    	console.log(options)
        this.setData({
          query: options
        })
  	},
    ...
})

二、页面事件

（一）下拉刷新事件

1.什么是下拉刷新

下拉刷新时移动端的专有名词，指的是通过手指在屏幕上的下拉动作从而重新加载页面数据的行为。

2.启用下拉刷新

启用下拉刷新的效果

  • 全局开启下拉刷新

    在app.json的window节点中，将enablePullDownRefresh设置为true

  • 局部开启下拉刷新

    在页面的.json配置文件中，将enablePullDownRefresh设置为true

3.配置下拉刷新窗口的样式

在全局或页面的.json配置文件中，通过backgroundColor和backgroundTextStyle来配置下拉刷新的窗口样式，其中：

  • backgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值
  • backgroundTextStyle用来配置下拉刷新loading的样式，仅支持dark和light
4监听下拉刷新事件

使用onPullDownRefresh来监听下拉刷新事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ujrNN47B-1670772554156)(E:\Huaqingyuanjian\WeChat\img\image-20221004145134618.png)]

Page({
    ...,
    onPullDownRefresh:function(){
    	console.log("触发了下拉刷新事件")
	},
     ...
})

下拉刷新，值重置为0

<button bindtap="add" type="primary" >count++</button>
<view>{{count}}</view>

{
	"usingComponents": {},
	"enablePullDownRefresh": true,
	"backgroundTextStyle": "dark",
	"backgroundColor":"#fefefe"
}

Page({
    data:{
        count:0
    },
    add(){
        this.setData({
            count : this.data.count+1
        })
	},
    onPullDownRefresh(){
		this.setData({
            count:0
        })
    }
})
5.停止下拉刷新的效果

当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动关闭loading效果，调用wx:stopPullDownRefresh()就可以停止下拉刷新效果啦

Page({
    ...,
     onPullDownRefresh(){
		this.setData({
            count:0
        })
    	wx:stopPullDownRefresh()
    },
    ...
})

（二）上拉触底事件

1.什么是上拉触底

上拉触底时移动端的专有名词，指的是通过手指在屏幕上的上拉动作从而加载更多的页面数据的行为。

2.监听页面的上拉触底事件

通过onReachBottom()函数即可监听到当前页面的上拉触底事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SVXKfC28-1670772554156)(E:\Huaqingyuanjian\WeChat\img\image-20221004155351698.png)]

Page({
    onReachBottom(){
        console.log('触发了上拉触底事件')
    }
})
3.配置上拉触底的距离

上拉触底距离是指触发上拉触底事件时，滚动条距离页面底部的距离

可以在全局或页面的.json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离，小程序默认的距离是50px，实际开发中可以根据自己的需求改变这个默认值。

4.上拉触底案例

实现步骤

  • 定义获取随机颜色的方法

  • 在页面中加载获取初始数据

  • 渲染UI结构并美化页面效果

    <view wx:for="{{colorList}}" class="view-item" wx:key="index" style="background-color: rgb({{item}});">{{item}}</view>

    .view-item{
	height: 300rpx;
	border: 1px solid #000;
}

  • 在上拉触底事件调用获取随机颜色的方法

  • 添加loading提示效果

  • 对上拉触底进行节流处理

完整代码

Page({
  data: {
		colorList:[],
		isLoading:false
	},
	getColor(){
		this.setData({
			isLoading:true
		})
		wx:wx.showLoading({title: '数据加载中'})
		wx.request({
			url: 'https://www.escook.cn/api/color',
			method: 'get',
			success: (result) => {
				let res = result.data.data;
				this.setData({
					colorList:[...this.data.colorList,...res]
				})
				console.log(res);
			},
			fail: (res) => {},
			complete: (res) => {
				this.setData({
					isLoading:false
				})
				wx:wx.hideLoading()
			},
		})
	},
  onLoad(options) {
		this.getColor();
	},
	onReachBottom(){
		if(this.data.isLoading){
			return
		}else{
			this.getColor()
		}
	}
})

案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ERcbMzgF-1670772554156)(E:\Huaqingyuanjian\WeChat\img\image-20221004173540443.png)]

（三）扩展

自定义编译模式

通过自定义编译模式，经过编译后就能直接跳转到我们想看到的页面，而不是初始页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h9kdttEn-1670772554157)(E:\Huaqingyuanjian\WeChat\img\image-20221004183758343.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wi5LJ07l-1670772554157)(E:\Huaqingyuanjian\WeChat\img\image-20221004183937223.png)]

三、生命周期

（一）什么是生命周期

生命周期是指一个对象创建、运行、销毁的整个过程，强调的是一个时间段

  • 小程序的启动，表示生命周期的开始
  • 小程序的关闭，表示生命周期的结束

（二）生命周期的分类

1.应用生命周期
  • 小程序的启动、运行、销毁
2.页面生命周期
  • 整个页面的加载、渲染、销毁

应用的生命周期比较大，它包含了各个页面的生命周期

（三）什么是生命周期函数

生命周期函数：是小程序框架体提供的内置函数，会伴随生命周期，自动按次序执行

作用：允许程序员在特定的时间点，执行某些特定的操作，例如在页面刚加载的时候，可以在onLoad生命周期函数中初始化页面数据

注意：生命周期强调的是一个时间段，而生命周期函数强调的是一个时间点

（四）生命周期函数的分类

1.应用的生命周期函数
  • 小程序从启动、允许、销毁期间依次调用的那些函数
2.页面的生命周期函数
  • 每个页面从加载、渲染、销毁期间依次调用的那些函数

（五）应用的生命周期函数

小程序的应用生命周期函数需要在app.js中进行声明

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   * 本地存储
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

（六）页面声明周期函数

小程序的应用生命周期函数需要在页面的.js中进行声明

Page({

  /**
   * 监听页面数据加载，一个页面只调用一次
   */
  onLoad: function (options) {
    
  },

  /**
   * 监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 监听页面初次渲染完成，一个页面只调用一次
   */
  onReady: function () {
    
  },
    
  /**
   * 监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 监听页面卸载，一个页面只调用一次
   */
  onUnload: function () {
    
  }
})

四、WXS脚本

（一）什么是WXS脚本

WXS是小程序独有的一套脚本语言，结合WXML，可以构建出页面的结构。

（二）WXS的应用场景

WXML无法调用在页面的.js中定义的函数，但是，WXML中可以调用WXS中定义的函数。因此，小程序中WXS的典型应用就是过滤器。

（三）WXS和JS的关系

WXS和JS是两种完全不同的语言

1.WXS有自己的数据类型
  • number
  • string
  • boolean
  • object
  • function
  • array
  • date
  • regxp
2. WXS不支持ES6以上的语法形式
  • 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc…
  • 支持：var、普通的function
3.WXS遵循CommonJ规范
  • module对象
  • require()函数
  • module.exports对象

（四）基本用法

1.内嵌WXS脚本

WXS代码可以编写在WXML文件的<WXS>标签内，就像JS代码可以写在<script>标签内一样

WXML文件中的每一个<wxs></wxs>标签，必须提供一个module属性，用来指定当前的WXS的模块名，方便再WXML中访问模块中的成员

<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
	//将文本转为大写形式
    module.exports.toUpper = function(str){
    	return str.toUpperCase()
    }
</wxs>
2.定义外联的WXS脚本

WXS代码还可以编写在以.WXS为后缀的文件内，就像JS代码可以写在.js为后缀的文件中

function toLower(str){
	return String.toLowerCase();
}
module.exports = {toLower:toLower};
3.使用外联的WXS脚本

在WXML中引入外联的WXS脚本，必须为<wxs>标签添加module和src属性，其中：

  • module指定模块的名称
  • src指定要引入的脚本路径，且必须是相对路径
<view>{{m2.toUpper(username)}}</view>
<wxs module="m2" src="../../utils/tools.wxs"></wxs>

（五）WXS的特点

1.不能作为组件的回调

WXS的典型应用场景就是过滤器，经常配合Mustache语法进行使用，但是在WXS中定义的函数不能作为组件事件的回调函数

2.隔离性

WXS和JS的运行环境是相互隔离的

  • WXS中不能调用JS中定义的函数
  • WXS中不能调用小程序提供的API
3.性能好
  • 在IOS设备上，小程序内的WXS会比JS代码块2-20倍
  • 在Android设备上，二者的运行效率无差异
我不要折耳根
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序治疗师源码模版企业小程序前端.rar
03-10
微信小程序已经火爆到人人开发，人人都是码农，网上也有很多学习资源，但是源码资源还是很少的。其实在学习开发微信小程序的时候如果有源码可以供我们借鉴，学习效率也会成倍的增加。无论是前端开发，还是后端开发，...
01-微信小程序开发-起步
...
03-01 209
② utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）⑦ sitemap.json 用来配置小程序及其页面是否允许被微信索引。打开小程序开发者工具，用微信扫码登录开发者工具，扫码成功后创建项目。⑥ project.config.json 项目的配置文件。④ app.json 小程序项目的全局配置文件。⑤ app.wxss 小程序项目的全局样式文件。① pages 用来存放所有小程序的页面。③ app.js 小程序项目的入口文件。小程序页面的组成部分。
微信小程序开发 - 起步
weixin_43299180的博客
03-17 3264
文章目录1、小程序和普通网页之间的区别2、注册小程序开发账号3、下载小程序开发者工具-微信开发者工具4、创建/导入小程序5、小程序目录结构6、小程序页面组成部分7、json 配置文件的作用8、认识小程序页面9、小程序的宿主环境10、项目成员管理11、小程序发布上线12、获取小程序码 1、小程序和普通网页之间的区别 运行环境：网页运行在浏览器环境，小程序运行在微信环境中； API：小程序无法调用 DOM、BOM 的API，但是可以调用微信环境中提供的各种 API：地理位置、扫码、支付等； 开发模式：网页一般
微信小程序-起步
weixin_45732235的博客
06-25 2331
微信小程序学习第一天笔记
微信小程序开发（1）
shaozheng0503的博客
06-16 1181
小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。除了前端开发，JavaScript还可以用于后端开发，例如使用Node.js技术进行服务器端编程。同时，JavaScript也是一门学习曲线较为平缓的语言，让初学者能够快速入门，并逐渐深入掌握。
微信小程序知乎日报源码模版企业小程序前端.rar
03-10
微信小程序已经火爆到人人开发，人人都是码农，网上也有很多学习资源，但是源码资源还是很少的。其实在学习开发微信小程序的时候如果有源码可以供我们借鉴，学习效率也会成倍的增加。无论是前端开发，还是后端开发，...
微信小程序知乎日报1源码模版企业小程序前端.rar
03-10
微信小程序已经火爆到人人开发，人人都是码农，网上也有很多学习资源，但是源码资源还是很少的。其实在学习开发微信小程序的时候如果有源码可以供我们借鉴，学习效率也会成倍的增加。无论是前端开发，还是后端开发，...
wx-router:微信小程序的路由类
05-02
wx-router更好用的小程序路由概述wx-router是一个微信小程序路由类，封装了小程序路由 api，并且解决了部分小程序路由 api 中不好用的一些地方，提升开发效率和语义化，以及更优雅的编程体验。特性支持 Promise 化...
微信小程序实战：起步，实战，进阶与总结
03-29
微信小程序经过几个月的内侧，在今年的 1 月 9 日正式上线，在微信通讯录页面就可以搜索你想找的小程序，然后在发现页最底部就会有你曾经浏览过的小程序的入口。 一番体验后比橙子想象的效果好的多，所以自己起手也...
微信小程序介绍
2202_75871191的博客
05-16 343
本文介绍了微信小程序开发的基础知识，包括小程序概述、开发环境搭建、编程基础、组件与API、云开发等。微信小程序云开发是一种基于云平台的服务，可以为小程序提供数据库、存储、计算等服务。在云环境中，可以创建数据库、存储文件、调用云函数等。小程序提供了丰富的API，如网络请求、位置、摄像头、支付等，可用于实现各种业务功能。小程序提供了丰富的组件，如按钮、文本、图片、视频等，可用于快速搭建页面结构。在微信开发者工具中，点击“新建项目”按钮，输入项目名称、选择项目存放路径，即可创建一个新的小程序项目。
实现腾讯地图的接口调用以及微信小程序的地图标注
weixin_48053866的博客
05-15 559
通过以上步骤，可以实现微信小程序端的腾讯地图标注和Java后端的业务逻辑。微信小程序端负责展示地图和标注，Java后端负责提供标注所需的经纬度信息。在实际开发中，需要根据具体需求调整地图的展示和标注逻辑，并确保后端接口的安全和稳定。
微信小程序：获取经纬度
qq_41985405的博客
05-18 207
会报错：getLocation:fail require permission desc。
【全开源】优校管理系统（支持微信小程序+H5+app）
2401_84413757的博客
05-18 543
该系统涵盖了学籍管理、课程管理、考试管理、成绩管理等多个核心功能，为学校提供了一站式的解决方案。通过引入先进的信息化手段，优校管理系统源码实现了教育资源的优化配置，提高了教育管理的效率和质量。在这个背景下，我们推出了“优校管理系统源码”，旨在为学校打造一套高效、便捷、智能的管理系统，引领智慧校园新风尚。优校管理系统源码的推出，为学校管理带来了全新的变革。我们相信，在不久的将来，优校管理系统源码将成为智慧校园建设的重要组成部分，为教育事业的发展贡献更多力量。
【全开源】班级管家微信小程序（FastAdmin+ThinkPHP）
2401_84413757的博客
05-21 392
同时，小程序还支持在线签名功能，确保通知的权威性。班级管家微信小程序，作为一款专注于家校沟通、作业管理、成绩发布等方面的工具，凭借其丰富的特色功能和显著的优势，已经成为广大教师、家长和学生日常学习生活中不可或缺的一部分。教师可以通过设置不同维度的评估，进行量化、记录、统计，进而分析学生的学习情况和身心情况。同时，小程序还提供了丰富的模板和素材库，方便教师快速创建个性化的班级主页。综上所述，班级管家微信小程序凭借其丰富的特色功能和显著的优势，已经成为家校沟通、作业管理、成绩发布等方面的得力助手。
微信小程序使用过程注意事项
weixin_45871977的博客
05-14 839
微信小程序使用注意事项
8.微信小程序之自定义组件
最新发布
weixin_41993336的博客
05-21 815
在组件的 .js 中，需要调用Component方法创建自定义组件，Componentdata数据：组件的内部数据methods方法：在组件中事件处理程序需要写到methods中才可以/*** 组件的初始数据：用来定义当前组件内部所需要使用的数据*/data: {},/*** 组件的方法列表：在组件中，所有的事件处理程序都需要写到 methods 方法中*/methods: {// 更新复选框的状态isChecked:!})})
医院预约挂号系统微信小程序APP
清兮科技官方博客
05-10 322
预约挂号（包含各个科室的预约，可以预约每个各个医生），就诊引导包含预约挂号的具体信息，包含就诊时间、就诊科室、就诊医生以及就诊人信息、和支付状态等，可以查询医院医生信息包含基本信息，科室和职称等，可以进行线下取号和历史就诊记录查询等功能。同时，就诊引导功能可以让大家更好地了解就诊流程，避免了因为不熟悉就诊流程而造成的不必要的麻烦。除此之外，这个小程序还有一个后端管理系统，可以进行用户管理、排班管理、医生管理、科室管理、职位管理、医院信息等操作，方便医院的管理和服务。
【全开源】商会招商项目系统支持微信小程序+微信公众号+H5
u011092458的博客
05-17 304
一款基于FastAdmin+ThinkPHP+Uniapp开发的商会招商项目系统，是一个集PC和移动端功能于一体的解决方案，线上线下进行服务，围绕 活动报名、在线课程、项目大厅、线下签到、会员系统等。为商会提供了更加便捷高效的管理方式，提升了商会活动和项目的组织、推广和运营能力。提高招商效率：商会招商项目系统通过集中管理招商信息、简化招商流程、减少人工操作和重复工作，使招商人员能够更快速、高效地发布招商信息、筛选商家，从而显著提高招商效率。
微信小程序开发计算器
04-11
微信小程序开发计算器是一种基于微信平台的应用程序，可以在微信中直接使用。计算器可以实现基本的数学运算，如加减乘除，并提供一些其他功能，如取余、开方等。 在开发微信小程序计算器时，可以使用微信小程序开发...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值