国庆头像小程序源码带独立版后台同时可添加小程序跳转+流量主所有改动均可后台添

微信小程序实现国旗头像，国庆个性化头像

国庆头像小程序源码，带独立版后台同时可添加小程序跳转+流量主，所有改动均可后台添加+带搭建教程

快去挑选一个自己喜欢的国庆头像吧，只需简单两步即可制作自己专属国庆爱国头像！

第一步：找到小程序【云头像生成】

第二步：点击【云头像生成】，里面有多种国庆头像样式供选择，选择自己喜欢的国庆头像样式即可免费制作国庆头像

代码片段：

<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=""><imagesrc="https://XXXXX.XXX/image/guoqing.gif"mode="widthFix"style="width: 100%; height: 100%; position: fixed; top: 0"></image></view><viewclass="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"><textclass="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><viewclass="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><viewclass="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"><viewclass="btn btn_zailai"hover-stay-time="80"hover-class="class2"@click="getUserInfo">获取头像</view><viewclass="btn btn_zailai"hover-sta1y-time="80"hover-class="class2"style="position: relative">获取头像<buttonopen-type="getUserInfo"@getuserinfo="getUserInfo"style="position: absolute;top: 0;width: 100%;height: 100%;opacity: 0;"/></view><viewclass="btn btn_zailai"hover-stay-time="80"hover-class="class2"@click="getPhoto">相册/拍照</view><viewclass="btn btn_zailai"hover-stay-time="80"hover-class="class2"@click="uoloadImage">本地挂件</view><viewclass="btn btn_custom"hover-stay-time="80"hover-class="class2"@click="saveCanvas">保存头像</view></view></view><viewclass="u-flex u-row-between u-p-l-30 u-p-r-30 u-p-t-10"style="position: relative"><viewclass="btn btn_share"hover-stay-time="100"hover-class="class2"v-if="config.share_flag === 1"style="position: relative">发给朋友<buttonopen-type="share"style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button></view><viewclass="btn btn_gzh"hover-stay-time="100"hover-class="class2"v-if="config.custom1_flag === 1"@click="custom1Click">{{ config.custom1_name }}</view><viewclass="btn btn_meituan"hover-stay-time="100"hover-class="class2"v-if="config.custom2_flag === 1"@click="custom2Click">{{ config.custom2_name }}</view><viewclass="btn btn_eleme"hover-stay-time="100"hover-class="class2"v-if="config.custom3_flag === 1"@click="custom3Click">{{ config.custom3_name }}</view></view><viewclass="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><viewclass="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></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-QQif (uni.createInterstitialAd && that.config.qq_advert_cp) {interstitialAd = uni.createInterstitialAd({adUnitId: that.config.qq_advert_cp});// #endif// #ifdef MP-WEIXINif (uni.createInterstitialAd && that.config.wx_advert_cp) {interstitialAd = uni.createInterstitialAd({adUnitId: that.config.wx_advert_cp});// #endifinterstitialAd.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].imagethat.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-QQconst qqBan = that.config.qq_advert_banlet qqBanUrl = ''if (qqBan) {qqBanUrl = '&unitId=' + qqBan}uni.navigateTo({url: '/pages/detail/detail?url=' + url + qqBanUrl});// #endif// #ifdef MP-WEIXINconst wxBan = that.config.wx_advert_banlet 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-QQuni.navigateTo({url: '/pages/detail/detail?url=' + url + '&unitId=' + that.config.qq_advert_ban});// #endif// #ifdef MP-WEIXINuni.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-QQuni.getUserInfo({provider: 'qq',success: function (res) {res.userInfo.avatarUrl = res.userInfo.avatarUrl.replace('/100', '/0');// #endif// #ifdef MP-WEIXINuni.getUserProfile({desc: '更新您的个人信息',success: (res) => {res.userInfo.avatarUrl = res.userInfo.avatarUrl.replace('/132', '/0');// #endif// 成功后进行登录,获取codeuni.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>

国庆头像小程序源码带独立版后台同时可添加小程序跳转+流量主所有改动均可后台添加+带搭建教程

国庆头像小程序源码 带独立版后台同时可添加小程序跳转+流量主 所有改动均可后台添

微信小程序实现国旗头像，国庆个性化头像

国庆头像小程序源码，带独立版后台同时可添加小程序跳转+流量主，所有改动均可后台添加+带搭建教程

国庆头像小程序源码带独立版后台同时可添加小程序跳转+流量主所有改动均可后台添