微信小程序相关功能实现的笔记
发布时间:2022-09-09 11:27:21
栏目:程序猿
阅读量:3369
作者: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,
})
}
})
}
})
},
评论: