小程序各种功能代码片段整理

*—

小程序注意事项：wxml的引号内的花括号旁边不要加多余的空格，有可能会影响js代码源码下载：https://github.com/ybx13579/xiaochengxu-jizan

—*

目录引导：

轮播功能小程序客服会话功能转发/分享功能小卡片设置获取微信用户的头像和名称(不弹窗的方法) 新页面跳转（子页面返回）更改单个页面顶部导航栏的名字 Canvas导出图片小程序弹窗提示 wx.showToast() 九宫格方式上传图片（预览并删除）底部导航小程序MD5加密写法（支持加密中文）锚点效果导航栏吸顶效果获取屏幕当前高度并赋值给某个view 图片裁剪功能解决分享出去的页面没有返回按钮的方法点击按钮返回上一页并传参 tab切换功能使用setData修改data中子对象的属性值小程序验证手机号、60秒验证码（正则）获取点击的列表的index

1、轮播功能

1234567891011121314151617181920212223

/* swiper { height: 421.5rpx; } */ swiper-item image { width: 100%; height: 100%; } .swiper-container{ width: 100%; position: relative; } .swiper-container .swiper{ height: 300rpx; } .swiper-container .swiper .img{ width: 100%; height: 100%; }

123456789101112131415161718

const app = getApp() Page({ data: { swiperCurrent: 0, indicatorDots: true, autoplay: true, interval: 3000,//自动切换时间间隔 duration: 800,//滑动动画时长 circular: true,//是否采用衔接滑动 imgUrls: [ '../../img/index/1.jpeg', '../../img/index/2.jpeg', '../../img/index/3.jpeg' ] }, //轮播图的切换事件 swiperChange: function (e) { this.setData({ swiperCurrent: e.detail.current }) //console.log(e.detail.current); }, //点击指示点切换 chuangEvent: function (e) { this.setData({ swiperCurrent: e.currentTarget.id }) }, //点击图片触发事件 swipclick: function (e) { console.log(this.data.swiperCurrent); wx.switchTab({ url: this.data.links[this.data.swiperCurrent] }) }, })

12345678910111213141516171819202122232425262728293031323334353637383940

2、小程序客服会话功能

<button class="kf_button" open-type="contact" session-from="weapp"> 客服按钮 </button>123

微信平台 - 小程序绑定客服页面
微信平台 - 小程序客服会话窗口

3、转发/分享功能小卡片设置

<button data-name="shareBtn" open-type="share" plain="true">转发</button>1

PS：添加plain=”true”后button的边框样式可自定义 ↓ ↓

button[plain]{ border:0 } 123

//转发 onShareAppMessage: function (options) { 　　var that = this; 　　// 设置菜单中的转发按钮触发转发事件时的转发内容　　var shareObj = { 　　　　title: "这是一个标题！", // 默认是小程序的名称(可以写slogan等) 　　　　//path: '/page/index/index/user?id=123', // 默认是当前页面，必须是以‘/’开头的完整路径 imageUrl: '../../img/xiaochengxu-share.jpg', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 　　　　success: function (res) { 　　　　　　// 转发成功之后的回调　　　　　　if (res.errMsg == 'shareAppMessage:ok') { 　　　　　　} 　　　　}, 　　　　fail: function (res) { 　　　　　　// 转发失败之后的回调　　　　　　if (res.errMsg == 'shareAppMessage:fail cancel') { 　　　　　　　　// 用户取消转发 console.log("用户取消转发"); 　　　　　　} else if (res.errMsg == 'shareAppMessage:fail') { 　　　　　　　　

1234567891011121314151617181920212223

小程序各种功能代码片段整理