微信小程序(新)
文章平均质量分 84
微信小程序(新)
richest_qi
这个作者很懒,什么都没留下…
展开
-
小程序轮播图实现由远及近动画
小程序轮播图实现由远及近动画。原创 2022-08-08 14:23:38 · 375 阅读 · 0 评论 -
微信小程序使用Swiper组件实现层叠轮播图
微信小程序使用Swiper组件实现层叠轮播图。原创 2022-08-05 10:19:21 · 2983 阅读 · 0 评论 -
微信小程序的登录
调用这个API将返回用户登录凭证,且。小程序登录流程时序如下图所示,临时登录凭证code。原创 2022-07-29 11:36:06 · 968 阅读 · 0 评论 -
微信小程序的分包加载
某些情况下,需要对小程序进行分包。分包后的小程序必定有一个主包,一个或多个分包。小程序启动时,默认下载 主包并启动主包内页面,只有当进入分包内某个页面时,客户端才会下载对应分包,然后展示分包页面,即分包是按需进行加载的。目前小程序分包大小有如下限制:小程序的包结构如下。其中,文件夹下的是主包,文件夹下的是分包。在中声明包结构。其中, 字段声明了主包, 字段声明了分包结构。的值是一个数组,数组的每个元素是一个对象,该对象包含如下属性:代码涉及的主要文件有:主包app.wxssapp.jspa原创 2022-07-28 14:16:46 · 1522 阅读 · 0 评论 -
微信小程序中自定义模板
微信小程序中自定义模板原创 2022-07-28 09:45:49 · 1700 阅读 · 0 评论 -
微信小程序实现音乐搜索页面
类似于Vue中的,条件渲染; 类似于Vue中的,简单地控制显示与隐藏。可以添加到一个标签上,可以添加到一组标签上。如果想用来控制一组标签,用将该组标签包装起来即可。代码涉及的主要文件有:pages/search.wxmlpages/search.wxsspages/search.js相关链接条件渲染...原创 2022-07-27 13:51:56 · 2399 阅读 · 0 评论 -
微信小程序实现音乐播放器(5)
是全局唯一的背景音频管理器。小程序切入后台,如果音频处于播放状态,可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。从微信客户端6.7.2版本开始,如果需要小程序切后台后继续播放音频,需要在全局配置文件app.json。属性,如"requiredBackgroundModes"["audio"]实例,可以通过wx.getBackgroundAudioManager()中配置requiredBackgroundModes。本例会使用第三方库moment.js来格式化时间。............原创 2022-07-25 16:36:46 · 3523 阅读 · 0 评论 -
微信小程序实现音乐播放器(4)(使用pubsubjs实现页面间通信)
微信小程序中使用pubsubjs实现页面间通信原创 2022-07-25 10:45:57 · 1338 阅读 · 0 评论 -
微信小程序实现音乐播放器(3)(使用全局数据实现数据共享)
整个小程序只有一个App实例,是全部页面共享的。可以通过getApp()获取到全局唯一的App实例,获得App上的数据或函数。中调用App({})原创 2022-07-22 12:53:43 · 1671 阅读 · 1 评论 -
微信小程序实现音乐播放器(2)
是全局唯一的背景音频管理器。小程序切入后台,如果音频处于播放状态,可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。从微信客户端6.7.2版本开始,如果需要小程序切后台后继续播放音频,需要在全局配置文件app.json。属性,如"requiredBackgroundModes"["audio"]实例,可以通过wx.getBackgroundAudioManager()中配置requiredBackgroundModes。............原创 2022-07-21 14:00:11 · 15983 阅读 · 3 评论 -
微信小程序实现音乐播放器(1)
微信小程序实现网易云音乐唱片机播放效果原创 2022-07-20 13:59:34 · 3578 阅读 · 0 评论 -
微信小程序中image组件用作背景图片时
代码变更涉及的文件有pages/about/about.wxss。置于该背景图片的垂直中央位置上。原创 2022-07-19 11:05:49 · 822 阅读 · 0 评论 -
微信小程序的转发分享功能
然后,onShareAppMessage(Objectobject)最后,onShareAppMessage(Objectobject)可以返回一个对象,用来自定义转发内容。,点击按钮,生成了当前页的快照,发送后,别人亦可访问当前页。首先,只有定义了onShareAppMessage(),页面右上角菜单才会显示“转发”按钮。......原创 2022-07-19 10:26:55 · 14294 阅读 · 0 评论 -
页面的上拉刷新和下拉加载
注意哈,只有在全局配置或者页面配置中开启enablePullDownRefresh时,才会生效。原创 2022-07-18 14:24:47 · 444 阅读 · 0 评论 -
scroll-view的下拉刷新和上拉加载(触底)
使用竖向滚动时,需要给scroll-view设置一个固定的高度,即通过wxss设置height,单位是rpx或px。可实现一个可滚动的视图区域。只有开启下拉刷新才会生效。原创 2022-07-18 12:45:17 · 8036 阅读 · 2 评论 -
video继续播放时跳到指定位置
小程序里要放置视频,用video组件。,显示loading提示框,调用wx.hideLoading()实例,可调用wx.createVideoContext()组件绑定,便可操作对应的。原创 2022-07-15 13:55:40 · 2484 阅读 · 0 评论 -
使用scroll-view实现内容列表的竖向滚动
在刚刚的示例中可以看到,竖向滚动内容列表时,tabs也会跟着往上滚动。但我们期望的效果是,内容列表往上滚动时,tabs及以上的部分固定不动,为此,使用scroll-view组件来包裹内容列表。使用竖向滚动时,需要给scroll-view设置一个固定的高度,即通过wxss设置height,单位是rpx或px。的视口高度,tabs及其以上部分的高度为。可实现一个可滚动的视图区域。组件来包裹内容列表。......原创 2022-07-15 09:45:43 · 3531 阅读 · 0 评论 -
video列表性能优化
小程序里要放置视频,用video组件。video组件很多属性,如: 实例,可调用 创建。实例通过 与一个组件绑定,便可操作对应的组件。实例包含如下方法:问题描述:一个页面存在多个video组件时,video无法正常播放,一直在加载转圈。解决方法:使用image列表代替video列表,只有当image被点选时,才用video组件替代image。代码涉及的文件有:pages/index/index.wxmlpages/index/index.wxsspages/index/index.原创 2022-07-14 14:45:38 · 2335 阅读 · 0 评论 -
使用VideoContext解决多个视频同时播放的问题
小程序里要放置视频,用video组件。video组件很多属性,如: 实例,可调用 创建。实例通过 与一个组件绑定,便可操作对应的组件。实例包含如下方法:代码涉及的文件有:pages/index/index.wxmlpages/index/index.wxsspages/index/index.js问题描述在播放一个视频的时候,可以播放另一个视频,存在多个视频同时播放的问题。解决思路:在播放另一个视频的时候,将关闭上一个视频,保证同一时间内只有一个视频在播放。解决措施:代码变更涉及原创 2022-07-14 09:30:30 · 2645 阅读 · 0 评论 -
使用scroll-view实现tabs(增加动画过渡效果)
可实现一个可滚动的视图区域。 组件有很多属性,常用的有:,显示loading提示框,调用才能关闭提示框。接收一个对象作为参数,该对象包含如下属性:代码涉及的主要文件有:原创 2022-07-13 11:20:44 · 1185 阅读 · 0 评论 -
微信小程序中使用video组件
小程序里要放置视频,用video组件。video组件很多属性,如:代码涉及的文件有:pages/index/index.wxmlpages/index/index.wxsspages/index/index.js相关链接使用scroll-view实现tabs原创 2022-07-12 13:50:56 · 5902 阅读 · 0 评论 -
使用scroll-view实现tabs
代码涉及的主要文件有:原创 2022-07-08 11:34:30 · 405 阅读 · 0 评论 -
微信小程序中的路由跳转和缓存
微信小程序中支持路由跳转的常用API有,微信小程序提供了数据缓存API,一个同步,另一个异步。代码涉及的主要文件有:app.wxss首页(pages/home)pages/home/home.wxml相册(pages/camera)pages/camera/camera.wxmlpages/camera/camera.json个人中心(pages/user)pages/user/user.wxmlpages/user/user.jspages/user/user.json原创 2022-07-07 15:00:14 · 1396 阅读 · 0 评论 -
微信小程序中的路由跳转
微信小程序中支持路由跳转的常用API有,代码涉及的主要文件有:app.wxss首页(pages/home)pages/home/home.wxml相册(pages/camera)pages/camera/camera.wxmlpages/camera/camera.json个人中心(pages/user)pages/user/user.wxmlpages/user/user.json登录(pages/login)pages/login/login.wxmlpages/l原创 2022-07-06 14:27:08 · 256 阅读 · 0 评论 -
微信小程序中使用wx.showToast()进行界面交互
微信小程序中使用 显示消息提示框,这个API接收一个对象作为参数,该对象包含以下属性:代码涉及的文件有:pages/index/index.wxmlpages/index/index.wxsspages/index/index.js相关链接【微信小程序】常见界面交互...原创 2022-07-06 10:56:38 · 8743 阅读 · 0 评论 -
微信小程序中给event对象传递数据
代码涉及的主要文件有:pages/index/index.wxsspages/index/index.wxmlpages/index/index.js向event对象传递自定义属性代码变更涉及到文件有:pages/index/index.js相关链接通过事件绑定实现动画效果微信小程序的事件绑定...原创 2022-07-05 14:29:35 · 1747 阅读 · 0 评论 -
通过事件绑定实现动画效果
本例涉及的事件类型有:事件触发时,事件处理函数会接收到一个事件对象,该事件对象包含的属性因事件类型不同而有些许差异,其中,雨露均沾的属性有:除了以上基础属性,TouchEvent的事件对象还包含如下属性:代码涉及的主要文件有:pages/index/index.wxmlpages/index/index.wxsspages/index/index.js相关链接微信小程序的事件绑定...原创 2022-07-04 12:23:55 · 522 阅读 · 0 评论 -
微信小程序中使用tabBar
前面我们学习过:在里对小程序进行全局配置,的文件内容是一个JSON对象,包含很多属性,其中一个常用属性就是 。如果小程序是一个多tab应用,就可以通过指定tab栏的表现,以及tab切换时显示的对应页面。 的属性值也是一个对象,该对象包含以下常用属性:pages下新建Page:home(主页)、camera(拍照)、user(个人中心)。项目根目录下新建文件夹:,static下新建文件夹:,images下新建文件夹:,tabIcons下存放tabBar要用到的图标。代码涉及的主要文件有:pages/home原创 2022-07-01 11:57:29 · 1545 阅读 · 0 评论 -
微信小程序中自定义组件
代码涉及的主要文件有:pages/index/index.wxmlpages/index/index.wxsspages/index/index.js自定义组件项目根目录下新建文件夹:,components下新建文件夹:,Header下新建Component,自动生成文件: 、、和。代码变更涉及的文件有:components/Header/Header.wxsscomponents/Header/Header.jspages/index/index.jsonpages/ind原创 2022-06-30 10:56:19 · 590 阅读 · 0 评论 -
使用scroll-view实现滑块视图可能遇到的问题及其解决方法
代码相关的主要文件有:pages/index/index.wxmlpages/index/index.wxsspages/index/index.js问题描述及解决方法问题描述scroll-view横向滚动后,其高度却很大,导致其后的元素几乎排至页面底部,如下图所示。解决方法给scroll-view设置指定高度,如,即可解决以上问题。修改后的效果相关链接滑块视图的实现...原创 2022-06-30 09:04:08 · 405 阅读 · 0 评论 -
微信小程序中的列表渲染
代码涉及的主要文件有:pages/index/index.wxmlpages/index/index.js小结记住四个指令就行:【微信小程序】wxml模板原创 2022-06-24 11:08:55 · 1571 阅读 · 0 评论 -
微信小程序中发送网络请求
代码涉及的主要文件有:pages/index/index.htmlpages/index/index.wxsspages/index/index.js发送网络请求网络请求函数:wx.request()微信小程序提供了 这个API,用于发送网络请求,该API接受一个对象作为参数,该对象包含多个属性,其中常用的有:代码变更涉及的文件有:pages/index/index.js。封装网络请求函数代码变更涉及的文件有:............原创 2022-06-23 14:49:30 · 4574 阅读 · 0 评论 -
滑块视图的实现
代码涉及的文件有pages/index/index.wxmlpages/index/index.wxssscroll-view组件可实现一个可滚动的视图区域。 组件有很多属性,常用的有:原创 2022-06-22 15:29:11 · 341 阅读 · 0 评论 -
轮播图的实现
代码涉及的文件有pages/index/index.wxmlpages/index/index.wxssswiper组件是一个滑块视图容器,里面只可放置。 组件有很多属性,常用的有:原创 2022-06-22 15:27:53 · 198 阅读 · 0 评论 -
如何使用iconfont
我们经常会用到图标,阿里巴巴矢量图标库(https://www.iconfont.cn/)很好用。下面介绍下iconfont在小程序开发中的应用。在页面结构文件(比如,index.wxml)中通过类名应用图标。小程序项目代码涉及的主要文件有:......原创 2022-06-21 10:42:19 · 1714 阅读 · 0 评论 -
微信小程序获取用户信息的API又有变动了
项目代码涉及的主要文件有:app.wxssapp.jspages/index/index.wmlpages/index/index.wxsspages/index/index.js获取用户信息微信小程序获取用户信息,有如下3种方式:代码变更涉及的文件有:pages/index/index.jswx.getUserInfo()代码变更涉及的文件有:pages/index/index.jswx.getUserProfile()代码变更涉及的文件有:pages/index原创 2022-06-17 13:55:01 · 741 阅读 · 1 评论 -
生命周期函数、路由跳转
小程序页面常用的生命周期函数如下,以上生命周期函数的执行时机如下图所示,路由跳转常用API有,接下来从生命周期函数的调用情况,来感受以上3个API的异同。项目代码涉及的主要文件有:app.wxssapp.jspages/index/index.wmlpages/index/index.wxsspages/index/index.jspages/logs/logs.jsonpages/logs/logs.wxml小结,将保留当前页面。从index页面跳转到logs页面时,会触原创 2022-06-16 14:27:15 · 453 阅读 · 0 评论 -
微信小程序的事件绑定
代码变更涉及的文件有:pages/index/index.jspages/index/index.wxss绑定的事件,事件可以冒泡;绑定的事件,事件不会冒泡。新建微信小程序项目微信小程序的数据绑定原创 2022-06-15 09:16:32 · 453 阅读 · 0 评论 -
微信小程序的数据绑定
代码变更涉及的文件有:pages/index/index.js新建微信小程序项目原创 2022-06-14 17:09:58 · 202 阅读 · 0 评论 -
新建微信小程序项目
使用微信开发者工具新建微信小程序项目:mydemo,不使用云开发,不使用模板,自动生成如下文件:对以上小程序目录结构进行简单说明,如下。项目根目录下新增文件夹:static,static下新建子文件夹:images,images下放置静态图片资源,如puppy.jpg。本次代码变更涉及的文件有:app.json对小程序进行全局配置。文件内容是一个JSON对象,包含很多属性,详见微信小程序官方文档,开发>框架>小程序配置>全局配置。其中,常用的属性如:pages/index/index.wxmlp原创 2022-06-13 09:51:18 · 2660 阅读 · 0 评论