resize logo

Author: memakergytcom

components/add-tips

@@ -0,0 +1,53 @@
+const STORAGE_KEY = 'PLUG-ADD-MYAPP-KEY';
+Component({
+  properties: {
+    name: {
+      type: String,
+      value: '测试'
+    },
+    duration: {
+      type: Number,
+      value: 10
+    },
+    logo: {
+      type: String,
+      value: 'https://imgkr.cn-bj.ufileos.com/c958e4cd-6bab-43ed-93aa-697207cf33a5.png'
+    },
+    custom: {
+      type: Boolean,
+      value: false
+    }
+  },
+  lifetimes: {
+    attached: function() {
+			if (wx.getStorageSync(STORAGE_KEY)) return;
+      let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null;
+			let { screenWidth } = wx.getSystemInfoSync();
+			this.setData({
+				navbarHeight: rect.bottom,
+				arrowR:screenWidth-rect.right+rect.width*3/4-5,
+				bodyR: screenWidth - rect.right
+			})
+			this.setData({
+				SHOW_TOP: true
+			});
+			setTimeout(() => {
+				this.setData({
+					SHOW_TOP: false
+				})
+			}, this.data.duration * 1000);
+    },
+  },
+  data: {
+    SHOW_TOP: false
+  },
+  methods: {
+		hidden: function() {
+      this.setData({
+        SHOW_TOP: false
+      },()=>{
+				wx.setStorageSync(STORAGE_KEY, true)
+			});
+    }
+  }
+})

components/add-tips/index.js

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

components/add-tips/index.json

@@ -0,0 +1,7 @@
+<view class="box" wx:if="{{SHOW_TOP}}" style="top:{{custom?navbarHeight:0}}px;">
+  <view class='arrow' style="margin-right:{{arrowR}}px;"></view>
+  <view class='body' bindtap='hidden' style="margin-right:{{bodyR}}px;">
+		<image src="{{logo}}" class="logo"></image>
+    <view class="tips">将“{{name}}”添加到我的小程序,以后使用更方便</view>
+  </view>
+</view>

components/add-tips/index.wxml

@@ -0,0 +1 @@
+.box{position:fixed;right:0;z-index:999;display:flex;justify-content:flex-end;align-items:flex-end;flex-direction:column;width:600rpx;}.arrow{width:0;height:0;border-width:5px;border-style:solid;border-color:transparent transparent rgba(0,0,0,0.75) transparent;}.body{background-color:rgba(0,0,0,0.75);border-radius:2px;display:flex;align-items:center;justify-content:center;height:42px;padding:10px;}.tips{flex:1;color:#FFF;font-size:14px;font-weight:700;}.logo{height:42px;width:42px;border-radius:8px;margin-right:10px;}