*—
- 小程序注意事项:wxml的引号内的花括号旁边不要加多余的空格,有可能会影响js代码
- 源码下载:https://github.com/ybx13579/xiaochengxu-jizan
—*
目录引导:
- 轮播功能
- 小程序客服会话功能
- 转发/分享功能 小卡片设置
- 获取微信用户的头像和名称(不弹窗的方法)
- 新页面跳转(子页面返回)
- 更改单个页面顶部导航栏的名字
- Canvas导出图片
- 小程序弹窗提示 wx.showToast()
- 九宫格方式上传图片(预览并删除)
- 底部导航
- 小程序MD5加密写法(支持加密中文)
- 锚点效果
- 导航栏吸顶效果
- 获取屏幕当前高度并赋值给某个view
- 图片裁剪功能
- 解决 分享出去的页面没有返回按钮的方法
- 点击按钮返回上一页并传参
- tab切换功能
- 使用setData修改data中子对象的属性值
- 小程序验证手机号、60秒验证码(正则)
- 获取点击的列表的index
1、轮播功能
<swiper indicator-dots="{
{
indicatorDots}}" autoplay="{
{
autoplay}}" interval="{
{
interval}}" duration="{
{
duration}}" circular="{
{
duration}}" current="{
{
swiperCurrent}}" bindchange="swiperChange" class="swiper">
<block wx:for="{
{
imgUrls}}" wx:key="unique">
<swiper-item>
<image src="{
{
item}}" class="img" bindtap="swipclick" />
</swiper-item>
</block>
</swiper>
/* 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%;
}
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]
})
},
})
2、小程序客服会话功能
<button class="kf_button" open-type="contact" session-from="weapp">
客服按钮
</button>
微信平台 - 小程序绑定客服页面
微信平台 - 小程序客服会话窗口
3、转发/分享功能 小卡片设置
<button data-name="shareBtn" open-type="share" plain="true">转发</button>
PS: 添加plain=”true”后button的边框样式可自定义 ↓ ↓
button[plain]{
border:0
}
//转发
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') {