在上代码之前,微信小程序点击事件,长按事件的触发顺序需要我们了解一下下 事务分类 touchstart:手指触摸 longtap:手指触摸后后,超过350ms离开 touchend:手指触摸动作结束 tap:手指触摸后离开 事件 触发顺序 单击 touchstart → touchend → tap 长按 touchstart → longtap → touchend → tap 通过上表格可以发现,单击事件与长按事件的区别就在于 longtap事件,所以我们通过longtap事件进行区分.现在

微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{images}}"> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage

微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view class="header"> <view class="nav_i"> <text class="nav_tex">更多内容</text> </view> <view class="n

在微信小程序中要保存图片到本地相册,需要获取相册权限. 总之整个功能实现下来需要如下几个小程序的API:wx.getSetting,wx.authorize,wx.openSetting,wx.downloadFile,wx.saveImageToPhotosAlbum 但是在openSetting 和 downloadFile 会有坑! openSetting,[打开小程序设置页]有坑,是官方的问题,这里出现授权弹框,如果你点击拒绝再次引导授权流程弹框不会立马弹出(官方解释说因为频繁代用授权会

最近在研究微信小程序,被这个返回顶层给坑了一波,下面贴代码 wxml代码: <scroll-view scroll-y style="height: 1000rpx;" scroll-top="50" enable-back-to-top="true" scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun"> <blo

前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己的业务逻辑,可以看做一个独立的page页面.简单来说,如果只是展示,使用template就足够了,如果涉及到的业务逻辑交互比较多,那就最好使用component组件了. 一. template模板: 1. 模板创建: 建议单独创建template目录,在template目录中创建管理模板文件. 由于

业务场景 在微信中 小程序无法分享到朋友圈,目前大部分的解决方案都是,canvas动态绘制 生成图片后,保存到用户相册,用户进行分享照片到朋友圈,朋友圈打开图片后识别二维码进入小程序,达到分享目的 github源码链接 https://github.com/richard1015/canvas 微信IDE代码预览 https://developers.weixin.qq.com/s/DBZhf8mB7qaD 海报需求设计图分析 图1分析: 可以看到海报 要求宽750 高1218(当然了数据是动态

作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文件 data: { one:"block", //判断图片全屏前是否隐藏 ones:"none", //判断图片全屏后是否隐藏 phoneheight :" " , //按比例缩放后图片高 phoneWidth : " "  //

在小程序的点击事件中,我们经常使用这两个属性来传参,看起来效果一样,查了官方文档如下: target:事件源组件对象 currentTarget:当前组件对象 什么意思?我刚开始就有点不懂,那就直接上代码: <view id="outter" bindtap="tap1"> outer view <view id="middle" bindtap="tap2"> middle view <view

拿接口  有封装 封装查看另外的博文 点击动作 WXHTML 注意 data-xxxx自定义属性 这样知道我点的是哪个参数

wxml部分的代码   <view class="footer-r" bindtap="save"> <image src="../../../images/icons/zhiwen.svg" /> <view class="footer-r-t"> <text>点击保存到相册</text> <text class="t">享更多优惠&

类似这样的效果 <view class='helpCateList'> <!-- 类别 --> <scroll-view class='scroll-view' scroll-x="true"> <view class="item-content" wx:key="id" wx:for="{{helpCateList}}" wx:for-item="item">

SaveCard: function(e) { let that = this; console.log('保存'); var imgSrc = e.currentTarget.dataset.img; //获取相册授权 wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success()

首先说一下场景:我所循环的数据是对象数组,设置了一个属性当作标记,通过这个标记的值判断是否给改元素添加样式 wxml: <view> <view wx:for="{{list}}" wx:key="num" class="list" > <text bindtap='changColor' data-index='{{index}}' class='{{item.check?"text-active&quo

1.navigator 对应的 url 必须配置在app.json的pages中: 2.navigator 对应的 url 不能配置在"tabBar"的"list"里面了,负责无法跳转,因为tabBar的跳转需用switchTab进行:

WXML中: <view wx:if="{{orderstate}} = '待送检' " data-no="{{orderstate}}" bindtap="quxiaosongjian"> <view>取消送检</view> </view>   当前页面显示为待送检 js中: quxiaosongjian:function(e) { var that = this; var orderstate

<---------------------------------------------------index文件夹:---------------------------------------------------> wxml页面: <navigator url="{{item.url}}"> <view>………</view> </navigator >   js页面: Page({ data:{ slide: []

<view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='img' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image> </view> </view> Page({ /** * 页面的初始数据 */ data: { imgArr:[ 'http:

wx.setClipboardData({ data: '这是要复制的文字', success: function (res) { wx.showModal({ title: '提示', content: '复制成功', showCancel: false }); } }) copy(){ wx.setClipboardData({ data: this.order.orderCode, success: function (res) { wx.getClipboardData({ succes

wxml: data-参数名="值" bindtap="函数名" <view class="buy-button {{cap_select == 100 ? 'zp-active': ''}}" data-cap="100" bindtap="choose_cap"> <text>100ML \n (2两)</text> </view> JS: choose_

WXML: <view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='img' src='{{item}}' data-src='{{item}}' bindtap='previewImg'></image> </view> </view> WXSS: .imgList{ width: 100%; } .imgList .img