共计 2525 个字符，预计需要花费 7 分钟才能阅读完成。
大家好，我是程序员饭哥，一个前端码农，目前还在打怪降级中，心愿本人成为全栈，另外也不想卷了，想做点有意思的事件。
本文技术上没啥深度，只是堆代码，没设计可言，比拟适宜老手。
明天带来一个能赚钱的国庆头像小程序。
文章次要包含以下几个内容，
- 利用介绍
- 外围性能实现和遇到的问题
- 盈利模式
- 经营思路
利用介绍
这个利用是一个头像合成的工具，之前十一假期的时候这类的小程序可是火了一把，当然很多人也赚了一笔。
另外本次开发也降级了一些性能，算是比拟残缺了。
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));
}获取微信头像问题
之前获取微信头像应用 wx.getUserProfile 即可，过后搞了良久发现是官网曾经放弃了这个 api，有点坑了。
交互变成这样了。
昵称也不能一次性获取了。
新的调用形式：
<button type="primary" size="mini" class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
微信头像(较含糊)
</button>
onChooseAvatar(e) {const {avatarUrl} = e.detail;
console.log(avatarUrl)
}
自定义头像
上传图片，通过裁剪取得最终图片，而后返回首页进行合成。
图片裁剪后，返回上个页面主动进行合成，此时须要等页面元素渲染完后能力调用绘图办法。
盈利模式
次要靠的是在小程序上展现的广告来赚收益。
1. 目前有三个广告，一个是插屏广告、一个是 banner 广告、还有一个激励广告。
2. 广告植入非常简单，插屏广告和 banner 广告都是简略用广告代码就能够，激励广告，须要有些简略的逻辑须要判断。
不过曾经写成通用的了，前面能够间接调用。
3. 目前我的小程序账号，曾经冲破了 1000 人，所以曾经通过流量主的申请。
如何经营
经营思路我也想的差不多了
1. 制作成短视频，多平台公布，而后保留本人的小程序入口，肯定要保障发的数量，实践上量大曝光就越大。
2.vx 内群发，朋友圈推广等，属于惯例推广。
3. 着重要利用好，视频号，因为他能够间接关联公众号，而后咱们公众号里就能够关联小程序，所以拜访链路会短很多，效率会高很多。
4. 依据第三点，所以须要注册一个公众号。
源码获取
关注公众号『前端技术江湖』，回复关键词『十一小程序』获取源码。
最初
马上十一了，放松干起来，说不准哪个视频火了，也能带来一个大几千支出呢。
