小程序各种功能代码片段整理---持续更新

2023-11-21 17:25:28

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

目录引导：

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‘) {
          　　　　　　　　// 转发失败，其中 detail message 为详细失败信息
        　　　　　　}
      　　　　},
            complete: function(){
        　　　　　　// 转发结束之后的回调（转发成不成功都会执行）
      　　　　},
  　　};
  　　// 来自页面内的按钮的转发
  　　if(options.from == ‘button‘) {
    　　　　var eData = options.target.dataset;
    　　　　console.log(eData.name);     // shareBtn
    　　　　// 此处可以修改 shareObj 中的内容
    　　　　//shareObj.path = ‘/pages/btnname/btnname?btn_name=‘ + eData.name;
  　　}
　　// 返回shareObj
　　return shareObj;
},

4、获取微信用户的头像和名称(不弹窗的方法)

<view class=‘top‘>
    <open-data type="userAvatarUrl" class=‘tx‘></open-data>
    <open-data type="userNickName" class=‘name‘></open-data>
</view>

5、新页面跳转（子页面返回）

父页面直接写下边代码，子页面自动添加返回上一页功能

<navigator class=‘‘ url="/pages/index/index?id=123">点击跳转</navigator>

wx.showToast({
  title: ‘添加言语成功‘,
  icon: ‘success‘,
  duration: 1300, 
  success:function(){
    setTimeout(function () {
      //跳转到tabBar中的页面
      wx.switchTab({
        url: "../index/index"
      })
      //普通跳转
      wx.navigateTo({
        url: ‘/pages/myHome/index/index?swiperId=‘ + swiperId
      })
    }, 1500)
  }
})

6、更改单个页面顶部导航栏的名字

在要更改的页面的*.json写如下配置

{
  "navigationBarTitleText": "这是标题"
}

7、Canvas导出图片

微信官方有提供相应API
https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

saveToPhoto: function () {
    wx.canvasToTempFilePath({  
        x: 0,
        y: 0,
        width: 240,
        height: 240,
        destWidth: 240,
        destHeight: 240,
        canvasId: ‘ctx‘,
        success: function (res) {
            //canvas转图片成功回调
        }
    })
}

最后保存到相册

wx.saveImageToPhotosAlbum({
    filePath: res.tempFilePath,
}) 
wx.showToast({title: ‘保存成功‘})

8、小程序弹窗提示 wx.sho

wToast()

 // 1
wx.showToast({  
  title: ‘成功‘,  //标题  
  icon: ‘loading‘,  //图标，支持"success"、"loading"  
  mask: true,  //是否显示透明蒙层，防止触摸穿透，默认：false  
  image: ‘../image/img.png‘,  //自定义图标的本地路径，image 的优先级高于 icon  
  duration: 2000000, //提示的延迟时间，单位毫秒，默认：1500  
  success: function () { }, //接口调用成功的回调函数  
  fail: function () { },  //接口调用失败的回调函数  
  complete: function () { } //接口调用结束的回调函数  
})  
//  2
wx.showModal({
  title: ‘提示‘,
  content: ‘这是一个模态弹窗‘,
  success: function(res) {
    if (res.confirm) {
      console.log(‘用户点击确定‘)
    } else if (res.cancel) {
      console.log(‘用户点击取消‘)
    }
  }
})

9、九宫格方式上传图片（预览并删除）

多种上传方法：https://blog.csdn.net/YangBingX/article/details/80929404
wxml:

<view class="gallery">
    <view class="item" wx:for="{{images}}" wx:key="">
        <image src="{{item}}" data-src="{{item}}" bindtap="previewImage" mode="aspectFill" />

        <!-- 删除按钮 -->
        <view class="delete" bindtap="delete" data-index="{{index}}">X</view>
    </view>
    <view class="item" bindtap="chooseImage">
        <view class=‘addIcon‘>+</view>
    </view>
</view>
<button type="primary" bindtap="submit">提交</button>

wxss:

/* pages/index/index.wxss */
/*画廊*/
.gallery {    
  width:630rpx;
  margin: 0 auto;
  display: flex;    
  justify-content: flex-start;    
  flex-wrap: wrap;
}
/*每张图片所占容器*/
.item {    
  position: relative;    
  margin:10rpx 5rpx;
  width: 200rpx;
  height: 200rpx;
}
.item image{
  width: 100%;
  height: 100%;
}
/*add按钮*/
.item .addIcon{
  position:relative;
  width:200rpx;
  height:200rpx;
  text-align:center;
  line-height:200rpx;
  font-size:80rpx;
  background: #f2f2f2;
  color: #555;
}
/*删除按钮*/
.delete {    
  position:absolute;
  right:0;
  top:0;
  /* background:#ccc; */
  opacity:1;
  height: 36rpx;
  font-size:22rpx;
  font-weight:700;
  padding:0 8rpx 0 10rpx;
}

js:

var that;
Page({
  data: {
    images: [],
    uploadedImages: [],
    //imageWidth: getApp().screenWidth / 4 - 10
  },
  onLoad: function (options) {
    that = this; var objectId = options.objectId; console.log(objectId);
  },
  chooseImage: function () {
    // 选择图片
    wx.chooseImage({
      count: 3, // 默认9
      sizeType: [‘compressed‘],
      sourceType: [‘album‘, ‘camera‘],
      // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths);
        that.setData({
          images: that.data.images.concat(tempFilePaths)
        });
      }
    })
  },
  // 图片预览
  previewImage: function (e) {
    //console.log(this.data.images);
    var current = e.target.dataset.src
    wx.previewImage({
      current: current,
      urls: this.data.images
    })
  },
  // submit: function () {        
  //   // 提交图片，事先遍历图集数组
  //   that.data.images.forEach(function (tempFilePath) {
  //     new AV.File(‘file-name‘, {
  //       blob: {
  //         uri: tempFilePath,
  //       },
  //     }).save().then(                
  //       // file => console.log(file.url())
  //     function (file) {                    
  //       // 先读取
  //       var uploadedImages = that.data.uploadedImages;
  //       uploadedImages.push(file.url());                    
  //       // 再写入
  //       that.setData({
  //         uploadedImages: uploadedImages
  //       }); console.log(uploadedImages);
  //     }
  //     ).catch(console.error);
  //   });
  //   wx.showToast({
  //     title: ‘评价成功‘, success: function () {
  //       wx.navigateBack();
  //     }
  //   });
  // }, 
  delete: function (e) {
    var index = e.currentTarget.dataset.index; var images = that.data.images;
    images.splice(index, 1);
    that.setData({
      images: images
    });
  }
})

预览图：
小程序各种功能代码片段整理---持续更新

10、底部导航

TIP：注释仅供参考，如果报错请删掉注释（该文件中任何注释都会报错）
app.json中添加

"tabBar": {
    "color": "#cdcdcd", //为本未选中时候的颜色
    "selectedColor": "#ec6376", //为本选中时的颜色  
    "backgroundColor": "#eee", //背景
    "borderStyle": "#f3c4cb", //边框颜色  
    "list": [
      {
        "selectedIconPath": "img/icon12.png", //选中时的图标路径
        "iconPath": "img/icon11.png", //未选中的路径  
        "pagePath": "pages/index/index", //要加载的页面路径  
        "text": "首页" //显示的文本  
      },
      {
        "selectedIconPath": "img/icon22.png",
        "iconPath": "img/icon21.png",
        "pagePath": "pages/myHome/myHome",
        "text": "我的"
      }
    ]
  },

效果图：
小程序各种功能代码片段整理---持续更新

11、小程序MD5加密写法（支持加密中文）

md5.js文件下载地址：https://github.com/ybx13579/xiaochengxu-module/blob/master/md5.js
EG：

var MD5s = require(‘../../utils/md5.js‘)

Page({

  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var md = MD5s.md5("这是一段要被加密的话");
    console.log(md);  //802909e380455122f72d652ffaa1a4dc
  }
})

12、锚点效果

转
.wxml

<view class="list">
    <view bindtap=‘jumpTo‘ data-opt="list0">list0</view>
    <view bindtap=‘jumpTo‘ data-opt="list11">list11</view>
    <view bindtap=‘jumpTo‘ data-opt="list29">list29</view>
</view>


<scroll-view  scroll-into-view="{{toView}}"  scroll-y="true"   scroll-with-animation="true"   class="scr">
    <view wx:for="{{list}}"  id="{{item}}"  class="test">
      {{item}}
    </view>
</scroll-view>

.wxss代码

.scr{
    position: relative;
    height: 500rpx
}
.test{
    height: 80rpx;
}
.list{ position: fixed; z-index: 9; top:30rpx; right: 10rpx; }

.js代码

  data: {

    list: ["list0", "list1", "list2", "list3", "list4", "list5", "list11", "list12", "list13", "list14", "list15", "list25", "list26", "list27", "list28", "list29","list30"],
    toView: ‘‘
  },

  jumpTo: function (e) {

    // 获取标签元素上自定义的 data-opt 属性的值
    let target = e.currentTarget.dataset.opt;

    this.setData({
      toView: target
    })

  },

13、导航栏吸顶效果

转
1. 在需要监听的外部添加

<scroll-view style="height:100vh" class="scroll-view" scroll-y="true" bindscroll="scroll">

  <view class="{{scroll_height<‘150‘?‘barrage‘:‘barraging‘}}"> 
      <view class="swipwer">吸顶效果</view>
   </view>

</scroll-view>

判断不同的class名改变样式

/*样式  */
.barrage{
  width:100%;
  height:50rpx;
  margin-top:20rpx;
  position: relative;
}
.barraging{
  width:100%;
  height:50rpx;  
  position: fixed;
  left:0;
  top:0;
  z-index:100;
  margin-top:20rpx;
}
.barrage .swipwer{
  margin-left:24rpx;
  height:50rpx;
  line-height:50rpx; 
  background: rgba(0, 0, 0, 0.6);
  font-size:26rpx;
  text-align: center;
  color:#fff; 
  width:60%;
  border-radius:30rpx;
  position:absolute;
  left:-500rpx;

}
.barraging .swipwer{
  margin-left:24rpx;
  height:50rpx;
  line-height:50rpx; 
  background: rgba(0, 0, 0, 0.6);
  font-size:26rpx;
  text-align: center;
  color:#fff; 
  width:60%;
  border-radius:30rpx;
   position:absolute;
  left:-500rpx;
}

3、js

 //存储高度
  data: {   
    scroll_height:‘‘   
  },
 //滚动监听  
  scroll: function (e) {
    var that=this;
    // console.log(e.detail.scrollTop)
    that.setData({
      scroll_height: e.detail.scrollTop
    })  
  }，

这里我只用到了scroll滚动事件，根据自己业务需求即可，注意在最外层添加< scroll-view>< /scroll-view>就好

14、获取屏幕当前高度并赋值给某个view

<view  style="height:{{bodyHeight}}px"></view>

data: {

    bodyHeight:"",
  },


  onLoad: function (options) {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          bodyHeight: res.windowHeight//获取屏幕高度
        })
      },
    })
  },

15、图片裁剪功能

https://we-plugin.github.io/we-cropper/#/

小程序各种功能代码片段整理---持续更新

16、解决分享出去的页面没有返回按钮的方法

分享页JS：

onShareAppMessage: function (res) {
  if (res.from === ‘button‘) {
    // 来自页面内转发按钮
    console.log(res.target)
  }
  return {
    title: ‘自定义转发标题‘,
    path: ‘/pages/index/index?pageId=123‘,//这里在首页的地址后面添加我们需要传值的标识位pageId以及值123(pageId 这个名字你们可以自己随便乱取)
    success: function (res) {
      // 转发成功
    },
    fail: function (res) {
      // 转发失败
    }
  }
},

首页JS：

onLoad: function (options) {
  //判断是否是分享页面进来的人
  if (options.pageId) {
    //这个pageId的值存在则证明首页的开启来源于用户点击来首页,同时可以通过获取到的pageId的值跳转导航到对应的详情页
    wx.navigateTo({
      url: ‘../share/share?pageId=‘ + options.pageId,
    })
  }
},

17、点击按钮返回上一页并传参

方法2：从页面路由栈中直接获取和操作目标Page对象
这种方式，是通过调用小程序的API: getCurrentPages()，来获取当前页面路由栈的信息，这个路由栈中按照页面的路由顺序存放着相应的Page对象，我们可以很容易的获取到上一级页面的完整Page对象，从而使直接调用Page对象的属性和方法成为可能。

如下所示：（在第二页写↓）

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //当前页面
var prevPage = pages[pages.length - 2];  //上一个页面
//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
  mydata: {a:1, b:2}
})

上一页获取传来的参数值：

console.log(this.data.mydata)

18、tab切换功能

data: {
  currentData: 0
},
// tab切换
changeTab: function (e) {
  const that = this;
  console.log(e.currentTarget.dataset.current);
  that.setData({
    currentData: e.currentTarget.dataset.current
  })
},

<view class=‘‘>
  <view class=‘ {{currentData == 0 ? "active" : ""}}‘ data-current="0" bindtap=‘changeTab‘>
    <view>1tab1</view>
  </view>
  <view class=‘{{currentData == 1 ? "active" : ""}}‘ data-current="1" bindtap=‘changeTab‘>
    <view>2tab2</view>
  </view>
</view>
<view hidden=‘{{currentData != 0}}‘>1tab1‘s baby</view>
<view hidden=‘{{currentData != 1}}‘>2tab2‘s baby</view>

.active {
  color: #ff8a00;
}

19、使用setData修改data中子对象的属性值

1、使用字符串
2、中括号包裹起来
3、index使用拼接

var that = this;
var idx = e.currentTarget.dataset.index;
var newLikeState = ‘docShowList[‘ + idx +‘].is_up‘;
var up_nums = ‘docShowList[‘ + idx + ‘].up_nums‘;


that.setData({
   [newLikeState]: 1,
   [up_nums]: that.data.docShowList[idx].up_nums + 1
})

20、小程序验证手机号、60秒验证码（正则）

地址：https://blog.csdn.net/YangBingX/article/details/81172444#t1

21、获取点击的列表的index

<view bindtap=‘listFirst‘ wx:for=‘{{listImg}}‘ wx:key=‘‘ data-index="{{index}}">

console.log(e.currentTarget.dataset.index);

小程序各种功能代码片段整理---持续更新

码农公寓

目录引导：

1、轮播功能

2、小程序客服会话功能

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

4、获取微信用户的头像和名称(不弹窗的方法)

5、新页面跳转（子页面返回）

6、更改单个页面顶部导航栏的名字

7、Canvas导出图片

8、小程序弹窗提示 wx.sho

wToast()

9、九宫格方式上传图片（预览并删除）

10、底部导航

11、小程序MD5加密写法（支持加密中文）

12、锚点效果

13、导航栏吸顶效果

14、获取屏幕当前高度并赋值给某个view

15、图片裁剪功能

16、解决 分享出去的页面没有返回按钮的方法

17、点击按钮返回上一页并传参

18、tab切换功能

19、使用setData修改data中子对象的属性值

20、小程序验证手机号、60秒验证码（正则）

21、获取点击的列表的index

相关文章

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

16、解决分享出去的页面没有返回按钮的方法