微擎开发小程序上应用市场（3）——头像框小程序前端开发

上篇文章已经说过后台搭建方法：文章详情

因为本次小程序后端不做处理，只用于后期升级，

接下来开始部署前端；

1.微擎前端文件；

下载下来之后没有过多调整

直接新建首位文件

本次小程序也只有一个页面

其次用到裁剪插件we-cropper

直接贴代码了

index.wxml

<view class="content">
  <image class="all-back" src="{{bgimg_url}}" mode="widthFix"></image>
  <view wx:if="{{showWeCropper}}" class="cropper">
        <import src='../../resource/we-cropper/we-cropper.wxml' />
        <view class="cropperbg">
            <template is="we-cropper" data="{{...cropperOpt}}" />
            <view class="employ" bindtap="getCropperImage">使用</view>
        </view>
    </view>

    <view class="top-content">
 
    <scroll-view class="scroll-view" scroll-x="{{true}}" show-scrollbar="{{true}}">
      <view class="image-div">
        <block wx:for="{{imageList}}" wx:key="sucaiid">
          <view class="image-margin"   >
            <image src="{{item.src}}" class=""   data-index="{{index}}" data-id="{{item.id}}" data-src="{{item.src}}"  bindtap="imageClick"  ></image>
          </view>
        </block>
      </view>
    </scroll-view>
  </view>
    <view class="image-card ">
    
        <view class="photo-main-view "   >
            <view class="avatar-div  " id="avatar-container" bindtap="getavatar">
                <image class="img " id="avatar-img" src="{{avatarImage}}" ></image>
                <block wx:if="{{!avatarImage}}">
                    <view class="empty-view  ">
                        <image class="empty " src="{{avatarempty}}"></image>
                    </view>
                </block>
                <block wx:if="{{currentImage&&currentImage.src}}">
                    <image class="avatar-default" src="{{currentImage.src}}"></image>
                </block>
            </view>
      
        </view>
    </view>

    <view class="uploadf_next_con">
          
            <button  class="op_btn pre" bindtap="chooseImage">相册上传</button>
            <button class="op_btn pre " bindtap="savePhoto">保存头像</button>
            </view>



    <view class="hideCanvasView ">
        <canvas style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;" canvas-id="myCanvas" />
    </view>




</view>

这里想说的是微擎市场已经发布了免费版，具体代码 下载即可

 用到的js

第一个微信获取头像：

      // 点击微信授权按钮回调
      getavatar: function getUserProfile(e) {
        wx.showLoading({
          title: "正在获取...",
          mask: !0
        });
        var that = this;
        wx.getUserProfile({
          desc: "生成用户头像图片需要",
          success: function success(res) {
            wx.hideLoading();
            var data = res.userInfo;
            that.data.avatarImage = data.avatarUrl.replace("/132", "/0"); // 默认打开某个分类的第一张图
  
        
            that.setData({

              avatarImage: that.data.avatarImage,

          });
          },
          fail: function fail(res) {
            wx.hideLoading();
            wx.showToast({
              title: "图片获取失败",
              icon: "none",
              duration: 2000
            });
          }
        });
      },

首页获取微信头像，其次截取最后字符串获取微信头像大图

赋值到前端

其次是点击头像框，赋值到前端

这里不多说了 看代码

明天重点讲一下canvas合成图片功能