之前，五星红旗飘到朋友圈啦！不少微信网友都发布了类似“请给我一面国旗@微信官方”的朋友圈，随后，不少人的头像右下角真的多了一面红星红旗。

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

果然！又上当了！

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

今天终于不用再愁啦。极客小寨工作室给我一面国旗小程序官方教程来来...来啦！！！特意分享出来供大家一起学习使用！

GitHub：该项目可在https://github.com/geekxz/wxapp-demo上获得。即可获得源码。

现示例选择图片头像

示例WXML代码:

<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  中尝试改变页面的一些颜色排版效果。

添加国旗保存图片效果

在每个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>
    <!-- <icon type="cancel" class="cancel" id="cancel" style="top:{{cancelCenterY-60+'px'}};left:{{cancelCenterX-60+'px'}}"></icon> -->
    <!-- <icon type="waiting" class="handle"  id="handle"  color="green" style="top:{{handleCenterY+40+'px'}};left:{{handleCenterX+40+'px'}}"></icon> -->
    <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>

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

保存到相册

- The End -