分类：微信小程序

2020
09-30

微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

本文实例讲述了微信小程序实现上拉加载功能。分享给大家供大家参考，具体如下：开发需求进入页面，加载初始数据，当向上拖动页面至底部，自动加载新的数据，即上拉加载更多数据。演示index.wxml<!--数据列表--><viewwx:for="{{listdata}}"wx:key="listdata"class='listitem'><viewclass='title'>{{item.title}}</view><viewclass='title'>资源ID:{{item.id}}</view><imagesrc="{{item.coverimg}}"class='cover'></imag... 继续阅读 >

2020
09-29

微信小程序自定义联系人弹窗

微信小程序自定义类似微信联系人组件，供大家参考，具体内容如下在小程序项目中需要有一个选择人员项，想着看着好看一些，所以做成类似微信联系人的界面，由于本人是后端人员，效果不是特别好看，ui使用的是weui效果图如下：使用的是小程序自定义组件，自定义组件同样需要有js、wxss、json、wxml四个文件，如何使自定义的组件，需要在json文件中声明{"component":true}js文件中使用的Component构造器而不是Pge构造器，其中proper... 继续阅读 >

2020
09-29

微信小程序实现弹框效果

本文实例为大家分享了微信小程序实现弹框效果的具体代码，供大家参考，具体内容如下先上代码wxml部分：<viewclass='top'bindtap='powerDrawer'data-statu="open"data-num='300'><text>向上弹起</text></view><viewclass='top'bindtap='powerDrawer'data-statu="open"data-num='-300'><text>向下弹出</text></view><!--遮罩部分--><viewclass="drawer_screen"wx:if="{{showModalStatus}}"bindtap="powerDrawer"data-s... 继续阅读 >

2020
09-29

微信小程序自定义弹出层效果

本文实例为大家分享了微信小程序实现弹出层效果的具体代码，供大家参考，具体内容如下效果图WXML<viewclass='popup'wx:if="{{popShow}}"><viewclass='mask'catchtouchmove="preventTouchMove"catchtap='closePop'></view><!--弹出层--><viewclass='popup_main'id='popup_main'><!--关闭按钮--><viewclass='close_wrapper'><imageclass='close_icon'src='/images/select_icons/close.png'mode='widthFix... 继续阅读 >

2020
09-29

微信小程序实现带放大效果的轮播图

本文实例为大家分享了微信小程序实现带放大效果的轮播图，供大家参考，具体内容如下效果如图WXML<!--轮播图--><viewclass='Carousel'><viewclass="recommend"><viewclass="swiper-container"><swiperclass="swiper"autoplay="auto"interval="2000"duration="500"bindchange="swiperChange"previous-margin="40px"next-margin="40px"circular="true"><blockwx:for="{{slider}}"wx:key="unique"><swiper-... 继续阅读 >

2020
09-29

微信小程序使用GoEasy实现websocket实时通讯

不需要下载安装，便可以在微信好友、微信群之间快速的转发，用户只需要扫码或者在微信里点击，就可以立即运行，有着近似APP的用户体验，使得微信小程序成为全民热爱的好东西~同时因为微信小程序使用的是Javascript语法，对前端开发人员而言，几乎是没有学习成本和技术门槛的。对于大部分场景，都可以使用小程序快速开发实现，不论是开发周期还是开发成本都低的让人笑哭，所以受到了技术开发团队的各种追捧~但如果要在小程序里快速... 继续阅读 >

2020
09-29

微信小程序 获取手机号 JavaScript解密示例代码详解

当我们在开发微信小程序中，有一个常用的功能，就是获取用户的手机号，然后一键登入小程序，那么手机号如何获取呢？请认真看完本文，保证可以获取到用户的手机号。刚开始开发微信小程序的时候，想着实现手机验证码登入，后来查阅资料得知，发给用户的短信是要自己付费的。后来想想，微信获取用户的手机号一样可以保证手机号码的真实性，因为手机号既然可以绑定微信，那么肯定是被严格核验过的，然后就开始了获取手机号之旅，网上教... 继续阅读 >

2020
09-28

微信小程序中使用 async/await的方法实例分析

本文实例讲述了微信小程序中使用asyncawait的方法。分享给大家供大家参考，具体如下：微信小程序中有大量接口是异步调用，比如wx.login()、wx.request()、wx.getUserInfo()等，都是使用一个对象作为参数，并定义了success()、fail()和complete()作为异步调用不同情况下的回调。但是，以回调的方式来写程序，真的很伤，如果有一个过程需要依次干这些事情：wx.getStorage()获取缓存数据，检查登录状态wx.getSetting()... 继续阅读 >

2020
09-27

微信小程序实现滑动操作代码

前言本文使用动画组件wx.createAnimation来实现滑动操作：1.左滑动显示操作项区域；2.点击操作项触发相应方法；3.右滑动和点击行收起操作项；4.点击“删除”并确定则删除该条数据。最终效果如下：实现过程1.文件index.wxml和index.wxss代码如下，这一块比较简单，可自行查看，不做过多分析；Tips：“详情”、“取号”和“删除”点击触发使用catchtap，阻止冒泡事件向上冒泡；<viewclass="wrapper"><viewclass="container"... 继续阅读 >

2020
09-27

微信小程序仿通讯录功能

本文实例为大家分享了微信小程序实现通讯录功能的具体代码，供大家参考，具体内容如下微信小程序模仿通讯录功能需要用到scroll-view标签思路：首先需要获取到你所需要展示的数据样式的高度(这就需要用到微信给我们提供的一个API来完成了，因为小程序是没有DOM树结构的，这个可以去看我的前一篇里面有详细的记载怎么获取想要的元素的宽高。)，然后组合成一个高度数组(便于后面根据这个数组进行判断)，再获取滚动距离，用这两个比较... 继续阅读 >

2020
09-24

微信小程序间使用navigator跳转传值问题实例分析

本文实例讲述了微信小程序间使用navigator跳转传值问题。分享给大家供大家参考，具体如下：前言这次讲一下我用navigator组件实现从一个小程序跳转到另一个小程序的过程中遇到的问题。extra-data如何构建由于上网查资料得知extra-data是json格式。那么就不能在HTML属性中直接写。那么剩下只有在JS里构建了。首先在HTML里，绑定extra-data的值到extra变量<navigatorclass="navi"url=""target="miniProgram"app-i... 继续阅读 >

2020
09-24

微信小程序自定义纯净模态框（弹出框）的实例代码

由于官方API提供的模态框只能显示简单的文字，但是在实际应用场景中，我们需要模态框上能够显示各种各样的组件和样式，所以，以此为基础模拟出一套可以供大家自定义的纯净版的模态框，满足大家各式各样的需求。效果图：WXML:<viewclass="modal-mask"bindtap="hideModal"catchtouchmove="preventTouchMove"hidden="{{!showModal}}"></view><viewclass="modal-dialog"hidden="{{!showModal}}">这一块区域为弹出框内容区域，根... 继续阅读 >

2020
09-24

微信小程序 wx.getUserInfo引导用户授权问题实例分析

本文实例讲述了微信小程序wx.getUserInfo引导用户授权问题。分享给大家供大家参考，具体如下：首先，在page外定义一个函数用户判断是否为空对象varisEmptyObject=function(e){vartemp;for(tempine)return!1;return!0}然后，在page中的onload里面调用授权onLoad:function(){varthat=this;if(app.globalData.userInfo){this.setData({userInfo:app.globalData.userInfo})}elseif(this.... 继续阅读 >

2018
08-28

小程序开发实践总结 - WEB前端

从微信发布小程序以来，各大公司纷纷跟进都想从微信这个流量池里捞一杯羹。我司也不例外，我们整个前端团队这半年来基本上都是在开发小程序。前前后后也开发了四五个小程序了。总觉得要留下点什么，既是记录那些年我们踩过的坑，也是希望大家别再掉坑。那些年我们踩过的坑css样式不能引用本地图片资源，只能引用线上资源( background-image )，引用本地图片资源只能用 <image> 标签。{{}... 继续阅读 >

2018
07-31

微信小程序适配 iPhone X 总结

本文主要介绍我们的知识小集小程序在适配iPhoneX屏幕时遇到的一些问题以及总结，希望对你的小程序开发能有所帮助。iPhoneX屏幕数据在去年9月份iPhoneX正式发布后，引发了一波iOSApp适配iPhoneX的热潮和技术文章，详情可以参考掘金技术社区的这个专题：《iPhoneX适配实践》我们这里先简单总结一下iPhoneX屏幕的基础数据，方便后续在小程序开发中进行适配。屏幕尺寸：5.8英寸（对角... 继续阅读 >

2018
05-07

从源码看微信小程序启动过程

一、写作背景接触小程序一年多，真实体验就是小程序开发门槛相对而言确实比较低。不过小程序的开发方式，一直是开发者吐槽的，如习惯了Vue，React开发的开发者经常会吐槽小程序一个Page必须由多个文件组成，组件化支持不完善或者说不能非常愉快的开发组件。在以前小项目中没太大感觉，从加入有赞，参与有赞微商城小程序的开发，是真切的体会到对于大型小程序项目开发的复杂性。有赞从微信小程序内测就开始开发小程... 继续阅读 >