制作页面

app.json

@@ -86,7 +86,8 @@
     "pages/eachGiftInfor/eachGiftInfor",
     "pages/midAutumnFestival/midAutumnFestival",
     "pages/customized/index/index",
-    "pages/customized/made/made"
+    "pages/customized/made/made",
+    "components/component-made/made-solid"
   ],
   "window": {
     "backgroundTextStyle": "white",

components/component-made/made-solid.js

@@ -0,0 +1,26 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    propPosition: Object,
+    propSize:Object
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    
+  },
+  ready(){
+    
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

components/component-made/made-solid.json

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

components/component-made/made-solid.wxml

@@ -0,0 +1,11 @@
+<view class="wrapper">
+<!-- <canvas class='canvas-box' canvas-id="bgCanvas"> -->
+  <view class='solid' style='top:{{propPosition.top}};left:{{propPosition.left}};width:{{propPosition.width}};height:{{propPosition.height}}'>
+      <text class='top'>{{propSize.top}}</text>
+      <text class='right'>{{propSize.right}}</text>
+      <text class='bottom'>{{propSize.bottom}}</text>
+      <text class='left'>{{propSize.left}}</text>
+      <slot></slot>
+  </view>
+  <!-- </canvas> -->
+</view>

components/component-made/made-solid.wxss

@@ -0,0 +1,52 @@
+/* components/component-made/made-solid.wxss */
+page{
+  background:#fff;
+}
+.canvas-box{
+  width:100%;
+  height:588rpx;
+}
+
+.solid{
+  width:270rpx;
+  height:270rpx;
+  border:1rpx dashed #fff;
+  line-height:270rpx;
+  text-align: center;
+  margin:0 auto;
+  position:absolute;
+  top:50rpx;
+  left:286rpx;
+  z-index:100;
+  color:#fff;
+  font-size:26rpx;
+}
+/* .solid-box{
+  width:inherit;
+  height:inherit;
+  position:relative;
+  font-size:26rpx;
+} */
+.solid .top{
+  height:20rpx;
+  position:absolute;
+  top:-50%;
+  left:50%;
+  margin-left:-20rpx;
+  margin-top:-12rpx;
+}
+.solid .right{
+  position:absolute;
+  right:-56rpx;
+}
+.solid .bottom{
+  position:absolute;
+  bottom:-50%;
+  left:50%;
+  margin-left:-20rpx;
+  margin-bottom:-12rpx;
+}
+.solid .left{
+  position:absolute;
+  left:-56rpx;
+}

pages/customized/index/index.js

@@ -0,0 +1,66 @@
+// pages/customized/index/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+    console.log('canvas')
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/customized/index/index.wxml

@@ -1,7 +1,7 @@
 <view class="auto">
   <view class="f-box mar-t20">
     <view class='cust-img mar-r'>
-        <image src="/images/customized/cup_black.png" mode="aspectFit"></image>
+        <image src="/images/customized/cup_black_small.png" mode="aspectFit"></image>
       </view>
     <view class="f-item mar-l20">
     <view class='cup-main'>

pages/customized/made/made.js

@@ -5,21 +5,42 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    dataPositionObj:{
+      top:'156rpx',
+      left:'286rpx'
+    },
+    propSize:{
+      top:'8cm',
+      right:'8cm',
+      bottom: '8cm',
+      left:'8cm',
+    }
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
+    console.log('页面加载完成')
+    wx.getSystemInfo({
+      success: function (res) {
+        let rpx = res.windowWidth / 750;
+        console.log(res.windowWidth)
+        const ctx = wx.createCanvasContext('madeContent');
+        ctx.drawImage('/images/customized/cup_black_big.png', 0, 0, 750 * rpx, 588 * rpx)
+        ctx.draw()
+      },
+    })
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {
-
+    // console.log('页面开始准备中')
+  
+    const ctx = wx.createCanvasContext('madeBox');
+    // Canvas.SetLeft(ctx, '10rpx'); 
   },
 
   /**

pages/customized/made/made.json

@@ -1,3 +1,7 @@
 {
-  "usingComponents": {}
+  "navigationBarTitleText": "定制",
+  "backgroundColor": "#fff",
+  "usingComponents": {
+    "made-solid": "/components/component-made/made-solid"
+  }
 }

pages/customized/made/made.wxml

@@ -1 +1,10 @@
-<text></text>
+<view>
+<canvas canvas-id='madeContent' class='made-content'>
+<!-- <image src='/images/customized/cup_black_big.png' bindload="imageLoad"/> -->
+  <made-solid prop-position="{{dataPositionObj}}" prop-size="{{propSize}}">
+    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
+    <text>可定制区域</text>
+  </made-solid>
+  <canvas canvas-id='myCanvas' class='made-box' style='margin:{{dataPositionObj.top}} 0 0 {{dataPositionObj.left}}'></canvas>
+</canvas>
+</view>

pages/customized/made/made.wxss

@@ -1 +1,11 @@
-/* pages/customized/made/made.wxss */
+/* pages/customized/made/made.wxss */
+.made-content{
+ width:100%;
+ height:588rpx;
+ margin:60rpx 0;
+}
+.made-box{
+  width:272rpx;
+  height:272rpx;
+  margin:0 auto;
+}