![](https://img-blog.csdnimg.cn/20201026161654548.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
小程序系列
文章平均质量分 76
本栏目主要更新内容为小程序,包括但不限于微信小程序、支付宝小程序等
八了个戒
愿代码之火永不熄灭,技术之光照耀前行!
展开
-
微信小程序之开发遇到 does not have a method “xxxx“ to handle event “tap“ 问题的解决方案【已解决】
在配置中找不到方法,所以在点击响应时,会有警告,但是程序运行不会报错。这也是小白在学习小程序时经常容易犯的错误,今天竟然把一个开发了多个小程序的我给呆住了,现在就来分析一下产生这个问题的原因有哪些。原创 2022-05-22 19:01:23 · 44045 阅读 · 22 评论 -
小程序轻松实现一个完美适配各种机型的自定义导航栏
前言:最近又在小程序开发的时候会遇到了需要自定义导航栏的需求,小程序开发平台已经早就提供了这项能力,并且在之前项目中我也提到过这个问题的解决方案:微信小程序之实现页面顶部导航栏透明、隐藏效果。我们在开发这一部分功能的时候踩过一些坑,下面我将针对我在开发过程中碰到的问题进行总结整理以及提供一套完整的自定义导航栏组件,可以直接上手使用。问题分析:为了使我们的项目更好的适配所有的机型,那么就需要先分析一下:我们可以发现:Android 跟 iOS 顶部有差异的,表现在顶部到胶囊按钮之间的距离有高度原创 2021-09-15 11:32:00 · 2113 阅读 · 1 评论 -
微信小程序之实现页面顶部导航栏透明、隐藏效果(navigationBar)欢迎点赞收藏
我们在开发微信小程序的过程中大家都知道,导航栏的颜色可以在 app.json 中的 window 属性里面添加 navigationBarBackgroundColor 属性,但是里面的颜色只能为纯色,不能使用 rgb 颜色,或者 rgba 的色号。需求分析但是有时候我们想要实现这种效果,想要让顶部的导航栏透明隐藏,这个时候就需要发动我们的小脑筋想一下要如何实现了。我们可以看一下官网是否有此类方法:Navigation官网说:Navigation是小程序的顶部导航组件,当页面配置 navigat原创 2021-06-08 11:24:14 · 25108 阅读 · 6 评论 -
微信小程序之使用swiper组件实现3D轮播图效果【附demo源码】欢迎点赞收藏
本文主要介绍了微信小程序基于 swiper 组件来实现一个 3D 轮播图效果。本文采用示例分析得形式,对微信小程序基于 swiper 组件的相关属性设置、事件响应以及操作技巧进行分析,可以很容易解决,希望对您的工作学习有所帮助,如果有用欢迎一键三连!一、官方文档:swiper (滑块视图容器):https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html二、效果图:三、代码详解:实现原理:主要利用了 circu原创 2021-06-07 08:57:59 · 5282 阅读 · 0 评论 -
微信小程序页面路由跳转总结(wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch、wx.navigateBack 的区别)
一、页面路由微信官方文档 · 页面路由在小程序中所有页面的路由全部由框架进行管理。框架以栈的形式维护了当前的所有页面。二、路由方式wx.navigateTo用于保留当前页面、跳转到应用内的某个页面,但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo 进行跳转, 以便返回原页面,以提高加载速度。当页面特别多时,则不推荐使用。注意:小程序中页面栈最多十层。使用方式:下面进行一个简单原创 2021-05-17 15:41:22 · 4369 阅读 · 2 评论 -
微信小程序之实现封装一个富文本编辑器 Editor 的完整流程【附demo源码】欢迎点赞收藏
本文将主要讲解一下如果通过微信小程序来实现封装一个富文本编辑器 Editor。一、官方文档:editor(富文本编辑器,可以对图片、文字进行编辑):https://developers.weixin.qq.com/miniprogram/dev/component/editor.htmlrich-text(富文本):https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html二、效果图:三、代码详解:1. 编原创 2021-04-08 17:56:33 · 4334 阅读 · 5 评论 -
当 uni-app 遇见 vscode,我该如何让它臣服
前言uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架,官方推荐的开发工具为 HBuilderX,使用起来有很好的开发体验。不过,由于 HBuilderX 没有 Linux 版以及一些不为人知的秘密,想要使用 vs code。如果直接使用 vscode 开发 uni-app,其体验并不是很好,但是碰上了神通广大的我们,必须要让他臣服。其实 uni-app 和 vscode 也可以很搭,接下来为各位小伙伴带来 vscode 中 uni-app 的正确打开姿势。使用一、CLI 工原创 2021-03-16 15:00:10 · 1161 阅读 · 2 评论 -
微信小程序之实现一键退出(挂起)小程序以及如何去除 view/navigator 点击后默认阴影效果
写在最前在开发项目过程中,碰到这么一个需求:当用户点击取消或者拒绝时,系统直接关闭小程序,返回微信客户端。实现的功能与小程序中右上角的圆圈功能类似。功能实现其实功能实现起来很简单,只不过我们之前一直没有注意到,navigator 中有一个跳转方式 open-type 属性,里面的属性值有一个是 exit 即 退出小程序。 微信小程序 · navigator<navigator open-type="exit" target="miniProgram"> <button原创 2021-01-27 16:24:12 · 2382 阅读 · 5 评论 -
微信小程序之扫普通链接二维码打开小程序实现动态传递参数及踩坑总结
目录前言一、官方文档二、开启普通链接二维码打开小程序功能三、配置流程四、配置实例五、踩坑记录1. 扫码打开小程序出现 "页面不存在"2. 测试版本需要注意的几个点六、总结前言在现有需求的驱动下, 需要手动生成普通二维码并且携带动态参数来跳转打开小程序实现后续功能,本文章主要用于记录如何配置普通链接二维码打开小程序和配置过程中踩过的坑。一、官方文档扫码打开小程序接入指南二、开启普通链接二维码打开小程序功能登录 微信小程序公众平台,左边菜单列表里面找到 开发 选项,点击下面的 开发管理 ,右原创 2021-01-14 15:53:59 · 5562 阅读 · 5 评论 -
微信小程序之父子组件传值通信与事件触发(最全实用总结)
我们这里说的都是微信小程序的自定义组件的相关内容哦。组件创建组件在对应目录下创建 Components 文件夹,用来存放我们的自定义组件。在刚刚创建的 Components 文件夹中右键 “新建 Component”,创建一组组件。组件类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成,在里面编写对应的内容即可。使用组件使用已注册的自定义组件前,需要在对应的页面或者组件的 json 下引入该组件{ "usingComponents": { .原创 2020-12-23 16:30:42 · 9717 阅读 · 0 评论 -
微信小程序之实现下拉刷新效果
本文章将主要介绍微信小程序如何实现简单的下拉刷新效果的,代码简单明了。主要 apiwx.showLoading(Object object) 显示 loading 提示框wx.hideLoading(Object object) 关闭 loading 提示框wx.startPullDownRefresh(Object object) 开始下拉刷新。调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。wx.stopPullDownRefresh(Object object) 停止当前页面下拉.原创 2020-12-18 14:46:11 · 2156 阅读 · 2 评论 -
最新最全的前端面试题集锦之 微信小程序 篇(从基础到高级)
最新最全的前端面试题集锦之 微信小程序 篇(从基础到高级)原创 2020-12-17 14:16:31 · 3521 阅读 · 1 评论 -
微信小程序优化之函数节流与函数防抖(代码封装)
小程序开发完成,闲来无事想要优化一下,就要用到这个函数节流和函数防抖了。这两个内容也算是老生常谈的问题了,他们都能优化js的性能,减少函数触发,减少页面请求。原创 2020-12-16 10:08:25 · 803 阅读 · 2 评论 -
微信小程序开发常见warnings警告解决方案
在小程序开发过程中,只要稍不注意代码细节,就会出现很多 warnings 警告,虽然在对小程序的运行并没有什么影响,但是作为一名严谨的程序猿,是不允许它们存在的。下面我将从我的实际项目开发过程中碰到的warnings 问题进行分析处理。Warning 1: Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors。首.原创 2020-12-03 15:33:57 · 8773 阅读 · 4 评论 -
微信小程序之WeUI组件库的使用
本文主要介绍微信小程序中的 WeUI组件库的具体使用方法,通过具体的示例代码进行介绍,相信能够对大家的学习和工作都有一定的参考学习意义,欢迎大家一起学习进步。WeUI组件库 官方文档一、前言WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。二、下载1. git 全部下载:https.原创 2020-11-23 10:42:43 · 8190 阅读 · 4 评论 -
微信小程序之触摸滑动事件案例+Slideview组件【手动左滑删除效果】
前言:现在很多程序上都有左滑删除的效果,其实实现很简单,今天我们主要来记录一下小程序的左滑删除的实现过程。效果图:实现效果:当我们在该条记录上进行左滑操作时,整条记录跟着向左移动,同时右侧的删除按钮会显示出来。当我们点击删除按钮时,就会把该条记录删除掉。如果不想删除该记录,可以右滑取消,或者随意点击一个位置都可以使右侧的删除按钮隐藏回到原样。设计思路:首先在页面上每条 item 记录分为上下两层,上面的 view 包裹正常展示的内容,下面的 view 存放左滑的显示的内容;元素移原创 2020-11-19 16:36:28 · 3967 阅读 · 1 评论 -
微信小程序之去除点击元素出现高亮背景的解决方案
在小程序或者是移动端开发过程中,总是会碰到当你点击一个可以点击的元素的时候,在这个元素下会出现一个高亮的正方形浅蓝色背景。效果如下:解决方案:通过属性 -webkit-tap-highlight-color 进行解决。属性概述:当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。具体内容见:-webkit-tap-highlight-color要解决这个问题,就可以通过禁用这个高亮就可以,只需要设置颜色的alpha值为0即可。page .原创 2020-11-12 15:20:22 · 1996 阅读 · 0 评论 -
微信小程序之轮播图swiper组件自定义指示点样式
微信小程序 - swiper组件定义一个轮播图 swiper 组件:// swiper.wxml<swiper indicator-dots="true"> <block wx:for="{{imgURL}}" wx:key="*this"> <swiper-item> <view class="swiper-item {{item}}"></view> </swiper-item> </block>原创 2020-11-11 09:56:43 · 1537 阅读 · 2 评论 -
微信小程序安全浅析
引言近期微信小程序重磅发布,在互联网界掀起不小的波澜,已有许多公司发布了自己的小程序,涉及不同的行业领域。大家在体验小程序用完即走便利的同时,是否对小程序的安全性还存有疑虑。白泽日前对微信小程序进行初步的安全技术分析,在此整理出来抛砖引玉,如有描述不当的地方,欢迎纠正,轻拍。本文中,大白将从小程序的框架、功能模块安全、账户使用安全方面进行剖析,希望能为各位泽友带来不一样的认知。一、小程序框架概述在第一部分小程序框架概述中,将介绍小程序抽象框架、小程序调用框架和小程序初始化流程。下面让大白来逐转载 2020-11-10 14:01:09 · 3230 阅读 · 0 评论 -
微信小程序开发之分享转发功能多种实现方案(论函数复用的几大姿势)
本文主要用来实现微信小程序的分享转发功能,是将一个小程序转发给其他朋友或者是群聊中,并且目前在微信小程序中如果想要设置全局转发,那又该如何操作呢,关于这个问题,我将分享一篇文章【论函数复用的几大姿势】,下面我也会详细进行介绍。官方文档:微信小程序 · 转发情景一:不带参数直接转发onShareAppMessage: function() { return { title: '转发标题', path: '/pages/index/index', success: function(re.原创 2020-11-04 14:26:56 · 2175 阅读 · 0 评论 -
【亲自实践总结】微信小程序局域网通信之UDP通信demo(协议分析 + 客户端小程序代码)
文章目录一、WebSocket 概述二、UDP 协议简述三、基于udp通信的客户端代码(微信小程序)四、基于udp通信的服务器端代码(node.js)一、WebSocket 概述这个内容在上一篇文章中已经详细的介绍过了,如果你没有看过,欢迎移步【亲自实践总结】微信小程序WebSocket通信之TCP通信demo二、UDP 协议简述想看关于TCP的内容,请移步至 xxx在这里就开始正式写关于 tcp 通信的 WebSocket 的 demo 了。虽然网上有很多关于 tcp 通信的相关内容,原创 2020-11-03 15:55:28 · 4949 阅读 · 2 评论 -
微信小程序开发之实现订阅消息发布功能
本文主要详细介绍关于微信小程序的消息订阅功能的开发流程,尽可能详细的进行分析开发,使之成为一篇具有参考意义的文章。自从微信官方取消了模板消息,订阅消息逐步出现在大众的视野。大家如果想了解一下 模板消息 和 订阅消息他们直接的区别,可以看一下这篇文章 微信小程序可以向用户推送消息吗? 当然看不看都无所谓,因为模板消息已经彻底再见了。我们还是多关注关注我们的订阅消息吧。好了,废话不多说,进入正题。在这里,先提供几个对应的参考连接一、什么是订阅消息订阅消息就是需要用户主动订阅,开发者才能面向这.原创 2020-10-29 16:44:27 · 3270 阅读 · 2 评论 -
【亲自实践总结】微信小程序WebSocket通信之TCP通信demo(协议分析 + 前端小程序代码 + 后端node.js代码)
文章目录原创 2020-10-28 14:56:42 · 8425 阅读 · 4 评论 -
微信小程序转支付宝小程序之趟坑记录及问题解决方案
前言当我们搞定微信小程序之后总会下意识的提高点难度,要不要顺手把支付宝小程序也给搞定??这不,我来趟坑了。以下问题只是我在转换过程中考虑到的和碰到的一些问题,但是应该也是大部分开发者会碰到的一些问题,欢迎大家阅读,有任何问题欢迎指正,欢迎评论区讨论。一、微信小程序(wx)与支付宝小程序(alipay)区别视图层页面:wxml —— axml(1)冒泡、非冒泡事件:bindtap —— onTap(驼峰命名)catchtouchstart —— catchTap(2)列表渲染:wx:原创 2020-10-26 17:59:57 · 1130 阅读 · 0 评论 -
微信小程序转支付宝小程序解决方案及遇到的问题(wx2my、Antmove转换器)
背景介绍对于目前开发市场分析而言,微信小程序一直是小程序开发行业的领头羊,但是其他小程序也一直在紧追不舍,比如支付宝小程序、百度小程序、头条小程序、抖音小程序、美团小程序等等,很多互联网巨头都有在做自己的小程序,所以说小程序也是未来的大势所趋。但是开发者开发了一个微信小程序之后,同时又想把这个微信小程序发布到支付宝小程序或者其他更多小程序平台上,可惜微信小程序并不能直接发布到支付宝小程序平台上,两个平台的小程序是不兼容的。因此开发者需要对微信小程序代码进行修改,需要将现在的微信小程序代码调整转换为能够在原创 2020-10-26 13:58:04 · 4555 阅读 · 0 评论 -
微信小程序大段文本内容过多,实现折叠与展开效果解决方案 以及 多行文本溢出隐藏不生效的解决方案
实现场景:一个列表的文章内容过长,显示的时候要省略显示,但是还要有一个展开查看全文的点击事件,可以实现展开与折叠。实现思路:使用两层容器,父标签设置max-height,预计成要显示行数的高度,并且使用overflow:hidden; 溢出隐藏;然后使用SelectorQuery wx.createSelectorQuery()query去查子标签的高度,如果子标签的高度高一些,就显示这个展开按钮;2.1 针对使用wx:for循环来渲染的列表,可以在wx:for的标签上,加个class,s原创 2020-10-15 16:49:28 · 7784 阅读 · 2 评论 -
微信小程序文本超出自动换行解决方案
使用场景:在一段文本中,显示的内容过多,超出原本设置的范围,现在需要将它进行分行显示。实现方案:前提:给 view或者 text 容器设置默认的 display: block然后设置属性:text-overflow:ellipsis; word-wrap:break-word;就可以实现自动换行。如果是因为大段文本内容过多,需要实现折叠与展开效果,请移步...原创 2020-10-15 16:10:26 · 13292 阅读 · 0 评论