别再@官方啦，给我一面国旗教程来袭,快来接收源码吧

立即下载用AI写一个

发布时间：2019-09-29

9人 | 浏览：2179次 | 收藏 |

技术：微信小程序

运行环境：微信开发者工具

概述

大家好，我是独立开发者陈东东，新中国成立70周年之际，四处都飘扬着鲜艳的五星红旗。近日，五星红旗飘到朋友圈啦！不少微信网友都发布了类似“请给我一面国旗@微信官方”的朋友圈，随后，不少人的头像右下角真的多了一面红星红旗。

详细

大家好，我是独立开发者陈东东，新中国成立70周年之际，四处都飘扬着鲜艳的五星红旗。近日，五星红旗飘到朋友圈啦！不少微信网友都发布了类似“请给我一面国旗@微信官方”的朋友圈，随后，不少人的头像右下角真的多了一面红星红旗。

本人为了测试到底是不是真的，也照样发了朋友圈，@了微信官方。然后不断刷新，头像还是没变。不久后，就有之前发了同样内容朋友圈并更新的头像的好友纷纷甩来一个链接……

**果然！又上当了！**

该链接是腾讯做的一个自动生成国庆专属头像页面，登录后就能生成、保存有国庆图标的头像图片，然后你再在微信上，自己手动换成有国庆图标的头像图片！

今天终于不用再愁啦。给我一面国旗小程序官方教程来来...来啦！！！

### 一、前期准备工作
软件环境：微信开发者工具
官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

**1、基本需求。**
实现头像加装饰

***实现示例选择图片头像***

```
<view class="container">
  <image class="bgPic" wx:if="{{bgPic}}" src="{{bgPic}}"></image>
  <view class="emptyBg" wx:else></view>
</view>
<view class="btnContainer">
  <button data-way="avatar" bind:tap="getAvatar"   class="logo">使用头像</button>
  <button data-way="camera" bind:tap="chooseImage" class="camaer">使用相机</button>
  <button data-way="album" bind:tap="chooseImage"  class="choice">相册选择</button>
  <button bind:tap="nextPage" disabled="{{!picChoosed}}"  class="next">下一步</button>
</view>
```

在这个实现中，最为重要的就是js部分，本案例可以使用头像、手机相机拍照或者相册中选择照片作为底图，例如示例辅助的 JS：

JS 代码:
```
getAvatar() {
    if (app.globalData.userInfo) {
      this.setData({
        bgPic: app.globalData.userInfo.avatarUrl,
      });
      this.assignPicChoosed();
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo;
          this.setData({
            userInfo: res.userInfo,
            bgPic: res.userInfo.avatarUrl
          });
          this.assignPicChoosed();
        }
      })
    }
  },
  chooseImage(from){
    wx.chooseImage({
      count: 1,
      sizeType: ["original", "compressed"],
      sourceType: [from.target.dataset.way],
      success:(res)=> {
        var tempFilePaths = res.tempFilePaths;
        this.setData({
          bgPic:res.tempFilePaths[0]
        });
        this.assignPicChoosed();
      },
      fail: (res)=>{
        this.assignPicChoosed();
        },
      complete: (res)=>{
        this.assignPicChoosed();
        },
    })
  },

```
示例中使用的 WXSS ，你也可以在 WXSS  中尝试改变页面的一些颜色排版效果。

添加国旗保存图片效果
![](/contentImages/image/20190928/0AXHUMCkvU667EUkBNd.png)

在每个imageeditor.wxml片段中，将src="../../image/{{currentHatId}}.png"替换为你自己使用的图片URL。
```
<view  wx:if="{{!combine}}">
    <view class="container" 
          id="container"
          bind:touchstart="touchStart" 
          bind:touchend="touchEnd"
          bind:touchmove="touchMove">
    <image class="bg" src="{{bgPic}}"></image>
    
    
    <image class="hat" id='hat' src="../../image/{{currentHatId}}.png"
    style="top:{{hatCenterY-hatSize/2-52+'px'}};left:{{hatCenterX-hatSize/2-52+'px'}};transform:rotate({{rotate+'deg'}}) scale({{scale}})"
    ></image>
    </view>

<button bind:tap="combinePic"  class='sure'>确定</button>
   <scroll-view class="scrollView" scroll-x="true" >
    <image class="imgList" 
        wx:for="{{imgLists}}" wx:key="{{index+1}}" 
        src="../../image/{{index+1}}.png"
        data-hat-id="{{index+1}}"
        bind:tap="chooseImg"></image>
  </scroll-view> 
</view>
```
![](/contentImages/image/20190928/0iyAuMDMReCuSUqFPnN.png)

下面可以配置多种图片，点击切换不同的头像装饰。最后确定保存到手机相册中。

![](/contentImages/image/20190928/l1FUHaSuykTgUwB6BZf.png)

### 二、案例运行效果图

![](/contentImages/image/20190928/K2cORGCnBJjzuvXvgvX.gif)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

别再@官方啦，给我一面国旗教程来袭,快来接收源码吧

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子