图片裁剪，首页样式，提交活动参数，详情页面动画

app.js

@@ -2,7 +2,14 @@
 import $api from './utils/api'
 import {
   BASEIMGURL
-} from './utils/config'
+} from './utils/config';
+
+
+import GlobalConfig from './config/index'
+
+const globalConfig = new GlobalConfig()
+
+globalConfig.init()
 App({
   onLaunch() {
     this.getUserLocation();
@@ -78,5 +85,7 @@ App({
     openid: '',
     BASEIMGURL,
     shareOpenId: '', //是否是分享进入
+    config: globalConfig,
+    imgList: []
   }
 })

app.json

@@ -1,8 +1,9 @@
 {
   "pages": [
     "pages/index/index",
-    "pages/detail/index",
     "pages/add/index",
+    "pages/upload/index",
+    "pages/detail/index",
     "pages/my/index"
   ],
   "window": {

config/index.js

@@ -0,0 +1,35 @@
+export default class GlobalConfig {
+  constructor () {
+    this.theme = {
+      active: 'green',
+      items: [
+        {
+          color: '#04b00f',
+          name: 'green'
+        },
+        {
+          color: '#C20C0C',
+          name: 'red'
+        },
+        {
+          color: '#F0C040',
+          name: 'yellow'
+        }
+      ]
+    }
+  }
+
+  init () {
+    const { color } = this.theme.items.find(item => item.name === this.theme.active)
+
+    this.setThemeColor(color)
+  }
+
+  setThemeColor (v) {
+    wx.setStorageSync('themeColor', v)
+  }
+
+  getThemeColor () {
+    return wx.getStorageSync('themeColor')
+  }
+}

lib/we-cropper.wxml

@@ -0,0 +1,17 @@
+<template name="we-cropper">
+  <canvas
+    class="cropper"
+    disable-scroll="true"
+    bindtouchstart="touchStart"
+    bindtouchmove="touchMove"
+    bindtouchend="touchEnd"
+    style="width:{{width}}px;height:{{height}}px;background-color: rgba(0, 0, 0, 0.8)"
+    canvas-id="{{id}}">
+  </canvas>
+  <canvas
+    class="cropper"
+    disable-scroll="true"
+    style="position: fixed; top: -{{width * pixelRatio}}px; left: -{{height * pixelRatio}}px; width:{{width * pixelRatio}}px;height:{{height * pixelRatio}}px;"
+    canvas-id="{{targetId}}">
+  </canvas>
+</template>

pages/add/index.js

@@ -17,7 +17,9 @@ Page({
       key2: '', //活动地点
       key3: '', //活动开始时间
       key4: '', //活动结束时间
-      key5: '' //活动描述
+      key5: '', //活动描述
+      money: 0, 
+      num: 30 
     },
     isShowForm: {
       key1: false,
@@ -45,7 +47,13 @@ Page({
     userInfo: {},
     //编辑
     actid: '',
-    actiddetail: {}
+    actiddetail: {},
+    switch1Checked: false
+  },
+  switch1Change(e){
+    this.setData({
+      switch1Checked: e.detail.value
+    })
   },
   async getPhoneNumber(e) {
     const that = this;
@@ -79,10 +87,10 @@ Page({
       "starttime": this.data.form.key3,
       "endtime": this.data.form.key4 || this.data.form.key3,
       "deadline": this.data.form.key3,
-      "capacity": 50,
+      "capacity": this.data.form.num,
       "content": this.data.form.key5,
       "images": this.data.imgList.length ? this.data.imgList.join(';') : '',
-      "attendfee": 30,
+      "attendfee": this.data.form.money,
       "organizer": app.globalData.userInfo.phone,
       "private": privateObj.private
     };
@@ -125,24 +133,26 @@ Page({
     if (!this.data.imgList.length) return util.myShowToast('至少上传一张图片！');
 
 
-    const that = this;
-    wx.showModal({
-      title: '提示',
-      content: '是否公开您发起的活动？',
-      cancelText: '否',
-      confirmText: '是',
-      success (res) {
-        if (res.confirm) {
-          that.isOpen({ 
-            private: 0 //不公开
-          });
-        } else if (res.cancel) {
-          that.isOpen({ 
-            private: 1
-          });
-        }
-      }
-    })
+    this.isOpen({ 
+      private: this.data.switch1Checked?1:0 //不公开
+    });
+    // wx.showModal({
+    //   title: '提示',
+    //   content: '是否公开您发起的活动？',
+    //   cancelText: '否',
+    //   confirmText: '是',
+    //   success (res) {
+    //     if (res.confirm) {
+    //       that.isOpen({ 
+    //         private: 0 //不公开
+    //       });
+    //     } else if (res.cancel) {
+    //       that.isOpen({ 
+    //         private: 1
+    //       });
+    //     }
+    //   }
+    // })
     
 
     
@@ -197,39 +207,45 @@ Page({
       sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
       sourceType: ['album', 'camera'],
       success: function (res) {
-        var tempFilePaths = res.tempFilePaths;
-        var tempFilesSize = res.tempFiles[0].size;
+        // var tempFilePaths = res.tempFilePaths;
+        const tempFilesSize = res.tempFiles[0].size;
 
-        wx.showLoading({
-          title: '上传中...',
-        });
+        // wx.showLoading({
+        //   title: '上传中...',
+        // });
         if (tempFilesSize > 2000000) { //图片小于或者等于1M时 可以执行获取图片
           return wx.showToast({
             title: '上传图片不能大于2M!', //标题
             icon: 'none' //图标 none不使用图标，详情看官方文档
           })
         }
-        wx.uploadFile({
-          url: 'https://hw.cirray.cn/api/upload_image', //仅为示例，非真实的接口地址
-          filePath: tempFilePaths[0],
-          name: 'file',
-          formData: {},
-          success: function (res) {
-            // wx.hideLoading()
-            let imgList = [...that.data.imgList, res.data];
-            that.setData({
-              imgList
-            });
-            wx.hideLoading()
-          },
-          fail(e) {
-            wx.showToast({  
-              title: '上传失败，请稍后重试！',
-              icon: 'none'
-            })
-            // wx.hideLoading()
-          }
+        const src = res.tempFilePaths[0];
+        wx.navigateTo({
+            url: '../upload/index?src=' + src
         })
+
+
+        // wx.uploadFile({
+        //   url: 'https://hw.cirray.cn/api/upload_image', //仅为示例，非真实的接口地址
+        //   filePath: tempFilePaths[0],
+        //   name: 'file',
+        //   formData: {},
+        //   success: function (res) {
+        //     // wx.hideLoading()
+        //     let imgList = [...that.data.imgList, res.data];
+        //     that.setData({
+        //       imgList
+        //     });
+        //     wx.hideLoading()
+        //   },
+        //   fail(e) {
+        //     wx.showToast({  
+        //       title: '上传失败，请稍后重试！',
+        //       icon: 'none'
+        //     })
+        //     // wx.hideLoading()
+        //   }
+        // })
       }
     })
   },

pages/add/index.wxml

@@ -4,15 +4,23 @@
 	<view class="title-img"></view>
 	<view class="list">
 		<scroll-view style="height: 100%;" scroll-y>
-			<view class="black-112">
-
+			<view class="black-112"></view>
+			<!-- 是否为私局 -->
+			<view class="label label-sj">
+				<view class="input-detail">
+					<view class='input-title'>私局</view>
+					<view class="input-section text-overflow">(开启后只显示在个人页，关闭后首页可见)</view>
+				</view>
+				<view>
+					<switch checked="{{switch1Checked}}" color="#8F6EE5" bindchange="switch1Change"/>
+				</view>
 			</view>
 			<!-- 活动名称 -->
 			<view class="label" catchtap="showInput" data-key='key1'>
 				<!-- <view class='icon'></view> -->
 				<view class="input" wx:if='{{!isShowForm.key1}}'>
 					<view class="input-des"></view>
-					<input disabled="{{!!actid}}" placeholder="输入活动名称" focus="{{inputFocus.key1}}" placeholder-class="text-888" value='{{form.key1}}' bindinput="inputVal" data-key='key1' bindblur="inputBlur"></input>
+					<input disabled="{{!!actid}}" placeholder="*输入活动名称" focus="{{inputFocus.key1}}" placeholder-class="text-888" value='{{form.key1}}' bindinput="inputVal" data-key='key1' bindblur="inputBlur"></input>
 				</view>
 				<view class="input-detail" wx:else>
 					<view class='input-title'>活动名称</view>
@@ -26,7 +34,7 @@
 				</view>
 				<view class="input" wx:if='{{!isShowForm.key2}}'>
 					<view class="input-des"></view>
-					<input placeholder="输入活动地点" focus="{{inputFocus.key2}}" placeholder-class="text-888" value='{{form.key2}}' bindinput="inputVal" data-key='key2' bindblur="inputBlur"></input>
+					<input placeholder="*输入活动地点" focus="{{inputFocus.key2}}" placeholder-class="text-888" value='{{form.key2}}' bindinput="inputVal" data-key='key2' bindblur="inputBlur"></input>
 				</view>
 				<view class="input-detail" wx:else>
 					<view class='input-title'>活动地点</view>
@@ -40,7 +48,7 @@
 				</view>
 				<view class="input" wx:if='{{!form.key3}}'>
 					<view class="input-des"></view>
-					<input disabled placeholder="输入活动时间"></input>
+					<input disabled placeholder="*输入活动时间"></input>
 				</view>
 				<view class="input-detail" wx:else>
 					<view class='input-title'>活动时间</view>
@@ -78,7 +86,7 @@
 				<!-- <view class='icon'></view> -->
 				<view class="input" wx:if='{{!isShowForm.key5}}'>
 					<view class="input-des"></view>
-					<textarea auto-height placeholder="输入活动描述" focus="{{inputFocus.key5}}" placeholder-class="text-888" maxlength='-1' value='{{form.key5}}' bindinput="inputVal" data-key='key5' bindblur="inputBlur"></textarea>
+					<textarea auto-height placeholder="*输入活动描述" focus="{{inputFocus.key5}}" placeholder-class="text-888" maxlength='-1' value='{{form.key5}}' bindinput="inputVal" data-key='key5' bindblur="inputBlur"></textarea>
 				</view>
 				<view class="input-detail textarea-detail" wx:else>
 					<view class='input-title'>活动描述</view>
@@ -86,12 +94,25 @@
 					<!-- <image class="textarea-dowm-img" src="../../img/down.png"></image> -->
 				</view>
 			</view>
+			<!-- 人数 -->
+			<view class="label label-num">
+				<view class="num-l">
+					<input value="{{form.money}}" bindinput="inputVal" data-key='money'></input>
+					<text>元/人</text>
+				</view>
+				<view class="num-line"></view>
+				<view class="num-r">
+					<text>限</text>
+					<input value="{{form.num}}"  bindinput="inputVal" data-key='num'></input>
+					<text>人报名</text>
+				</view>
+			</view>
 			<!-- 添加图片 -->
 			<view class="pic-list">
 				<view class="pic-item" wx:for="{{imgList}}" wx:key='index'>
 					<image class="pic" src="{{BASEIMGURL + item}}"></image>
 					<view class="pic-close" bindtap="removeImg" data-item='{{item}}'>
-						<image src="../../img/close.png"></image>
+						<image src="../../img/close.png" mode="aspectFit"></image>
 					</view>
 				</view>
 				<view class="pic-add" bindtap="updateImg">

pages/add/index.wxss

@@ -46,7 +46,8 @@ page {
   height: 48rpx;
   margin-right: 40rpx;
 }
-.label .icon image{
+
+.label .icon image {
   width: 100%;
   height: 100%;
 }
@@ -72,11 +73,21 @@ page {
   padding-bottom: 6rpx;
 }
 
+.label-sj .input-title {
+  color: #313131;
+  font-size: 32rpx;
+}
+
 .input-section {
   font-size: 31rpx;
   color: #313131;
 }
 
+.label-sj .input-section {
+  font-size: 20rpx;
+  color: #888888;
+}
+
 .label .picker-box {
   position: absolute;
   top: 0;
@@ -185,27 +196,75 @@ page {
   background: linear-gradient(135deg, rgba(143, 103, 232, 1) 0%, rgba(99, 87, 204, 1) 100%);
   border-radius: 50rpx;
 }
-.btn button:not([size='mini']){  
+
+.btn button:not([size='mini']) {
   width: 100%;
   height: 100%;
   background-color: none;
-  margin:0;
-  padding:0;
+  margin: 0;
+  padding: 0;
   position: absolute;
-  top:0;
-  left:0;
-  right:0;
-  bottom:0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   background: none;
 }
-.black-100{
+
+.black-100 {
   height: 100rpx;
   overflow: hidden;
   clear: both;
 }
-.black-112{
-  height: 112rpx;
+
+.black-112 {
+  height: 38rpx;
   overflow: hidden;
   clear: both;
 }
 
+.label-num {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.num-l {
+  display: flex;
+  align-items: center;
+  font-size: 32rpx;
+  color: #636363;
+}
+
+.num-l input {
+  width: 120rpx;
+  height: 76rpx;
+  border-radius: 10rpx;
+  border: 2rpx solid rgba(240, 242, 246, 1);
+  text-align: center;
+  margin: 0 4rpx;
+}
+
+.num-line {
+  width: 2rpx;
+  height: 110rpx;
+  color: #F0F2F6;
+  background-color: #D8D8D8;
+  margin: 0 30rpx;
+}
+
+.num-r {
+  display: flex;
+  align-items: center;
+  font-size: 32rpx;
+  color: #636363;
+}
+
+.num-r input {
+  width: 120rpx;
+  height: 76rpx;
+  border-radius: 10rpx;
+  border: 2rpx solid rgba(240, 242, 246, 1);
+  text-align: center;
+  margin:0 4rpx;
+}

pages/detail/index.js

@@ -1,7 +1,10 @@
 // pages/detail/index.js
 const app = getApp();
 
-
+let touchDotX = 0;//X按下时坐标
+let touchDotY = 0;//y按下时坐标
+let interval;//计时器
+let time = 0;//从按下到松开共多少时间*100
 
 Page({
 
@@ -118,11 +121,13 @@ Page({
     })
   },
   scroll(e) {
+    console.log(e)
     if (e.detail.scrollTop > 1 && this.data.isScroll == false) {
       this.setData({
         isScroll: true
       })
-    } else if (e.detail.scrollTop < 1 && this.data.isScroll == true) {
+    }
+    if (e.detail.scrollTop < 1 && this.data.isScroll == true) {
       this.setData({
         isScroll: false
       })
@@ -241,4 +246,47 @@ Page({
       path: param
     }
   },
+  onPageScroll(e){  
+    console.log(111)
+  },
+  // 触摸开始事件
+  touchStart: function(e) {
+    touchDotX = e.touches[0].pageX; // 获取触摸时的原点
+    touchDotY = e.touches[0].pageY;
+    // 使用js计时器记录时间    
+    interval = setInterval(function() {
+      time++;
+    }, 100);
+  },
+  // 触摸结束事件
+  touchEnd: function(e) {
+    let touchMoveX = e.changedTouches[0].pageX;
+    let touchMoveY = e.changedTouches[0].pageY;
+    let tmX = touchMoveX - touchDotX;
+    let tmY = touchMoveY - touchDotY;
+    if (time < 20) {
+      let absX = Math.abs(tmX);
+      let absY = Math.abs(tmY);
+      if (absX > 2 * absY) {
+        if (tmX<0){
+          console.log("左滑=====")
+        }else{
+          console.log("右滑=====")
+        }
+      }
+      if (absY > absX * 2 && tmY<0) {
+        console.log("上滑动=====")
+        this.setData({
+          isScroll: true
+        })
+      }else{
+        console.log("下滑动=====")
+        this.setData({
+          isScroll: false
+        })
+      }
+    }
+    clearInterval(interval); // 清除setInterval
+    time = 0;
+  }
 })

pages/detail/index.wxml

@@ -1,8 +1,9 @@
 <!--pages/detail/index.wxml-->
+<!-- <view class="container" bindtouchstart="touchStart" bindtouchend="touchEnd"> -->
 <view class="container">
 	<!-- <navBar title-text="CoffeeTalk" back-icon="/img/nav/back@3x.png" background="none" bindback="back" /> -->
 	<!-- <view class="container-bg {{background[current]}}" style="height: {{navHeight}}px;"></view> -->
-	<view class="swiper" style="height: {{isScroll?'268':'686'}}rpx;">
+	<view class="swiper" style="height: {{isScroll?'114':'381'}}rpx;">
 		<swiper bindchange="change" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{current}}" indicator-color='rgba(255,255,255,.3)' indicator-active-color='#fff' style="height: 100%;">
 			<block wx:for="{{currentActivity.imgList}}" wx:key="*this">
 				<swiper-item>
@@ -13,7 +14,7 @@
 			</block>
 		</swiper>
 		<!--重置小圆点的样式  -->
-		<view class="dots" style='bottom:{{isScroll?"100":"12"}}rpx'>
+		<view class="dots" hidden="{{isScroll}}">
 			<block wx:for="{{currentActivity.imgList}}" wx:for-index="index" wx:key="index">
 				<view class="dot {{index == current?'active':''}}"></view>
 			</block>
@@ -21,11 +22,11 @@
 		<!--重置小圆点的样式 end -->
 	</view>
 	<view class="section {{isScroll?'section-scroll':''}}">
-		<view class="black-70 pd-top" bindtap="scrollView">
+		<!-- <view wx:if="{{isScroll}}" class="black-70 pd-top" bindtap="scrollView">
 			<view class="line-active"></view>
-		</view>
-		<scroll-view style="height:100%;" scroll-y>
-			<!-- <scroll-view style="height:100%;" scroll-y bindscroll="scroll"> -->
+		</view> -->
+		<!-- <scroll-view style="height:100%;" scroll-y> -->
+			<scroll-view style="height:100%;" scroll-y bindscroll="scroll">
 			<view class="pd">
 
 				<view class="title">

pages/detail/index.wxss

@@ -45,7 +45,7 @@
 
 .swiper {
   position: relative;
-  height: 686rpx;
+  height: 381rpx;
   transition: all ease .4s;
   background-color: #ccc;
 }
@@ -102,7 +102,7 @@
 .section {
   position: relative;
   flex: 1;
-  transition: all ease .3s;
+  transition: all ease .2s;
   background: #fff;
   /* padding: 70rpx 50rpx 0; */
   /* box-sizing: border-box; */

pages/index/index.wxml

@@ -23,9 +23,9 @@
 						</view>
 						<view class="item-img">
 							<image src="{{BASEIMGURL + item.imgList[0]}}" mode='aspectFill'></image>
+							<view class="content-title text-overflow">{{item.title}}</view>
 						</view>
 						<view class="item-content">
-							<view class="content-title">{{item.title}}</view>
 							<view class="content-addr">
 								<view class='addr-icon'>
 									<image src="../../img/location.png"></image>

pages/index/index.wxss

@@ -51,11 +51,14 @@ page {
 .item .me-active image{
   width: 50rpx;
   height: 50rpx;
+  position: relative;
+  z-index: 10;
 }
 
 .item .item-img {
+  position: relative;
   width: 610rpx;
-  height: 230rpx;
+  height: 310rpx;
   background-color: #fff;
 }
 
@@ -69,11 +72,20 @@ page {
   padding: 28rpx 40rpx 24rpx;
 }
 
-.item-content .content-title {
-  padding: 8rpx 0;
+.content-title {
+  position: absolute;
+  bottom:0;
+  left:0;
+  right:0;
+  height: 88rpx;
+  line-height: 88rpx;
   font-size: 40rpx;
   font-weight: 400;
-  color: rgba(49, 49, 49, 1);
+  color: #fff;
+  background:rgba(30,30,30,0.35);
+  border-radius: 0 0 24rpx 0;
+  box-sizing: border-box;
+  padding-left: 40rpx;
 }
 
 .content-addr {

pages/my/index.wxml

@@ -22,9 +22,10 @@
 						</view> -->
 						<view class="item-img">
 							<image src="{{BASEIMGURL + item.imgList[0]}}" mode='aspectFill'></image>
+								<view class="content-title text-overflow">{{item.title}}</view>
 						</view>
 						<view class="item-content">
-							<view class="content-title">{{item.title}}</view>
+						
 							<view class="content-addr">
 								<view class='addr-icon'>
 									<image src="../../img/location.png"></image>

pages/my/index.wxss

@@ -54,25 +54,37 @@ page {
 }
 
 .item .item-img {
+  position: relative;
   width: 610rpx;
-  height: 230rpx;
-  background-color: #eee;
+  height: 310rpx;
+  background-color: #fff;
+  /* border-radius: 0 0 24rpx 0; */
 }
 
 .item .item-img image{
   width: 100%;
   height: 100%;
+  border-radius: 0 0 24rpx 0;
 }
 
 .item-content {
   padding: 28rpx 40rpx 24rpx;
 }
 
-.item-content .content-title {
-  padding: 8rpx 0;
+.content-title {
+  position: absolute;
+  bottom:0;
+  left:0;
+  right:0;
+  height: 88rpx;
+  line-height: 88rpx;
   font-size: 40rpx;
   font-weight: 400;
-  color: rgba(49, 49, 49, 1);
+  color: #fff;
+  background:rgba(30,30,30,0.35);
+  border-radius: 0 0 24rpx 0;
+  box-sizing: border-box;
+  padding-left: 40rpx;
 }
 
 .content-addr {

pages/upload/index.js

@@ -0,0 +1,140 @@
+import WeCropper from '../../lib/we-cropper.min.js'
+
+const app = getApp()
+const config = app.globalData.config
+
+const device = wx.getSystemInfoSync()
+const width = device.windowWidth
+const height = device.windowHeight - 50
+
+610 / 310
+
+Page({
+    data: {
+        cropperOpt: {
+            id: 'cropper',
+            targetId: 'targetCropper',
+            pixelRatio: device.pixelRatio,
+            width,
+            height,
+            scale: 2.5,
+            zoom: 8,
+            cut: {
+                x: (width - 300) / 2,
+                y: (height - 300) / 2,
+                width: 305,
+                height: 155
+            },
+            boundStyle: {
+                color: config.getThemeColor(),
+                mask: 'rgba(0,0,0,0.8)',
+                lineWidth: 1
+            }
+        }
+    },
+    touchStart(e) {
+        this.cropper.touchStart(e)
+    },
+    touchMove(e) {
+        this.cropper.touchMove(e)
+    },
+    touchEnd(e) {
+        this.cropper.touchEnd(e)
+    },
+    getCropperImage() {
+        this.cropper.getCropperImage(function (path, err) {
+            if (err) {
+                wx.showModal({
+                    title: '温馨提示',
+                    content: err.message
+                })
+            } else {
+                // wx.previewImage({
+                //   current: '', // 当前显示图片的 http 链接
+                //   urls: [path] // 需要预览的图片 http 链接列表
+                // });
+                wx.showLoading({
+                    title: '上传中...',
+                });
+                wx.uploadFile({
+                    url: 'https://hw.cirray.cn/api/upload_image', //仅为示例，非真实的接口地址
+                    filePath: path,
+                    name: 'file',
+                    formData: {},
+                    success: function (res) {
+                        // wx.hideLoading()
+                        wx.hideLoading()
+                        const pages = getCurrentPages();
+                        const prevPage = pages[pages.length - 2]; //上一个页面
+                        //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
+                        prevPage.setData({
+                            imgList: [...prevPage.data.imgList, res.data]
+                        })
+                        wx.navigateBack({ //返回
+                            delta: 1
+                        })
+                    },
+                    fail(e) {
+                        wx.showToast({
+                            title: '上传失败，请稍后重试！',
+                            icon: 'none'
+                        })
+                        // wx.hideLoading()
+                    }
+                })
+            }
+        })
+    },
+    uploadTap() {
+        const self = this
+
+        wx.chooseImage({
+            count: 1, // 默认9
+            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+            success(res) {
+                const src = res.tempFilePaths[0]
+                //  获取裁剪图片资源后，给data添加src属性及其值
+
+                self.cropper.pushOrign(src)
+            }
+        })
+    },
+    onLoad(option) {
+        const {
+            cropperOpt
+        } = this.data
+
+        cropperOpt.boundStyle.color = config.getThemeColor()
+
+        this.setData({
+            cropperOpt
+        })
+
+        if (option.src) {
+            cropperOpt.src = option.src
+            this.cropper = new WeCropper(cropperOpt)
+                .on('ready', (ctx) => {
+                    console.log(`wecropper is ready for work!`)
+                })
+                .on('beforeImageLoad', (ctx) => {
+                    console.log(`before picture loaded, i can do something`)
+                    console.log(`current canvas context:`, ctx)
+                    wx.showToast({
+                        title: '上传中',
+                        icon: 'loading',
+                        duration: 20000
+                    })
+                })
+                .on('imageLoad', (ctx) => {
+                    console.log(`picture loaded`)
+                    console.log(`current canvas context:`, ctx)
+                    wx.hideToast()
+                })
+                .on('beforeDraw', (ctx, instance) => {
+                    console.log(`before canvas draw,i can do something`)
+                    console.log(`current canvas context:`, ctx)
+                })
+        }
+    }
+})

pages/upload/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/upload/index.wxml

@@ -0,0 +1,18 @@
+<import src="../../lib/we-cropper.wxml"/>
+
+<view class="cropper-wrapper">
+  <template is="we-cropper" data="{{...cropperOpt}}"/>
+  <view class="cropper-buttons" style="color: {{cropperOpt.boundStyle.color}}">
+    <view
+      class="upload btn"
+      bindtap="uploadTap">
+      重新选择图片
+    </view>
+    <view
+      class="getCropperImage btn"
+      style="background-color: {{cropperOpt.boundStyle.color}};"
+      bindtap="getCropperImage">
+      上传图片
+    </view>
+  </view>
+</view>

pages/upload/index.wxss

@@ -0,0 +1,62 @@
+/* pages/upload/index.wxss */
+page{
+  -webkit-user-select: none;
+  user-select: none;
+  width: 100%;
+  height: 100%;
+  background-color: #f8f8f8;
+  font-family: Arial, Helvetica, sans-serif;
+  overflow-x: hidden;
+}
+.flex{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.cropper-wrapper{
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  background-color: #e5e5e5;
+}
+
+.cropper-buttons{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 50px;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+  line-height: 50px;
+}
+
+.cropper-buttons .upload, .cropper-buttons .getCropperImage{
+  text-align: center;
+}
+
+.cropper{
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.cropper-buttons{
+    background-color: rgba(0, 0, 0, 0.95);
+}
+
+.btn{
+    height: 30px;
+    line-height: 30px;
+    padding: 0 24rpx;
+    border-radius: 2px;
+    color: #ffffff;
+}