一个网站建设爱好者,技术交流,相互学习
当前位置:首页>>程序猿
微信小程序相关功能实现的笔记
发布时间:2022-09-09 11:27:21 栏目:程序猿 阅读量:2925 作者:webcms

最近自己开发了一个小程序下载抖音无水印视频的小工具,在这里记录一下相关功能代码;

1、激活朋友圈分享按钮,在onShow方法里面插入以下代码:

wx.showShareMenu({
    withShareTicket:true,
    menus:['shareAppMessage','shareTimeline']
    })

2、获取用户头像和昵称;

wx.getUserProfile({
          desc: '完善用户信息',  //这个必须要,不然报错
          success: (res) => {
               console.log(res.userInfo);
          } 
});

3、获取剪贴板的内容:

 wx.getClipboardData({
   success: function (res) { // 匹配地址
     let result = that.handleUrl(res.data);
     // 如果地址相同则不在显示
     if (result == that.data.value) {
       return;
     }
     wx.showModal({
       title: '检测到链接内容,是否粘贴?',
       content: result,   //这个地方会提示报错改成string格式就行
       showCancel: true, //是否显示取消按钮cancelText: "取消",//默认是“取消”
       cancelColor: '#8799a3', //取消文字的颜色
       confirmText: "粘贴", //默认是“确定”
       confirmColor: '#3385FF', //确定文字的颜色
       success: function (res) {
         if (!res.cancel) {
             that.setData({
                 value: result,  //赋值到输入框
              })
         }  
       },
     })
   },
   fail: function (res) {},
   complete: function (res) {},
 });

 下面这个方法是利用正则表达式匹配网址内容:

handleUrl(t) {
  var e = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
  return !!(t = t.match(e)) && t[0];
},

4、发起相册授权申请,在onload方法里面加入以下代码:

  //提前发起授权申请
    wx.authorize({
      scope: 'scope.writePhotosAlbum',
      success: res => {
      },
      fail: res => {
          wx.showToast({
              title: '拒绝授权后,请点击授权相册',
          })
      }
  })

5、保存视频到相册,在自定义方法里面使用:

 //视频保存到相册跟图片保存到相册使用方式相同
  //下载到本地,判断是否拥有权限
  wx.getSetting({
      withSubscriptions: true,
      success: res => {
          console.info(res.authSetting);
          if (res.authSetting['scope.writePhotosAlbum']) {
             const downloadTask = wx.downloadFile({
                  url: this.data.url,
                  success: res => {
                      //保存到相册
                      wx.saveVideoToPhotosAlbum({
                          filePath: res.tempFilePath,
                          success: res => {
                              wx.showToast({
                                title: "视频保存成功!",
                                duration: 2000
                              })
                          },
                          fail: res => {
                              wx.showToast({
                                  title: '保存失败',
                              })
                          }
                      })
                  }
              });
              downloadTask.onProgressUpdate((res)  =>  {
                if  (res.progress  >  100)  {
                    
                }  else  {
                  this.setData({
                     progress: res.progress
                   });
                 }
                });
          } else {
              wx.showModal({
                  cancelColor: 'cancelColor',
                  title: '提示',
                  content: '请开启相册访问权限',
                  success: res => {
                      if (res.confirm)
                          wx.openSetting({
                              withSubscriptions: true,
                          })
                  }
              })
          }
      }
  })

6、复制内容到剪贴板,在自定义方法里面加入下面代码即可:

wx.setClipboardData({
    data: this.data.url,   //设置需要复制的内容
    success: function(res) {
      wx.showToast({
        title: "复制成功!",
        duration: 1500
      })
    }
  });

7、微信小程序自定义标题栏(搜索框):

(1)首先在需要更改页面的json文件中入"navigationStyle":"custom" "usingComponents" 同级

 "navigationStyle":"custom"

如果需要整个项目所有页面都使用自定义标题栏,可以直接在app.json中的window中加入"navigationStyle":"custom",那么你整个项目都会使用自己自定义的标题栏了

8、实现动态绑定标题栏高度

因为手机各有差异,为了适配各种手机的顶部,常规的我们就需要获取标题栏的高度以此实现动态绑定高度,为了预防onLoad有时候不触发,我们直接在app.js的onLaunch的函数中加入代码:

onLaunch: function () {
        // 获取顶部栏信息
        wx.getSystemInfo({
            success: res => {
                //导航高度
                this.globalData.navHeight = res.statusBarHeight + 46;
            },
            fail(err) {
                console.log(err);
            }
        })
 }

直接获取高度,存放在与onLaunch同级

globalData:{
        userInfo:null,
        navHeight:0
      },

接着,在需要使用的页面的js文件中先获取app,加入代码

const App = getApp();//设立顶部栏高度

获取到App实例,在onLoad中把获取到的放在data同级,即可在wxml中动态绑定使用

onLoad: function (options) {
        //自定义头部方法
        this.setData({
          navH: App.globalData.navHeight
        });
      },

9.上传图片 后裁剪功能

  先上传图片:

//选择相册图片
 handleChooseImg:function(e){
     let that = this;
  wx.chooseMedia({ 
    count: 1,
    mediaType: ['image'],
    sourceType: ['album', 'camera'],
    success(res) {
      console.log("1:"+res.tempFiles[0].tempFilePath)
      if (wx.cropImage) {  
         // 做低版本兼容处理  ,低版本没有 wx,cropImage
         //   console.log('有:wx.cropImage')
       that.cropImage(res.tempFiles[0].tempFilePath,that);
      } else {
        // 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示
        console.log('没有:wx.cropImage')
       // 没有wx,cropImage,直接上传图片
     //   that.upimg(res.tempFiles[0].tempFilePath,that);
        }
      }
  })
 },

然后,弹出裁剪功能:

//裁剪图片
 cropImage:function(tempFilePath,that){
    wx.cropImage({
        src: tempFilePath, // 图片路径
        cropScale: '1:1', // 裁剪比例
        success(res){
          // console.log("2:"+res.tempFilePath);
           wx.saveFile({
            tempFilePath: res.tempFilePath,
            success(e){
              //  console.log(e);
                //console.log("3:"+e.savedFilePath);
              // upimg 只是一个上传图片到服务器的功能
                that.upimg(e.savedFilePath,that);
                that.setData({
                    upimg:e.savedFilePath,
                })
            }
          })
        }
      }) 
 },

评论:

IT视频教程
Copyright © web小工匠 保留所有权利. 渝ICP备15008469号 网站地图