大家好，我是程序员饭哥，一个前端码农，目前还在打怪升级中，希望自己成为全栈，另外也不想卷了，想做点有意思的事情。
本文技术上没啥深度，只是堆代码，没设计可言，比较适合新手。
今天带来一个能赚钱的国庆头像小程序。
文章主要包括以下几个内容，
- 应用介绍
- 核心功能实现和遇到的问题
- 盈利模式
- 运营思路
应用介绍
这个应用是一个头像合成的工具，之前十一假期的时候这类的小程序可是火了一把，当然很多人也赚了一笔。
另外本次开发也升级了一些功能，算是比较完整了。
1.优化整体布局
2.新增更多头像样式
3.新增自定头像功能(可自己上传照片)
4.升级获取微信头像能力，原来的getUserProfile又不能用了，定位了半天，结果是官方升级了。现在按照官方要求实现了
5.接入了广告，目前又3个广告。
6.增加了关于作者，更容易找到我
自定义头像
核心功能实现和遇到的问题
图片合成实现
利用canvas来实现，把我们的图片和国旗图片按照顺序绘制到canvas上，另外要保证国旗图片是透明的。另外canvas是只支持绘制本地图片，所以在使用前需要把图片下载到本地，两个图片的绘制要按照顺序来，第一个绘制完成后才能绘制第二个。
核心代码
//绘图
drawImg(headImg, index) {
let that = this
wx.showLoading({
title: '头像生成中...',
})
let promiseHead = new Promise((resolve, reject) => {
wx.getImageInfo({
src: headImg,
success(res) {
resolve(res)
},
fail(e) {
reject("调用失败head");
wx.hideLoading()
}
})
})
Promise.all([promiseHead]).then(promiseRes => {
let num = 1024
let width_userIcon = num
let x_userIcon = (num - (num)) / 2
let frameImgUrl = that.data.photo_bj_num[index];
const query = wx.createSelectorQuery()
query.select('#genimg')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d');
// 初始化画布大小
const dpr = wx.getWindowInfo().pixelRatio;
canvas.width = 1024 * dpr
canvas.height = 1024 * dpr
ctx.scale(dpr, dpr)
const bg1 = canvas.createImage();
const bg2 = canvas.createImage();
bg1.src = promiseRes[0].path;
bg1.onload = () => {
ctx.drawImage(bg1, x_userIcon, x_userIcon, width_userIcon, width_userIcon);
bg2.onload = () => {
ctx.drawImage(bg2, 0, 0, num, num);
}
bg2.src = frameImgUrl;
}
setTimeout(() => {
// 第一个参数为false，表示先清空画布再绘制
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: num,
height: num,
destWidth: num,
destHeight: num,
canvas,
quality: 1,
success(res) {
that.setData({
new_userImage: res.tempFilePath,
new_showuserImage: true,
userImage: headImg
})
wx.hideLoading()
},
fail(res) {
console.log("绘图错误：" + JSON.stringify(res));
wx.hideLoading();
}
}, that);
}, 1000);
})
}).catch(e => console.log(e));
}</code></pre><h3 id="item-0-4">获取微信头像问题</h3><p>之前获取微信头像使用<code>wx.getUserProfile</code>即可，当时搞了好久发现是官方已经放弃了这个api，有点坑了。</p><p>交互变成这样了。</p><p></p><p>昵称也不能一次性获取了。</p><p><strong>新的调用方式：</strong></p><pre><code> <button type="primary" size="mini" class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
微信头像(较模糊)
</button>
onChooseAvatar(e) {
const {avatarUrl} = e.detail;
console.log(avatarUrl)
}
</code></pre><h3 id="item-0-5">自定义头像</h3><p>上传图片，通过裁剪获得最终图片，然后返回首页进行合成。</p><p></p><p>图片裁剪后，返回上个页面自动进行合成，此时需要等页面元素渲染完后才能调用绘图方法。</p><h2 id="item-0-6">盈利模式</h2><p>主要靠的是在小程序上展示的广告来赚收益。 <br>1.目前有三个广告，一个是插屏广告、一个是 banner广告、还有一个激励广告。 <br>2.广告植入非常简单，插屏广告和banner广告都是简单用广告代码就可以，激励广告，需要有些简单的逻辑需要判断。 <br>不过已经写成通用的了，后面可以直接调用。 <br>3.目前我的小程序账号，已经突破了1000人，所以已经通过流量主的申请。</p><h2 id="item-0-7">如何运营</h2><p>运营思路我也想的差不多了 <br>1.制作成短视频，多平台发布，然后保留自己的小程序入口，一定要保障发的数量，理论上量大曝光就越大。 <br>2.vx内群发，朋友圈推广等，属于常规推广。 <br>3.着重要利用好，视频号，因为他可以直接关联公众号，然后我们公众号里就可以关联小程序，所以访问链路会短很多，效率会高很多。 <br>4.根据第三点，所以需要注册一个公众号。</p><h2 id="item-0-8">源码获取</h2><p>关注公众号『前端技术江湖』，回复关键词『十一小程序』获取源码。</p><h2 id="item-0-9">最后</h2><p>马上十一了，抓紧干起来，说不准哪个视频火了，也能带来一个大几千收入呢。</p>
