乐趣区

关于小程序:开源一个能学赚习钱的应用-十一节头像小程序

jiezi

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

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

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

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

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

源码获取

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

最初

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

退出移动版