大家好，我是程序员饭哥，一个前端码农，目前还在打怪降级中，心愿本人成为全栈，另外也不想卷了，想做点有意思的事件。

本文技术上没啥深度，只是堆代码，没设计可言，比拟适宜老手。

明天带来一个能赚钱的国庆头像小程序。

文章次要包含以下几个内容，

  1. 利用介绍
  2. 外围性能实现和遇到的问题
  3. 盈利模式
  4. 经营思路

利用介绍

这个利用是一个头像合成的工具，之前十一假期的时候这类的小程序可是火了一把，当然很多人也赚了一笔。

另外本次开发也降级了一些性能，算是比拟残缺了。

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.依据第三点，所以须要注册一个公众号。

源码获取

关注公众号『前端技术江湖』，回复关键词『十一小程序』获取源码。

最初

马上十一了，放松干起来，说不准哪个视频火了，也能带来一个大几千支出呢。