我们生在红旗下,长在春风里。人民有信仰,国家有力量,民族有希望。目光所至皆为华夏,五星闪耀皆为信仰!愿以吾辈之青春,捍卫盛世之中华!
今年的10 月 1 日是第 72 个国庆节,盛世华诞,锦绣中国。相信大家一定在微信中看到有好友的头像是类似下图的效果。
渐变头像
给自己的头像加上了渐变国旗元素,其实原理也很简单,通过上传头像,使用canvas来画图,再给图像加一层遮罩,然后保存图片。
通过微信指数可以看到,有关国庆,头像关键字热度只增不减,手快的人已经开始引流开通广告主变现了。
微信指数
给大家分享一下「微信渐变国旗头像」的小程序,安卓和 iOS 都可以用。小程序不涉及后端,仅仅是一个前端小程序,所以无需域名服务器等。


小程序部署步骤

首先访问云盘,下载小程序源码:

注册小程序账号

如果你还未有小程序账号的,请前往微信公众平台 
申请注册一个小程序账号 ,没有企业资质的话,选个人开发就可以了,然后进行认证,记得取个好一点的名字和和做个好看的头像(这就相当于第一印象了),小程序类目选择为:工具→图片处理。

小程序后台设置

登录小程序后台选择左边栏目→开发→开发管理→开发者设置,这里能看到小程序Appid,待会导入源码的时候需要用到。

  • 开发者ID:AppID(小程序ID) wx512345*84

往下翻找到服务器域名栏,request合法域名和downloadFile合法域名,添加如下三个域名,否则无法正常使用。

微信开发者工具导入源码

下载微信开发者工具 ,导入下载好的头像小程序源码,首先修改为你刚刚申请的小程序Appid,在小程序管理后台可以查到。你可以参考视频导入成功后就可以看到界面了,

友盟+多平台小程序分析Appid

在友盟官网按照提示创建应用,拿到Appid,在Avatar_V2/common/main.js文件大概在32行左右的以下代码appKey中添加申请的友盟AppKey。

var r = t(a("e9c0")), l = t(a("66fd")), c = t(a("4f6d"));
        r.default.init({
            appKey: "这里填写你申请的友盟AppKey",
            // 友盟+多平台小程序分析AppKey:https://www.umeng.com/
            useOpenid: !1,
            autoGetOpenid: !1,
            debug: !0
        }), r.default.install = function(e) {
            e.prototype.$uma = r.default;

关于流量主广告

小程序开通流量主广告,需要累计独立访客(UV)不低于1000,你可以在小程序后台看到相关规则。流量主代码已注释,你可以在Avatar_V2/pages/editor/editor.wxml文件中第68行代码左右,取消注释修改你的流量主id。

<!-- <view class="ad-container data-v-400080d0">
        <ad binderror="__e" bindload="__e" class="data-v-400080d0"
            data-event-opts="{{[ [ 'load',[ [ 'bannerAdLoad',['$event'] ] ] ],[ 'error',[ [ 'bannerAdError',['$event'] ] ] ] ]}}"
            unitId="这里填写你的流量主Id"></ad>
    </view> -->

提交审核

如果不需要流量主广告或者其他跳转按钮功能,可以直接点击开发者工具右上角【上传】按钮,进入小程序后台的版本管理,将刚上传的开发版本进行提交审核即可。

如果途中有啥问题可以在评论区留言或者直接联系我哦。


  • Avatar_V2已在@APP比比版基础上做修改
  • 开源小程序仅作为个人学习使用
  • 请勿进行二次销售。
END
本文作者: 文章标题:最近很火的渐变头像微信小程序来了,内含教程源码
本文地址:https://plaidweb.cn/default/010.html
版权说明:若无注明,本文皆时光荏苒web原创,转载请保留文章出处。
最后修改:2022 年 06 月 18 日
感谢您的赞赏,将用于联合国儿童基金会及服务器维护