- 博客(570)
- 收藏
- 关注
RSS订阅原创 小程序API —— 58 自定义组件 - 创建 - 注册 - 使用组件
小程序目前已经支持组件化开发，可以将页面中的功能模块抽取成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护；公共组件：将页面内的功能模块抽取成自定义组件，以便在不同的页面中重复使用；页面组件：将复杂的页面拆分成多个低耦合的模块，有助于代码维护；如果是公共组件，建议放在项目根目录的 components 文件夹中；如果是页面组件，建议放在对应页面的目录下；建议一个组件一个文件夹；在项目的根目录下新建 components 文件夹。
2025-04-04 18:21:48
671
原创 小程序API —— 57 拓展 - 增强 scroll-view
scroll-view 组件功能非常强大，这里使用 scroll-view 实现上拉加载和下拉刷新功能；
2025-04-04 17:18:09
1028
原创 小程序API —— 56页面处理函数 - 下拉刷新
下拉刷新时小程序中常见的一种刷新方式，当用户下拉页面的时候，页面会自动刷新，以便用户获取最新的内容；
2025-03-29 16:09:02
551
原创 小程序API —— 55页面处理函数 -上拉加载
上拉加载是小程序中常见的一种加载方式，当用户滑动页面到底部时，会自动加载更多的内容，以便用户继续浏览；接着使用微信开发者工具实现一个需求：当页面上拉加载时，页面当前显示的数字不断变大；
2025-03-29 15:31:47
1306
原创 小程序API —— 54 路由与通信 - 编程式导航
在使用编程式导航进行页面切换时，可以在路径后面加上参数，参数和路径之间使用?分隔，参数键与参数值用 = 相连，不同参数使用 & 分隔，例如：path?key=value&key2=value2，参数需要在跳转到页面的 onLoad 钩子函数中通过形参进行接收；这时候点击跳转按钮，可以发现无法跳转，因为 wx.navigateTo 无法跳转到 tabBar 页面；
2025-03-20 23:03:25
1171
原创 小程序API —— 53 本地存储
注意，在微信小程序中，对象类型的数据，可以直接进行存储获取，无需使用 JSON.stringify()、JSON.parse() 转换；小程序本地存储是指在小程序中使用 API 将数据存储在用户的设备上，以便小程序在运行时和下次启动时快速地读取这些数据；
2025-03-18 20:57:24
839
原创 小程序API —— 52 小程序界面交互 - 模态对话框 - 消息对话框
接下来我们使用这两个 API 来实现一个具体的效果：点击删除按钮，弹出模态对话框；当用户点击【取消】时，给用户提示【取消删除】；当用户点击【确定】时，提示【删除成功】；注意这两个对话框有很多属性，我们可以打开。
2025-03-18 19:56:47
362
原创 小程序API —— 51小程序界面交互 - loading 提示框
当用户点击按钮时，小程序会发送请求获取数据，在发送请求过程中需要显示 loading 提示框，同时给用户文字提示；当数据请求完成之后，关闭 loading 提示框；注意 loading 提示框显示之后不会自动关闭，必须主动调用 hideLoading 方法才能关闭 loading 提示框；小程序提供了一些用于界面交互的 API，例如 loading 提示框、消息提示框、模态对话框等 API；
2025-03-17 20:53:32
570
原创 小程序API —— 50 发起网络请求
我们需要在 request 合法域名中进行域名配置，注意 request 合法域名中只能配置域名，不能是 IP 地址，而且域名必须经过备案，如果该域名没有经过备案也不能进行配置，同时要求这个域名必须以 https 开头；接下来思考一个问题，假如目前新开始的项目域名备案还没有审核通过，服务器的接口还没有部署到对应的域名中，怎么通过其它域名或者 IP 进行测试？wx.request 请求的域名必须在微信公众号平台进行配置，如果使用 wx.request 请求未配置的域名，在控制台会有响应的报错；
2025-03-17 20:40:41
676
原创 小程序API —— 49小程序 API 介绍
小程序开发框架提供了丰富的微信原生 API，可以方便地调起微信提供的能力，例如：获取用户登录、微信登录、微信支付等，小程序提供的 API 几乎都挂载在 wx 对象下，例如 wx.request()、wx.setStorage() 等，wx 对象实际上就是小程序的宿主环境微信所提供的全局对象；
2025-03-16 13:47:51
230
原创 小程序生命周期 —— 47 小程序生命周期 - 页面生命周期
页面生命周期函数中有两个函数需要特别注意：onLoad 函数和 onReady 函数，这两个函数在一个页面中只会调用一次；小程序的页面生命周期是指小程序页面从 加载 → 运行 → 销毁的整个过程；页面生命周期函数需要在每个页面的 Page() 方法中进行定义；
2025-03-16 13:02:48
757
原创 小程序生命周期 —— 46 小程序生命周期 - 应用生命周期
应用生命周期伴随着一些函数，我们称之为应用生命周期函数，应用生命周期函数需要在 app.js 文件的 App() 方法中进行定义，App() 方法必须在 app.js 中进行调用，主要用来注册小程序；应用生命周期函数由 onLaunch、onShow、onHide 三个函数组成；应用生命周期通常是指一个小程序从启动 → 运行 → 销毁的整个过程；
2025-03-16 12:22:31
316
原创 小程序生命周期 —— 45 小程序生命周期介绍
生命周期函数会按照顺序依次自动触发调用，帮助程序员在特定的时机执行特定的操作，辅助程序员完成一些比较复杂的逻辑；应用的生命周期是指应用程序进程从创建到消亡的整个过程，小程序的生命周期是指小程序从启动到销毁的整个过程；小程序生命周期伴随着一些函数，这些函数由小程序框架本身提供，被称为 生命周期函数。一个小程序完整的生命周期由 应用生命周期。
2025-03-16 11:58:55
205
原创 小程序生命周期 —— 44 小程序更新机制
在启动前没有发现更新，小程序每次冷启动时，都会异步检查是否有更新版本。如果发现有新版本，将会异步下载新版本的代码包，将新版本的小程序在下一次冷启动时进行使用，当前访问使用的依然是本地的旧版本代码；如果有更新，下次小程序启动时会同步进行更新，更新到最新版本后再打开小程序。在访问小程序时，微信会将小程序代码包缓存到本地，开发者在发布了新的小程序版本以后，微信客户端会检查本地缓存的小程序有没有新版本，并进行小程序代码包的更新；在启动异步更新的情况下，如果开发者希望立即进行版本更新，可以使用。
2025-03-16 11:42:27
265
原创 小程序生命周期 —— 43 小程序运行机制
销毁：如果用户很久没有使用小程序，或者系统资源紧张，小程序会被销毁，即完全终止运行；当小程序进入后台被挂起后，如果很长时间（目前是30分钟）都未再次进入前台，小程序会被销毁；挂起：小程序进入后台状态一段时间后（5秒），微信停止小程序 JS 线程执行，小程序进入挂起状态，当开发者使用了后台播放音乐、后台地理位置等功能时，小程序可以在后台持续运行，不会进入到挂起状态；点击关闭小程序后，小程序从前台状态切换为后台状态，切换到后台状态后，小程序会被挂起；
2025-03-09 13:24:09
303
原创 小程序 wxml 语法 —— 40 列表渲染-基本用法
在微信小程序中，如果需要使用列表渲染，需要在组件中使用 wx:for 属性绑定一个数组或者对象，既可使用每一项数据重复渲染当前组件；在渲染过程中，每一项的变量名默认为 item，下标变量名默认为 index；列表渲染：通过循环遍历一个数组或者对象，将其中的每个元素渲染到页面上；
2025-03-08 21:36:18
531
原创 小程序 wxml 语法 —— 39 简单双向数据绑定
如果希望用户输入数据的同时修改 data 中的数据，可以借助简单双向绑定机制，在对应属性之前添加 model: 前缀即可：例如 <input model:value="{{ value }}" />，当数据发生改变时，页面也会随之发生变化，但是当用户在输入框中输入最新内容，最新内容并不会同步给 value 数据，这就是单向数据绑定；当修改页面上的值的时候，通过观看右下角的 AppData 的值可以发现，Page 中对应的数据也相应被修改了，实现了简单的双向数据绑定；
2025-03-08 20:56:37
598
原创 小程序 wxml 语法 —— 38 setData() - 修改数组类型数据
这一节演示如何新增、修改和删除数组类型数据，直接打开微信开发者工具进行演示；
2025-03-08 19:40:12
607
原创 小程序 wxml 语法 —— 37 setData() - 修改对象类型数据
这一节主要演示如何新增、修改和删除对象数据中单个/多个属性，我们直接使用微信开发者工具进行演示；
2025-03-08 17:47:59
689
原创 小程序 wxml 语法 —— 36 wxml 语法 - setData() 修改数据
通过上面的演示可以知道，通过赋值可以修改数据，但是不能改变页面上已经显示的数据；如果我们想更新 data 中的数据，同时也更新页面上已经显示的数据，就得使用 setData()；在微信小程序中，推荐调用 setData() 方式进行修改，setData() 方法接收对象作为参数，key 是需要修改的数据，value 是最新的值；在小程序中修改数据不推荐通过赋值的方式进行修改，通过赋值的方式修改数据无法改变页面的数据；
2025-03-08 17:13:32
706
原创 小程序 wxml 语法 —— 35 wxml 语法 -声明和绑定数据
在进行小程序开发时，小程序页面经常需要根据服务器响应的内容动态展示结构，或者根据程序员定义的变量来进行逻辑开发，服务器响应的内容和程序员定义的变量需要在合适的位置进行声明；在将数据声明好后，在 wxml 文件中使用 Mustache 语法( 双大括号{{}} ) 将变量包起来，从而将数据绑定；
2025-03-08 16:45:37
495
原创 小程序事件系统 —— 34 事件传参 - mark - 自定义数据
微信小程序进行事件传参的时候，除了使用 data-* 属性传递参数外，还可以使用 mark 标记传递参数；在组件上使用 mark:自定义属性的方式将数据传递给事件处理函数，例如。，然后通过事件对象进行获取自定义数据；
2025-03-08 16:21:51
992
原创 小程序事件系统 —— 33 事件传参 - data-*自定义数据
在微信小程序中，我们经常会在组件上添加一些自定义数据，然后在事件处理函数中获取这些自定义数据，从而完成业务逻辑的开发，这个过程称为小程序的事件传参；在这个例子中，currentTarget 的事件绑定者是 btn 按钮，target 的事件触发者也是 btn 按钮；，代码中的 id 就是自定义的属性，属性值 100 是需要传递的数据，然后通过事件对象获取自定义的数据；因此我们需要注意，当使用中划线命名单词的时候，获取事件对象的数据需要使用驼峰格式获取数据；
2025-03-08 15:49:34
1211
原创 小程序事件系统 —— 32 事件系统 - 事件分类以及阻止事件冒泡
如果想实现点击子组件按钮的时候，只触发子组件的事件，父组件的事件不触发，则需要阻止子组件的事件冒泡；冒泡事件：当一个组件的事件被触发后，该事件会向父节点传递；（如果父节点中也绑定了一个事件，父节点事件也会被触发，也就是说子组件的事件和父组件的事件都会被触发）；非冒泡事件：当一个组件的事件被触发后，该事件不会向父节点传递；（如果父节点绑定了事件，父节点的事件不会被触发，只有组件本身的事件会触发）；在微信小程序中，事件分为。
2025-03-07 22:31:05
863
原创 【尚医通】—— 01 使用 vite 构建项目
d.ts 文件是 TypeScript 的声明文件，用于描述 JavaScript 代码的类型信息。识别 .vue 文件：默认情况下，TypeScript 并不认识 .vue 文件的模块类型。与 .d.ts 文件不同，.ts 文件会被编译成 JavaScript 文件（.js），并且包含了实际的逻辑代码。在使用 Vite 和 Vue 3 构建项目时，生成的 vite-env.d.ts 文件主要用于 TypeScript 类型声明。类型定义：这行代码声明了所有 .vue 文件的默认导出类型为 any。
2025-01-14 13:18:54
747
原创 小程序事件系统 —— 31 事件系统 - 事件绑定和事件对象
当组件触发事件时，绑定的事件处理函数会收到一个事件对象；事件处理函数需要写到 .js 文件中，在 .js 文件中需要调用小程序提供的 Page 方法来注册小程序的页面，我们可以直接在 Page 方法中创建事件处理函数；在点击按钮之后，console 区域会输出一个对象，这个对象记录了事件触发时的一些信息，我们可以使用这个对象来获取相关的数据；在 input 输入信息后，在 console 窗口实时看到具体的输出；
2025-01-13 12:52:05
750
原创 尚硅谷Vue3入门到实战 —— 04 OptionsAPI 与 CompositionAPI
Options 类型的 API，数据、方法、计算属性等，是分散在 data、methods、computed 中的，若想新增或者修改一个需求，就需要分别修改 data、methos、computed，不方便维护和复用；这里的编程风格为 OptionsAPI，name、data、methos 都是一个选项/配置项，我们在学习 vue2 就是在学习各种配置项，但是这种写法存在一些问题；，非个人所有，无意冒犯），非个人所有，无意冒犯）
2025-01-07 12:28:58
513
原创 小程序组件 —— 30 组件 - 背景图片的使用
注意事项：微信小程序中的 background-iamge 不支持本地路径！需要使用网络图片，或者 base64，或者使用 image 组件；在编写小程序的样式文件时，可以使用 background-image 属性来设置元素的背景图像；但是这个属性在微信小程序中使用时存在坑；中进行下载（图片源自尚硅谷，非个人所有，无意冒犯）；
2025-01-04 17:27:29
883
原创 小程序组件 —— 29 组件案例 - 字体图标的使用
为了解决这个问题，我们可以在微信小程序中创建一个 wxss 文件（如果已经配置了 scss，则可以创建一个 scss 文件而不是一个 wxss 文件），将上面的 css 代码复制即可；在项目中，我们使用的小图标，一般由公司设计师进行设计，设计好之后上传到阿里巴巴矢量图库，然后方便程序员进行使用；在微信小程序中，字体图标的使用方式和网页开发中几乎是一样的，稍微有一些细小的差别，我们在微信开发者工具中进行详细的演示；搜索得到的图标有很多，我们需要根据需求进行筛选，选择符合产品需求的图标；
2025-01-04 17:05:27
1138
原创 小程序组件 —— 28 组件案例 - 推荐商品区域 - 实现结构样式
这一节目标是实现底部推荐商品的结构和样式，由于这里要求横向滚动，所以需要使用上节介绍的。属性支持横向滚动，推荐商品区域中的每一个商品是一个单独的。下面我们打开微信开发者工具实现这个需求，在。对每一个商品进行封装，每一个商品由一张。构建一个横向滑动区域，使用。中需要写三个组件：一个。
2025-01-04 14:40:07
749
原创 小程序组件 —— 27 组件案例 -推荐商品区域
scroll-x 属性接收布尔值，true 表示允许横向滚动，忽略属性值时默认 scroll-x 的值为 true；scroll-y 属性接收布尔值，true 表示允许纵向滚动，忽略属性值时默认 scroll-y 的值为 true；这一节主要实现推荐商品区域功能，这里先分析一下，在微信小程序中如何实现底部的滚动；
2025-01-04 14:13:44
944
原创 小程序组件 —— 26 组件案例 - 跳转到商品列表
navigator 组件中的 url 是指小程序内的跳转链接，当点击文本时，进入这个页面对应的路由；在微信小程序中，如果需要进行跳转，需要使用。属性值时，当我们点击第一个文本能够正常跳转，但是点击第二个“跳转到商品分类页面”时，无法正常跳转；例如，在用户完成某个操作后，强制跳转到结果页面，而不允许返回到操作页面；- 简化页面栈: 在某些情况下，页面的历史记录并不重要，或者不希望用户返回到之前的页面。会销毁当前页面，可能在某些情况下有助于释放内存，特别是在页面内容较多或复杂时；与其他页面跳转方法（如。
2025-01-03 23:01:01
1838
原创 小程序组件 —— 25 组件案例 - 商品导航区域
在主轴（默认是水平方向）上，子元素之间的空间会被平均分配，首尾元素会分别靠近容器的两端。：将 .good-nav 元素设置为弹性盒子布局，使其子元素可以灵活地排列。：设置边角的圆角半径为 10rpx，使元素的角变得圆润。：设置内边距，上下为 20rpx，左右为 16rpx。：将子元素的排列方向设置为垂直方向（列）。：设置文本与其上方元素之间的外边距为 12rpx。：设置文本的字体大小为 24rpx。：设置图像的高度为 80rpx。：设置图像的宽度为 80rpx。
2025-01-02 22:41:02
711
原创 小程序组件 —— 24 组件案例 - 绘制公司信息区域
的属性值为 true 时，表示长按文本之后可以实现选中文本效果；的属性值为 true 时，其属性值可以不写，默认为 true；组件的文本中添加多个空格时，在模拟器上只会渲染展示一个空格，如下，我们在。属性，所以长按文本之后并不能实现选中文本效果，我们在。当我们需要展示连续空格时，需要在 text 组件中使用。下面打开微信开发者工具来进行演示，选择。在小程序中，如果想渲染文本，需要使用。
2025-01-02 13:17:11
614
原创 小程序组件 —— 23 组件案例 - 轮播图图片添加
表示使用缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。上一节实现了轮播图的最外层结构，但是没有通过轮播图来渲染图片，这一节我们先讲一下小程序中怎么来渲染图片，讲解完之后会通过轮播图来展示图片；由于我们使用图片填充了轮播图区域，所以 css 样式中保存的背景颜色也可以删除了，最后的效果如上图所示；会使图片完整显示出来，所以可以看到上图中左侧有部分区域陆佰，这里我们需要注意一下；是图片懒加载功能，只有当滑动到一定的距离（上下三屏）的时候，才会展示图片；属性用于图片的裁剪和缩放处理，填写属性值。
2025-01-01 17:24:53
895
原创 小程序组件 —— 22 组件案例 - 轮播区域绘制
切换到首页目录，打开 index.wxml 文件，在轮播图区域中实现轮播图的结构，在最外层写一个 swiper，swiper 是轮播图最外层的盒子，注意在 swiper 内部只能设置 swiper-item，在 swiper-item 中编写内容才能在页面上正常显示编写的内容；回顾一下，在进行传统网页开发时，实现轮播图的时候，我们首先使用 html、css 实现轮播图的结构样式，然后使用 JS 控制轮播图的效果，或者直接使用插件实现轮播图的功能，而在小程序中实现小程序功能则相对简单很多；
2025-01-01 16:08:38
1344
原创 尚硅谷Vue3入门到实战 —— 03 一个简单的效果
下面开始写一个简单的效果，打开上一节使用的项目，在根目录的 src 文件夹下新建一个 components 文件夹（新建的默认文件夹中也可能默认带有 components 文件夹）;在 components 的 Person.vue 文件中的代码风格是 vue2 的，可以看到，在 vue3 项目中，是可以使用 vue2 代码构建项目并运行的；
2024-12-31 01:02:43
291
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人