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

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

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

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

第二步：点击【云头像生成】，里面有多种国庆头像样式供选择，选择自己喜欢的国庆头像样式即可免费制作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=""><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"><!-- #ifdef MP-WEIXIN --><viewclass="btn btn_zailai"hover-stay-time="80"hover-class="class2"@click="getUserInfo">获取头像</view><!-- #endif --><!-- #ifdef MP-QQ --><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><!-- #endif --><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><!-- <view class="btn btn_share" hover-stay-time="100" hover-class="class2" v-if="config.gzh_flag === 1" @click="gzhClick">关注公众号</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 class="btn btn_gzh" hover-stay-time="100" hover-class='class2' v-if="config.gzh_flag === 1" @click="gzhClick">关注公众号</view> --></view><!-- #ifdef MP-QQ --><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><!-- #endif --><!-- #ifdef MP-WEIXIN --><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><!-- #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-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>

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

壁纸小程序源码，支持图片搜索，下载，分享，可对接流量主
很多小伙伴都喜欢给自己的博客站,搞一个小程序,让用户能方便访问.为什么小程序如此受青睐呢?因为小程序与APP的直接区别就是,我能在微信上直接得到我想要东西,比如看文章,下载壁纸,而不用繁琐的去下载AP ...
多功能微信小程序源码下载王者荣耀在线起名战力查询等支持多流量主
这是一款由多个功能组合而成的一款微信小程序源码每一个功能基本都是常用热门的功能比如大家熟悉的有: 王者荣耀在线起名王者荣耀战力查询每日早报电话号码昵称特殊符号大全情话狗狗大全猫猫大全 ...
【微信小程序源码】独立版云贝餐饮连锁V2_2.3.9源码线传小程序，新增堂食订单，支付打印新增下单时间显示
[全端小程序]云贝餐饮连锁V2独立版V2.3.9餐饮小程序,优化商户到款到零钱! 云贝餐饮连锁版主要基于目前比较流行小程序生态下的自助点单系统 .通过云贝餐饮连锁版系统,让中小型餐饮商家为用户提供了便 ...
小程序源码：修复登录接口版最新知识付费变现小程序源码下载-独立后台版本
这个小程序是干什么的? 资源分享小程序为网络资源分享类自媒体解决变现与传播问题,小小的资源,要钱不合适,不要钱又不能用爰发电,让用户分享又没有效果,那么我们就可以让用户打开小程序,看一段广告,直接获取 ...
修复登录接口版最新知识付费小程序源码下载-独立后台版本
ThinkPHP3.2+layui框架运行环境:php≥5.6+mysql....域名需配置ssl后才可以通过https访问后台安装 1.将源码上传至服务器首先修改数据库文件 Applicati ...
虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码
简介: 虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码网盘下载地址: http://www.zijiepan5.xyz/hNiChK2xwgy0 图片:
2022虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码
简介: 虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码网盘下载地址:https://qumaw.lanzoul.com/ioRp700i1fgb
2022年虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序
2022年虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序下载地址:
易校网校园综合跑腿小程序源码修复运营版
简介: 易校网校园综合跑腿小程序源码修复运营版,带服务端+客户端+前端+文档说明. 源码安装方法: 建的方法基本上一致,需要准备小程序服务号服务器备案域名校园网跑腿小程序源码需要准备 1.小 ...
微猫恋爱聊妹术V2 4.1.0 小程序源码-多开版-附安装教程
微猫恋爱聊妹术V2 4.1.0 小程序源码-多开版-附安装教程源码介绍: 一.后台: 1.全新独立后台大更新,让操作更简单! 2.新增智能客服消息功能: a.关键字客服消息支持多信息触发(已达官方最 ...

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

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

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

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

最新文章

热门文章