微信小程序实现国旗头像，国庆个性化头像
国庆头像小程序源码，带独立版后台同时可添加小程序跳转+流量主，所有改动均可后台添加+带搭建教程
快去挑选一个自己喜欢的国庆头像吧，只需简单两步即可制作自己专属国庆爱国头像！
第一步：找到小程序【云头像生成】
第二步：点击【云头像生成】，里面有多种国庆头像样式供选择，选择自己喜欢的国庆头像样式即可免费制作2022国庆头像
代码片段：
<template>
<view>
<maoeu-loading ref="loading"></maoeu-loading>
<view class="canvas"
><canvas
:style="[{ width: '400px' }, { height: '400px' }]"
canvas-id="firstCanvas"
id="firstCanvas"
></canvas
></view>
<view class="">
<image
src="https://XXXXX.XXX/image/guoqing.gif"
mode="widthFix"
style="width: 100%; height: 100%; position: fixed; top: 0"
></image>
</view>
<view
class="u-flex u-row-center"
style="position: relative; width: 750rpx"
:style="{ marginTop: top + 'px' }"
>
<image :src="topImg" style="width: 750rpx; height: 233rpx"></image>
</view>
<view class="newtext u-m-t-5" style="position: relative">
<text
class="text"
:class="'text' + (index + 1)"
v-for="(item, index) in biao"
:key="index"
>{{ item }}</text
>
</view>
<view class="mould u-p-20 u-m-t-50">
<view class="">
<u-tabs
:list="categoryList"
:is-scroll="true"
gutter="20"
:current="categoryCurrent"
active-color="#ff4747"
height="60"
:show-bar="false"
bg-color="rgba(0,0,0,0)"
@change="categoryChange"
></u-tabs>
</view>
<view class="u-p-t-20">
<scroll-view scroll-x style="height: 130rpx">
<view class="u-flex u-row-left u-col-center">
<view class="">ㅤ</view>
<view
class="tab"
:class="coverCurrent === index ? 'tab_active' : ''"
v-for="(item, index) in coverList"
:key="index"
@click="cheekClick(index)"
>
<image :src="item.image"></image>
</view>
<view class="">ㅤ</view>
</view>
</scroll-view>
</view>
</view>
<view
class="u-m-30 u-m-t-50 u-flex u-row-between u-col-center"
style="position: relative; width: 690rpx; height: 210px"
>
<view class="">
<image
:src="canvasUrl"
style="
position: absolute;
top: 0;
left: 0;
border-radius: 48rpx;
width: 210px;
height: 210px;
"
></image>
<image
:src="coverSrc"
style="
position: absolute;
top: 0;
left: 0;
border-radius: 48rpx;
width: 210px;
height: 210px;
"
></image>
</view>
<view class="u-flex-col u-row-around" style="height: 210px">
<!-- #ifdef MP-WEIXIN -->
<view
class="btn btn_zailai"
hover-stay-time="80"
hover-class="class2"
@click="getUserInfo"
>获取头像</view
>
<!-- #endif -->
<!-- #ifdef MP-QQ -->
<view
class="btn btn_zailai"
hover-sta1y-time="80"
hover-class="class2"
style="position: relative"
>
获取头像
<button
open-type="getUserInfo"
@getuserinfo="getUserInfo"
style="
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
"
/>
</view>
<!-- #endif -->
<view
class="btn btn_zailai"
hover-stay-time="80"
hover-class="class2"
@click="getPhoto"
>相册/拍照</view
>
<view
class="btn btn_zailai"
hover-stay-time="80"
hover-class="class2"
@click="uoloadImage"
>本地挂件</view
>
<view
class="btn btn_custom"
hover-stay-time="80"
hover-class="class2"
@click="saveCanvas"
>保存头像</view
>
</view>
</view>
<view
class="u-flex u-row-between u-p-l-30 u-p-r-30 u-p-t-10"
style="position: relative"
>
<view
class="btn btn_share"
hover-stay-time="100"
hover-class="class2"
v-if="config.share_flag === 1"
style="position: relative"
>
发给朋友
<button
open-type="share"
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
"
></button>
</view>
<!-- <view class="btn btn_share" hover-stay-time="100" hover-class="class2" v-if="config.gzh_flag === 1" @click="gzhClick">关注公众号</view> -->
<view
class="btn btn_gzh"
hover-stay-time="100"
hover-class="class2"
v-if="config.custom1_flag === 1"
@click="custom1Click"
>{{ config.custom1_name }}</view
>
<view
class="btn btn_meituan"
hover-stay-time="100"
hover-class="class2"
v-if="config.custom2_flag === 1"
@click="custom2Click"
>{{ config.custom2_name }}</view
>
<view
class="btn btn_eleme"
hover-stay-time="100"
hover-class="class2"
v-if="config.custom3_flag === 1"
@click="custom3Click"
>{{ config.custom3_name }}</view
>
<!-- <view class="btn btn_gzh" hover-stay-time="100" hover-class='class2' v-if="config.gzh_flag === 1" @click="gzhClick">关注公众号</view> -->
</view>
<!-- #ifdef MP-QQ -->
<view
class="u-m-l-30 u-m-r-30 u-p-t-40 u-m-b-50"
style="position: relative"
v-if="config.qq_advert_ban"
>
<ad :unit-id="config.qq_advert_ban"></ad>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view
class="u-m-l-30 u-m-r-30 u-p-t-40 u-m-b-50"
style="position: relative"
v-if="config.wx_advert_ban"
>
<ad :unit-id="config.wx_advert_ban"></ad>
</view>
<!-- #endif -->
</view>
</template>
<script>
var interstitialAd = null;
let context = null;
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
let systemInfo = uni.getSystemInfoSync();
// px转换到rpx的比例
let pxToRpxScale = 750 / systemInfo.windowWidth;
// 状态栏的高度
let ktxStatusHeight = systemInfo.statusBarHeight * pxToRpxScale;
// 导航栏的高度
let navigationHeight = 44 * pxToRpxScale;
// 总高度
let navHeight = ktxStatusHeight + navigationHeight;
export default {
data() {
return {
top: menuButtonInfo.bottom,
navHeight: navHeight,
loadFlag: true,
canvasUrl: '/static/moren.png',
coverList: [],
coverCurrent: 0,
coverSrc: '',
categoryList: [],
categoryCurrent: 0,
config: {},
biao: [],
unitId: '',
topImg: '/static/tit.png',
mode: 'system'
};
},
onReady() {
let that = this;
context = uni.createCanvasContext('firstCanvas');
context.width = 400;
context.height = 400;
},
async onLoad() {
let that = this;
await that.getHome();
that.$refs.loading.closeLoading();
},
onShow() {
// if (interstitialAd) {
// interstitialAd.show().catch((err) => {
// console.error(err)
// })
// }
},
methods: {
async getHome() {
var that = this;
let data = await that.vk.callFunction({
url: 'client/wechat/list/pub/getHome'
});
if(!data.base){
uni.showToast({
icon: 'none',
mask: true,
title: '请在后台配置参数'
})
return
}else if(!data.cate){
uni.showToast({
icon: 'none',
mask: true,
title: '请再后台添加分类和作品'
})
return
}
that.config = data.base;
// 顶部图片
if(that.config.top_img) that.topImg = that.config.top_img
// 顶部标语
if (that.config.biao) {
that.biao = that.config.biao.split('');
}
// 分类
that.categoryList = data.cate;
that.coverList = that.categoryList[that.coverCurrent].cover;
this.coverSrc = that.coverList[that.coverCurrent].image
// 插屏广告
// #ifdef MP-QQ
if (uni.createInterstitialAd && that.config.qq_advert_cp) {
interstitialAd = uni.createInterstitialAd({
adUnitId: that.config.qq_advert_cp
});
// #endif
// #ifdef MP-WEIXIN
if (uni.createInterstitialAd && that.config.wx_advert_cp) {
interstitialAd = uni.createInterstitialAd({
adUnitId: that.config.wx_advert_cp
});
// #endif
interstitialAd.onLoad(() => {
if (interstitialAd) {
interstitialAd.show().catch(err => {
console.error(err);
});
}
});
//捕捉错误
interstitialAd.onError(err => {
console.log(err);
});
}
},
cheekClick(index) {
var that = this;
if (that.coverCurrent != index) {
that.coverCurrent = index;
that.coverSrc = that.coverList[index].image
that.mode = 'system'
}
},
categoryChange(index) {
var that = this;
that.categoryCurrent = index;
that.coverList = that.categoryList[that.categoryCurrent].cover;
that.coverCurrent = 0;
that.coverSrc = that.coverList[0].image
},
getPhoto() {
var that = this;
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
var canvasUrl = res.tempFilePaths[0];
uni.showLoading({
mask: true,
title: '图片检测中...'
})
wx.getFileSystemManager().readFile({
filePath: canvasUrl,
success: async res => {
let base64 = wx.arrayBufferToBase64(res.data);
let data = await that.vk.callFunction({
url: 'template/openapi/weixin/pub/imgSecCheck',
data: {
base64: base64
}
});
uni.hideLoading()
if(data.code === 0) that.canvasUrl = canvasUrl
},
fail: err => {
uni.hideLoading()
console.error(err);
}
});
}
});
},
custom1Click() {
var that = this;
if (that.config.custom1_mode == 0) {
uni.navigateToMiniProgram({
appId: that.config.custom1_appid,
path: that.config.custom1_path,
success(res) {}
});
} else if (that.config.custom1_mode == 1) {
uni.navigateTo({
url: '/pages/link/link?url=' + that.config.custom1_url
});
}
},
custom2Click() {
var that = this;
if (that.config.custom2_mode == 0) {
uni.navigateToMiniProgram({
appId: that.config.custom2_appid,
path: that.config.custom2_path,
success(res) {}
});
} else if (that.config.custom2_mode == 1) {
uni.navigateTo({
url: '/pages/link/link?url=' + that.config.custom2_url
});
}
},
custom3Click() {
var that = this;
if (that.config.custom3_mode == 0) {
uni.navigateToMiniProgram({
appId: that.config.custom3_appid,
path: that.config.custom3_path,
success(res) {}
});
} else if (that.config.custom3_mode == 1) {
uni.navigateTo({
url: '/pages/link/link?url=' + that.config.custom3_url
});
}
},
gzhClick() {
var that = this;
uni.navigateTo({
url: '/pages/link/link?url=' + that.config.gzh_url
});
},
saveAvatar() {
var that = this;
uni.showLoading({
mask: true,
title: '保存中...'
});
uni.getImageInfo({
src: that.canvasUrl,
success: function(image) {
var canvasUrl = image.path;
uni.downloadFile({
url: that.coverSrc,
success: function(res) {
uni.getSavedFileList({
success: function(res) {
if (res.fileList.length > 0) {
uni.removeSavedFile({
filePath: res.fileList[0].filePath,
complete: function(res) {
console.log(res);
}
});
}
}
});
var coverUrl = res.tempFilePath;
context.drawImage(canvasUrl, 0, 0, 400, 400);
context.drawImage(coverUrl, 0, 0, 400, 400);
context.draw();
setTimeout(function() {
uni.canvasToTempFilePath({
fileType: 'jpg',
canvasId: 'firstCanvas',
success: function(res) {
that.downFile(res.tempFilePath);
}
});
}, 300);
}
});
}
});
},
saveAvatarByCustom() {
var that = this;
uni.showLoading({
mask: true,
title: '保存中...'
});
uni.getImageInfo({
src: that.canvasUrl,
success: function(image) {
var canvasUrl = image.path;
var coverUrl = that.coverSrc;
context.drawImage(canvasUrl, 0, 0, 400, 400);
context.drawImage(coverUrl, 0, 0, 400, 400);
context.draw();
setTimeout(function() {
uni.canvasToTempFilePath({
fileType: 'jpg',
canvasId: 'firstCanvas',
success: function(res) {
that.downFile(res.tempFilePath);
}
});
}, 300);
}
});
},
saveCanvas() {
if (this.mode === 'system') {
this.saveAvatar()
} else if (this.mode === 'custom') {
this.saveAvatarByCustom()
}
},
downFile(url) {
var that = this;
//图片保存到本地相册
uni.saveImageToPhotosAlbum({
filePath: url,
//授权成功，保存图片
success: function(data) {
uni.hideLoading();
// #ifdef MP-QQ
const qqBan = that.config.qq_advert_ban
let qqBanUrl = ''
if (qqBan) {
qqBanUrl = '&unitId=' + qqBan
}
uni.navigateTo({
url: '/pages/detail/detail?url=' + url + qqBanUrl
});
// #endif
// #ifdef MP-WEIXIN
const wxBan = that.config.wx_advert_ban
let wxBanUrl = ''
if (wxBan) {
wxBanUrl = '&unitId=' + wxBan
}
uni.navigateTo({
url: '/pages/detail/detail?url=' + url + wxBanUrl
});
// #endif
},
//授权失败
fail: function(err) {
if (err.errMsg) {
//重新授权弹框确认
uni.showModal({
title: '提示',
content: '无权限，请打开下载权限后再试！',
showCancel: false,
success(res) {
if (res.confirm) {
//重新授权弹框用户点击了确定
uni.openSetting({
//进入小程序授权设置页面
success(settingdata) {
if (settingdata.authSetting['scope.writePhotosAlbum']) {
//用户打开了保存图片授权开关
uni.saveImageToPhotosAlbum({
filePath: url,
success: function(data) {
uni.hideLoading();
// #ifdef MP-QQ
uni.navigateTo({
url: '/pages/detail/detail?url=' + url + '&unitId=' + that.config.qq_advert_ban
});
// #endif
// #ifdef MP-WEIXIN
uni.navigateTo({
url: '/pages/detail/detail?url=' + url + '&unitId=' + that.config.wx_advert_ban
});
// #endif
}
});
} else {
//用户未打开保存图片到相册的授权开关
uni.showModal({
title: '温馨提示',
content: '授权失败，请稍后重新获取',
showCancel: false
});
}
}
});
}
}
});
}
uni.hideLoading();
}
});
},
uoloadImage() {
var that = this;
uni.chooseImage({
count: 1,
sourceType: ['album'], //从相册选择
success: function (res) {
that.coverSrc = res.tempFilePaths[0]
that.coverCurrent = -1;
that.mode = 'custom'
}
})
},
// 登录
getUserInfo() {
var that = this;
// #ifdef MP-QQ
uni.getUserInfo({
provider: 'qq',
success: function (res) {
res.userInfo.avatarUrl = res.userInfo.avatarUrl.replace('/100', '/0');
// #endif
// #ifdef MP-WEIXIN
uni.getUserProfile({
desc: '更新您的个人信息',
success: (res) => {
res.userInfo.avatarUrl = res.userInfo.avatarUrl.replace('/132', '/0');
// #endif
// 成功后进行登录,获取code
uni.downloadFile({
url: res.userInfo.avatarUrl,
success: function(res) {
uni.getSavedFileList({
success: function(res) {
if (res.fileList.length > 0) {
uni.removeSavedFile({
filePath: res.fileList[0].filePath,
complete: function(res) {
console.log(res);
}
});
}
}
});
that.canvasUrl = res.tempFilePath;
}
});
},
fail(err) {
uni.showToast({
icon: 'none',
title: '授权失败',
duration: 1500
});
}
});
}
},
onShareAppMessage(res) {
const globalData = getApp().globalData;
return {
// title: '我刚刚换了上了国庆喜庆头像，你也赶紧来换个吧！',
// imageUrl: '/static/share_img.png',
title: globalData.shareText,
imageUrl: globalData.shareImg,
path: 'pages/index/index'
};
}
};
</script>
<style lang="scss">
.class2 {
position: relative;
top: 3rpx;
transform: scale(0.99);
}
.canvas {
position: absolute;
top: -20000rpx;
left: -10000rpx;
}
.mould {
width: calc(100% - 60rpx);
background: #ffffff;
border-radius: 24rpx;
position: relative;
margin: 30rpx;
}
.tab {
position: relative;
background-color: #ffffff;
margin-right: 30rpx;
border-radius: 16rpx;
border: 2rpx solid #f1f1f1;
box-shadow: 0px 3px 10px #efeff4;
image {
width: 110rpx;
height: 110rpx;
border-radius: 16rpx;
}
}
.tab_active {
border: 2rpx solid #ffe1e1;
box-shadow: 0px 3px 10px #ffe1e1;
}
.btn {
background: #fff;
width: 200rpx;
text-align: center;
line-height: 72rpx;
border-radius: 50rpx;
font-weight: 550;
color: #666666;
border: 1px solid #eeeeee;
box-shadow: 0px 2px 6px #8e8e8e2b;
}
.btn_zailai {
background-image: linear-gradient(to right, #ffffff, #e8e8e8);
color: #666666;
border: none;
box-shadow: 0px 4px 0px #e8e8e8 !important;
}
.btn_share {
background-image: linear-gradient(to right, #11e2d1, #36a8aa);
color: #ffffff;
border: none;
box-shadow: 0px 4px 0px #36a8aa !important;
}
.btn_custom {
background-image: linear-gradient(to right, #ffb477, #ff693c);
color: #ffffff;
border: none;
box-shadow: 0px 4px 0px #ff693c !important;
}
.btn_meituan {
background-image: linear-gradient(to right, #ffd500, #ffb300);
color: #ffffff;
border: none;
box-shadow: 0px 4px 0px #ffb300 !important;
}
.btn_eleme {
background: #007bff;
background-image: linear-gradient(to right, #00aaff, #007bff);
color: #ffffff;
border: none;
box-shadow: 0px 4px 0px #007bff !important;
}
.btn_gzh {
background: #ea00ff;
background-image: linear-gradient(to right, #ff65de, #ea00ff);
color: #ffffff;
border: none;
box-shadow: 0px 4px 0px #ea00ff !important;
}
.newtext {
position: relative;
left: 50%;
transform: translateX(-50%);
text-align: center;
text-transform: uppercase;
color: #ffe6bf;
white-space: nowrap;
}
.newtext .text {
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 700;
z-index: 10;
transition: 0.8s;
}
.newtext .text1 {
animation: jump 0.75s ease-in-out 1.2s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text2 {
animation: jump 0.75s ease-in-out 1.3s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text3 {
animation: jump 0.75s ease-in-out 1.4s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text4 {
animation: jump 0.75s ease-in-out 1.5s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text5 {
animation: jump 0.75s ease-in-out 1.6s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text6 {
animation: jump 0.75s ease-in-out 1.7s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text7 {
animation: jump 0.75s ease-in-out 1.8s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text8 {
animation: jump 0.75s ease-in-out 1.9s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text9 {
animation: jump 0.75s ease-in-out 2s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text10 {
animation: jump 0.75s ease-in-out 2.1s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text11 {
animation: jump 0.75s ease-in-out 2.2s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text12 {
animation: jump 0.75s ease-in-out 2.3s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text13 {
animation: jump 0.75s ease-in-out 2.4s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text14 {
animation: jump 0.75s ease-in-out 2.5s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text15 {
animation: jump 0.75s ease-in-out 2.6s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text16 {
animation: jump 0.75s ease-in-out 2.7s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text12 {
animation: jump 0.75s ease-in-out 2.8s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text17 {
animation: jump 0.75s ease-in-out 2.9s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text18 {
animation: jump 0.75s ease-in-out 3s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text19 {
animation: jump 0.75s ease-in-out 3.1s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.newtext .text20 {
animation: jump 0.75s ease-in-out 3.2s infinite normal forwards,
color 0.75s ease-in-out 3.5s 1 normal forwards;
}
@-webkit-keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-1px);
}
75% {
transform: translateY(1px);
}
100% {
transform: translateY(0);
}
}
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-1px);
}
75% {
transform: translateY(1px);
}
100% {
transform: translateY(0);
}
}
</style>
3277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
