微信小程序实现日历签到
近日做了一个项目需要用到日历插件，在网上找了一部分感觉跟项目不对口，所以就查考了其他的日历插件做了一个。需求：如图：代码如下：index.wxml:<!--pages/pictruesign/pictrue.wxml--><view class='gs_banner'> <image src='../../image/banner.jpg'></image> <view class='gs_continue'> <view>每日坚持签到</view> <view>总共签...
2024-01-10
微信小程序异步处理详解
本文实例为大家分享了微信小程序异步处理的具体方法，供大家参考，具体内容如下直接看问题：然后看打印的结果：根据上面两图可以看出，代码上先执行的网络请求，再执行打印的变量，但是从下面打印的结果来看，先出结果的是执行打印变量的函数（aafn函数），再打印出网络请求success的回...
2024-01-10微信小程序实现折叠面板
本文实例为大家分享了微信小程序MUI折叠面板的具体代码，供大家参考，具体内容如下实现原理通过控制详情部分的显示隐藏，来实现折叠效果，同时切换右侧向下箭头。效果图WXML<!--pages/accordion/accordion.wxml--><view class="tui-accordion-content"> <view class="tui-menu-list {{isShowFrom1 ? 'tui-shangjiantou' : 'tui-xiajianto...
2024-01-10
微信小程序实现底部弹出框
微信小程序的底部弹出框，供大家参考，具体内容如下wxml<!-- 弹出框 start --><view class="dialog_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view><view animation="{{animationData}}" class="dialog_attr_box" wx:if="{{showModalStatus}}"> <view style='background:white;position...
2024-01-10
微信小程序--Ble蓝牙
有一段时间没有。没有写关于小程序的文章了。3月28日，微信的api又一次新的更新。期待已久的蓝牙api更新。就开始撸一番。源码地址1.简述蓝牙适配器接口是基础库版本 1.1.0 开始支持。iOS 微信客户端 6.5.6 版本开始支持，Android 客户端暂不支持蓝牙总共增加了18个api接口。2.Api分类搜索类连接类...
2024-01-10微信小程序实现订单倒计时
本文实例为大家分享了微信小程序实现订单倒计时的具体代码，供大家参考，具体内容如下之前在做一个有拼团功能项目的时候遇到过倒计时的问题，由于当时技术不熟在这方面耽搁了好些时间，所以这里整理出来希望能为后来人提供些许启发。1.实现思路求出发起拼团时间与拼团结束时间的时间差...
2024-01-10
微信小程序实现九宫格效果
本文实例为大家分享了微信小程序实现九宫格效果的具体代码，供大家参考，具体内容如下1.九宫格实现示例图： Tips: 说明：使用 display: -webkit-flex;对布局做兼容。保证每排三个图标的两对对齐，采用：justify-content: space-between;属性。父元素必须设置 flex-wrap: wrap;属性进行换行，否则会在一排展示。...
2024-01-10微信小程序 条件渲染详解
1，wx.if在微信小程序中，小程序是使用wx.if="{{条件}}"来判断是否渲染该代码块，用法如下：<view wx.if="{{条件}}">True</view>也可以用wx.elif和wx.else来添加一个else块，事例如下：<view wx:if="{{a>1}}"> 1 </view><view wx:elif="{{a>2}}"> 2 </view><view wx:else> 3 </view>2，block wx:ifwx:if是一个控制属性，需要将它添加到标...
2024-01-10
微信小程序篇：Flex布局
前置准备工作微信小程序中经常会使用的布局这一块的知识点，如果没有一个完整的知识体系，在布局的时候，经常会出现错误使用的情况，只要你掌握这篇文章内的知识点，基本上能胜任所有的Flex布局。相比较其他文章，这个文章更侧重于开发中的实际运用。而且是以演进的角度来讲解各种布局的...
2024-01-10微信小程序实现蒙版弹窗效果
本文实例为大家分享了微信小程序实现蒙版弹窗效果的具体代码，供大家参考，具体内容如下<view class="modalDlg" wx:if="{{showModal}}"> <view class='close_mask' bindtap="close_mask">X</view> <input class='recharge_amount' type='text' placeholder='充值金额' maxlength="8" value='{{recharge_amount}}'></input> <...
2024-01-10微信小程序实现手势滑动效果
本文实例为大家分享了微信小程序实现手势滑动的具体代码，供大家参考，具体内容如下wxml:<view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view>index.js:var touchStartX = 0;//触摸时的原点 var touchStartY = 0;//触摸时的原点 var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑...
2024-01-10微信小程序（三）：网络请求
前文讲配置的时候我们说过，开发小程序时可以选择有 APPID 和 无 APPID ，两种方式。1. 当有APPID的情况下，进行网络通信，只能和指定的域名进行通信。如果没有进行配置，编译时会报如下错误：配置方法：设置域名 需要在微信公众平台的小程序中设置域名。在微信小程序的设置界面可以看到设...
2024-01-10微信小程序实现弹出菜单动画
微信小程序动画之弹出菜单，供大家参考，具体内容如下效果图js：Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTranspond: {}, animInput: {}, animCloud:{}, aninWrite:{}, }, //点击弹出 plus: function () { if (this.data.isPopping) { //缩回动画 this.popp(); this.set...
2024-01-10微信小程序实现星星评价效果
本文实例为大家分享了微信小程序实现星星评价效果的具体代码，供大家参考，具体内容如下代码实现wxml文件<!--pages/evaluatepage/evaluatepage.wxml--><view class='container'> <view class='evaluate_contant'> <!--外层循环控制有几个评价条目 --> <block wx:for='{{evaluate_contant}}' wx:key='' wx:for-index='idx'> <view class='eva...
2024-01-10微信小程序数据存储与取值详解
在小程序开发的过程，经常要需要这个页面输入的数据，在下一个页面中进行取值赋值。比如：在A页面input输入框，输入电话号码，点击添加。需要在B页面电话区域中，显示刚刚输入的电话号码。因为这是两个页面，就需要先存储，再取值。微信小程序提供了数据存储的API，wx.setStorage(OBJECT) 可以...
2024-01-10
微信小程序实现走马灯效果实例
前言日常开发中，我们经常会遇到文字横向循环滚动的效果，俗称走马灯，也是项目中经常会使用的一个功能。在网页web前端很常见，今天就介绍下小程序的实现方式，一种是用的css样式实现，另一种是运用小程序的动画功能实现。@keyframes 实现利用@keyframes的规则来实现，非常方便，只需要css样式...
2024-01-10微信小程序 网络通信实现详解
关于网络通信，这里我使用的是wx.request,官方代码示例如下:wx.request({ url: 'test.php', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) }})对于初学者而言，官方示例可能会看不怎么懂，所以我就以我自己当初项目...
2024-01-10
微信小程序请求前置的方法详解
问题因为我们有的页面是在onload中去请求数据回来再渲染视图，如果我们可以将请求数据这一步提前到小程序页面跳转前做，就可以早一点把数据请求回来，优化的效果取决于页面跳转所需的时间。需求需要一种请求前置方法充分利用跳转的时间，预先请求接口数据，但是要尽量减少对旧项目的改...
2024-01-10微信小程序 冒泡事件原理解析
在微信小程序的事件分为冒泡事件和非冒泡事件：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。WXML的冒泡事件列表：类型触发条件最低版本touchstart手指触摸动作开始 touchmove手指触摸后移动...
2024-01-10微信小程序实现圆形进度条动画
本文实例为大家分享了微信小程序动画之圆形进度条，供大家参考，具体内容如下上图：代码：js：//获取应用实例var app = getApp()var interval;var varName;var ctx = wx.createCanvasContext('canvasArcCir');Page({ data: { }, drawCircle: function () { clearInterval(varName); function drawArc(s, e) { ctx.setFillStyle('...
2024-01-10
微信小程序的线程架构【推荐】
小程序的线程架构每个小程序包含一个描述整体程序的app实例和多个描述页面的page。其中app由3个文件构成：app.json 公共配置文件app.wxss 公共样式文件app.js 主体逻辑文件page页面最多由4个文件构成：page.jason 页面配置page.wxml 页面结构page.wxss 页面样式page.js 页面主体逻辑app.js和page.js中包含小程序...
2024-01-10微信小程序网络封装(简单高效)
废话引言小程序虽然出世很久了，但一直没怎么接触到小程序开发。吉他兴趣班老师想弄一个小程序发布课程信息和打卡功能，作为IT一员就自愿加入了这个小程序开发小组中。虽然小程序面向的是前端工程师，但作为移动端程序猿感觉甚是友好，加上有点前端基础就更是觉得入手很easy啦。微信小程...
2024-01-10微信小程序实现下拉菜单切换效果
本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码，供大家参考，具体内容如下效果图：wxml：<!-- 下拉菜单 --> <view id="swiper-tab"> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="tabNav">{{first}} <i></i> </view> <view class="swiper-t...
2024-01-10微信小程序实现自上而下字幕滚动
本文实例为大家分享了微信小程序实现字幕滚动的具体代码，供大家参考，具体内容如下需求：实现框内的文字自下而上的自动循环滚动。解决方案：第一种方法：经查询，最一开始实现字幕滚动是使用的微信小程序的swiper组件，后来发现，使用swiper组件实现的效果类似于轮播图，不符合需求。...
2024-01-10
