![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
文章平均质量分 86
半度℃温热
关注最新技术问题并持续维护更新
展开
-
微信小程序实现新闻轮播、禁止手动竖向滑动
效果图片WXML 在 swiper-item 上加入 catchtouchmove 方法,截获竖向滑动<view class="container"> <view class="news"> <image class="icon-news" src="/images/news.png"></image> <swiper class="swiper" autoplay circu原创 2020-12-29 16:04:06 · 1717 阅读 · 2 评论 -
微信小程序base64转为二维码、条形码图片
亲测可以显示Page({ data: { qrCodeUrl: null }, onLoad: function (options) { wx.hideShareMenu() // 禁止页面转发 }, onShow: function () { this.getQrCode() }, // 获取二维码 getQrCode() { wx.request({ url: '', data: {}, header: { 'c原创 2020-12-15 15:48:13 · 2148 阅读 · 1 评论 -
微信小程序中使用Echarts统计图
效果图下载github:https://github.com/ecomfe/echarts-for-weixin解压之后把 ec-canvas 文件拷贝到小程序项目中WXML<view class="container"> <view class="echarts"> <ec-canvas id="myChart" canvas-id="myChart" ec="{{ec}}"></ec-canvas> </view>原创 2020-11-05 10:43:57 · 6002 阅读 · 17 评论 -
微信小程序table表格自定义组件实现
效果属性属性类型默认值必填说明tabDataArray[ ]否数据源columnsArray[ ]是数据列settingObject{ }否自定义样式配置项columns属性类型默认值必填说明labelString是表格标题propArray是表格中需要展示的数据列onclickBooleanfalse否为某一列设置点击事件,若同时为多列设置了点击事件,则只有第一个生效原创 2020-10-22 17:16:22 · 11240 阅读 · 36 评论 -
微信小程序map自定义组件实现
效果 实际手机效果不会点击时突然闪一下,气泡弹窗也不会被其他坐标点挡住图片 鼠标放在图片上可以看到使用的图片名称子组件WXML<map id="map" setting="{{setting}}" markers="{{markers}}" bindmarkertap="markerTap" style="width: 100%; height: 100%;"><原创 2020-10-16 11:24:59 · 3868 阅读 · 2 评论 -
微信小程序实现tabs标签栏自定义组件
效果子组件WXML<view class="tabs"> <view class="tab-item" wx:for="{{tabList}}" wx:key="index" data-index="{{index}}" data-value="{{item}}" bindtap="changeTab"> <text class="tab-text {{currentIndex == index ? 'active'原创 2020-10-12 21:09:38 · 3142 阅读 · 4 评论 -
微信小程序中observer的详解
概述 observer 用于监听和响应任何属性和数据字段的变化。可以同时监听多个。一次 setData 最多触发每个监听器一次。同时也可以监听子数据字段效果原创 2020-09-29 20:55:21 · 13167 阅读 · 2 评论 -
微信小程序实现星级评价和效果展示
效果图片WXML<view class="container"> <view class="wrap"> <view class="item" wx:for="{{list}}" wx:key="index"> <view class="top"> <view class="img"> <image src="{{item.img[0]}}"原创 2020-09-26 16:10:28 · 2942 阅读 · 1 评论 -
微信小程序实现列表项左滑删除效果
效果图图片WXML<view class="container"> <!-- 收货地址 --> <view class="address"> <view class="left"> <view class="icon"> <image src="../../images/address.png"></image> </view>原创 2020-09-12 11:29:06 · 2021 阅读 · 0 评论 -
微信小程序实现上传图片功能
效果图WXML<view class="img-wrap"> <view class="txt">上传截图</view> <view class="imglist"> <view class="item" wx:for="{{imgs}}" wx:key="item"> <image src="{{item}}" alt=""></image> <view class='d原创 2020-09-10 11:51:12 · 15062 阅读 · 40 评论 -
微信小程序禁止转发和长按转发
禁止当前页面转发/** * 生命周期函数--监听页面加载 */onLoad: function (options) { wx.hideShareMenu() // 禁止页面转发}禁止当前页面长按转发 分享到个人时可以长按转发,分享到群聊里不能长按转发/** * 生命周期函数--监听页面加载 */onLoad: function (options) { wx.showShareMenu({ withShareTicket: true })},/** *原创 2020-09-05 18:29:30 · 10135 阅读 · 6 评论 -
微信小程序动态设置页面标题
JOSN文件里设置页面标题{ "navigationBarTitleText": "首页"}JS文件里动态设置页面标题 这里设置的标题会覆盖 JOSN 文件里的标题,最好去除 JOSN 文件里的标题/** * 生命周期函数--监听页面加载*/onLoad: function (options) { wx.setNavigationBarTitle({ title: '电影' })},...原创 2020-09-05 17:09:37 · 1868 阅读 · 0 评论 -
微信小程序发送短信验证码倒计时
效果图WXML文件<view class="container"> <view class="userinfo"> <image class="userinfo-avatar" src="../../images/timg.jpg" mode="cover"></image> <text class="userinfo-nickname">什么</text> </view> <view原创 2020-08-27 15:49:10 · 1436 阅读 · 0 评论 -
微信小程序列表项数据详情折叠效果
效果图WXML文件<view class="container"> <view class="wrap"> <view class="item" wx:for="{{list}}" wx:key="index"> <view class="top"> <view class="img"> <image src="{{item.img[0]}}"> &l原创 2020-08-15 15:56:06 · 2303 阅读 · 0 评论 -
微信小程序实现图片放大预览保存和滑动功能
效果图 右边是手机展示效果![在这里插入图片描述](https://img-blog.csdnimg.cn/20200814193808538.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4,size_16,color_FFFFFF,t_70 width=400x #pic_center)WXML文件&l原创 2020-08-14 19:44:39 · 2111 阅读 · 6 评论 -
微信小程序格式化日期的几种方式
效果图方式一wxml 文件<view class="container"> <view class="wrap"> <view class="item" wx:for="{{list}}" wx:key="index"> <view class="top"> <view class="img"> <image src="{{item.img[0]}}"></i原创 2020-08-14 16:18:16 · 14915 阅读 · 7 评论 -
微信小程序之生命周期的深度解析
效果图应用的生命周期// app.jsApp({ /** * 小程序首次被打开触发 */ onLaunch: function () { console.log('应用 - onLaunch,全局只触发一次') }, /** * 小程序初始化完成 / 从后台进入前台触发 */ onShow (options) { console.log('应用 - onShow,监听小程序显示,小程序从后台进入前台显示也会触发') }, /*原创 2020-08-13 19:22:58 · 1243 阅读 · 0 评论