侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一 先看效果: wxml: <!--page/one/index.wxml--> <view class="page"> <view class="page-bottom"> <view class="page-content"> <view class=&

效果图如下: wxml代码: <view class="container"> <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for

微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡--> 详情查看 2.数据库设计分析 **所有表共有字段 *com ** [x] create_time 记录的创建时间 [x] update_time 记录最近的一次修改时间 动态表设计 circles_list 既然是仿朋友圈功能实现,那么数据实体必然包括 文字(主题内容) 和 图片. [x] co

锲子 微信小程序自定义左滑功能加上跳转,换成以往,左滑功能的逻辑一般是在js中实现,但在拖动方面,性能并不是那么的流畅.如今,官方新扩展了一套脚本语言wxs,在IOS设备上运行,性能会比JS快2~20倍,至于安卓上运行效率无差异. 构思 结合wxs,做左滑功能主要分为三个步骤:拖动开始=>拖动中=>拖动结束 让我们看看,这三个步骤需要做好哪些工作? 拖动开始 获取触发事件点的坐标数据 将坐标数据存到组件中,“拖动中”和“拖动结束”这两步骤要用上 拖动中 拿到拖动开始时存储的坐标数据 获取每一个

微信小程序开发平台刚刚开放了一个全新的功能:云开发. 简单地说就是将开发人员搭建微信小程序后端的成本再次降低,此文刚好在此产品公测时,来快速上手看看都有哪些方便开发者的功能更新. 微信小程序一直保持一个比较稳定的节奏进行功能的开放与更新,不激进但是又不怠慢,就一直像微信产品的节奏一样,而在生活中我们使用微信小程序的频率也慢慢高起来,如 KFC 自助点个餐.下单一些较冷门的商品等等. 而我给大家免费更新的「微信小程序开发视频教程」大纲也一直在修正与增加,从 40 集增加到 60 集,在云开发发布后

产品定位及功能介绍 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序注册 注册小程序帐号 在微信公众平台官网首页(mp.weixin.qq.com)点击右上角的"立即注册"按钮. 选择注册的帐号类型 选择"小程序",点击"查看类型区别"可查看不同类型帐号的区别和优势. 填写邮箱和密码 请填写未注册过公众平台.开放平台.企业号.未绑定个人号的邮箱. 激活邮箱 登录邮箱,查收激活邮件,点击

前言 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙,下面我就具体说一下小程序里微信支付的开发流程和注意点. 1.开通微信支付和微信商户号 这个过程就和开通服务号的微信支付过程一样,没有什么可以说的. 2.获得用户的openid 首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可以得到用户的code

就在昨天,微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜索功能的效果图 1.首页分类功能的实现 boxtwo方法(.js文件) boxtwo: function (e) { var index = parseInt(e.currentTarget.dataset.index) this.setData({ HomeIndex: index }) }, 当在首页点击 分类导航时,会触发这个方法,并传回当前点击时的ind

微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit="bindMobile"> <view class="form_group"> <text>手 机:</text> <input type=" name="data_phone" value="

云开发介绍 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥. 目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库 存储:在小程序前端直接上传/下

问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"

关于答题类,或者一些游戏环节的小程序需要用到时间进度条,改功能怎么实现看下面源码 <view class='out' style='margin-top:10px'> <view class='in' style='width:{{progressWidth}}%'></view> </view> <view class='caozuo'> <text>{{progressTime}}秒</text> <text b

使用: 1.导入组件 2.使用组件 3.数据传入 4. 获取数据(通过同步缓存,获取“choose”)- 发送到后端 点击下载:小程序-下拉组件.

<view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" wx:for="{{list}}" wx:key> <view class="content"> <view style="{{item.txtStyle}}" class='item'

<!-- 搜索 --> <view class="search"> <input class="search-box" placeholder='痘研商城' bindtap='goodsName'></input> <image src="{{staticImg}}index/iconSearch.png" class='question-mark'></image> <

<template> <view class="u-wrap"> <view class="u-search-box"> <view class="u-search-inner"> <u-icon name="search" color="#909399" :size="28"></u-icon> <text

action-sheet action-sheet是从底部弹出的选择菜单,子菜单通过action-sheet-item和action-sheet-cancel指定,action-sheet-item是菜单项,action-sheet-cancel顾名思义是取消隐藏菜单,我们可以通过为action-sheet-item添加bindtap来触发点击后作出的相应,点击action-sheet-cancel时会触发action-sheet的bindchange事件.可以在bindchange绑定的函数中

一.下拉刷新效果 假设页面为index文件,那么代码如下: index.json: { "enablePullDownRefresh": true } index.js: //下拉刷新 onPullDownRefresh: function () { wx.showNavigationBarLoading() //在标题栏中显示加载 //模拟加载 setTimeout(function () { // complete wx.hideNavigationBarLoading() //完

一.功能描述 实现日历功能 二. 代码实现 1. index.wxml <view class='wrap'> <view> <view class='date-show'> <view class='lt-arrow' bindtap='lastMonth'> <image src='/images/left_arrow.png' mode='aspectFit'></image> </view> {{year}}年{{

//JS data: { navNum:0, navList: [ { id: 1, name: '已预约' }, { id: 2, name: '已消费' }, { id: 3, name: '已取消' }, ], shopList0: [ { id: 1, image: '/imgs/news/class_1.png', coach: '张胜男', time: '2017-10-10 09:00-10:00', age: '11,12', adress: '浙江省,杭州市,余杭区,乔司镇,保

这是一个商品展示并能进行评论和答复的功能页面, 遇到的问题有: 分享功能没有办法将json数据写在地址中,只能传id来进行获取 这里必须新加一个状态用来判断是否显示x回复@x,因为我以前的判断这个依据是如果回复的人是楼主则不显示,后来发现如果楼主回复了你,你再想回复楼主的话就无法显示x回复@x,所以这里要加一个参数,所有回复的都是false,评论都是true,加上这个条件就能判断出你是单纯的评论还是回复了 <!--pages/wantDetail/wantDetail.wxml--> <