mix-public 1.0.3 → 1.0.5

package/README.md

@@ -45,4 +45,6 @@
 - v1.0.0 项目初始化
 - v1.0.1 调整文档调用方式
 - v1.0.2 调整publicLib调用方式(区分类app样式及单公共调用方法)
-- v1.0.3 添加pag依赖(调整单独调用方法参数)
+- v1.0.3 添加pag依赖(调整单独调用方法参数)
+- v1.0.4 title模块添加背景色配置
+- v1.0.5 优化网页端实现方法(优化统一图片选择回调参数/APP跳转/小程序跳转/添加 onstart 生命周期/优化返回根页面/优化链接分享/添加 web 图片下载方法)

package/mixRender.css

@@ -12,7 +12,7 @@
 }
 
 #mix-navigation {
-    height: 50px;
+    height: 46px;
     width: 100vw;
     display: flex;
     align-items: center;
@@ -44,8 +44,8 @@
 
 #mix-navigation .mix-navigation-left img,
 #mix-navigation .mix-navigation-right img {
-    width: 22px;
-    height: 22px;
+    width: 20px;
+    height: 20px;
 }
 
 .mix-navigation-left-1,
@@ -61,7 +61,7 @@
 }
 
 #mix-navigation .mix-navigation-center .mix-navigation-title {
-    font-size: 20px;
+    font-size: 16px;
 }
 
 #mix-navigation .mix-navigation-right,
@@ -125,4 +125,171 @@
     display: flex;
     align-items: center;
     justify-content: center;
-}
+}
+
+@font-face {
+  src: url("data:application/x-font-ttf;base64,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ISg3ExMcDg8bEREs0BUdHRWMFR0dFQAAAAIAIgAAAVICzgAnADUAADcTJw4BIyImJy4BJy4BNTQ2Nz4BNz4BMzIWFx4BFx4BFRQGBw4BBwsBFBYzMjY9ATQmIyIGFUd0AgUVERsuDQcIAgMCAgMCCQcUQyoqQhQHCgMCAgICAwcFhjEeFBQeHhQUHgABKwIEBRoUChcSEjcqIy0QDxYMISQlIAwWDxAtIyErDxAZDv6aAbEXHBwXhBccHBcAAQAAAAEBBkfZJz9fDzz1AAkD6AAAAAB8JYZQAAAAANl6IicAAP/6AfQCzgABAAkAAgAAAAAAAAABAAACyP7gAMgB9AAAAAAB9AABAAAAAAAAAAAAAAAAAAAAAwH0AAABhQAsAXQAIgA1ACIAIgAJACIAIgAiACIAIgAAAAAAJgAyAG4AgAC8AR4BOAF4AcwB4AJgArIAAAABAAAADABYAAUAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAEgDeAAEAAAAAAAAATAAAAAEAAAAAAAEADQBMAAEAAAAAAAIABABZAAEAAAAAAAMAKABdAAEAAAAAAAQAEgCFAAEAAAAAAAUACACXAAEAAAAAAAYAEQCfAAEAAAAAAAcACgCwAAEAAAAAAAkADgC6AAMAAQQJAAAAlgDIAAMAAQQJAAEAGgFeAAMAAQQJAAIACAF4AAMAAQQJAAMAUAGAAAMAAQQJAAQAJAHQAAMAAQQJAAUAEAH0AAMAAQQJAAYAIgIEAAMAAQQJAAcAFAImAAMAAQQJAAkAHAI6Q29weXJpZ2h0IMKpIDE5ODEsIDIwMDIgSGVpZGVsYmVyZ2VyIERydWNrbWFzY2hpbmVuIEFHLiBBbGwgcmlnaHRzIHJlc2VydmVkLkRJTiBDb25kZW5zZWRCb2xkRElOIENvbmRlbnNlZCBCb2xkOyAxMy4yZDJlMTsgMjAxOC0wMS0yMkRJTiBDb25kZW5zZWQgQm9sZDEzLjJkMmUxRElOQ29uZGVuc2VkLUJvbGRESU5TY2hyaWZ0TGlub3R5cGUgU3RhZmYAQwBvAHAAeQByAGkAZwBoAHQAIACpACAAMQA5ADgAMQAsACAAMgAwADAAMgAgAEgAZQBpAGQAZQBsAGIAZQByAGcAZQByACAARAByAHUAYwBrAG0AYQBzAGMAaABpAG4AZQBuACAAQQBHAC4AIABBAGwAbAAgAHIAaQBnAGgAdABzACAAcgBlAHMAZQByAHYAZQBkAC4ARABJAE4AIABDAG8AbgBkAGUAbgBzAGUAZABCAG8AbABkAEQASQBOACAAQwBvAG4AZABlAG4AcwBlAGQAIABCAG8AbABkADsAIAAxADMALgAyAGQAMgBlADEAOwAgADIAMAAxADgALQAwADEALQAyADIARABJAE4AIABDAG8AbgBkAGUAbgBzAGUAZAAgAEIAbwBsAGQAMQAzAC4AMgBkADIAZQAxAEQASQBOAEMAbwBuAGQAZQBuAHMAZQBkAC0AQgBvAGwAZABEAEkATgBTAGMAaAByAGkAZgB0AEwAaQBuAG8AdAB5AHAAZQAgAFMAdABhAGYAZgACAAAAAAAA/5wAMgAAAAAAAAAAAAAAAAAAAAAAAAAMAAwAAAAQABMAFAAVABYAFwAYABkAGgAbABwAAA==");
+  font-family: DINCondensed-Bold;
+}
+
+.crop-whole-cover {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background-color: #5c5c5c;
+}
+
+.crop-component {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.crop-component .crop-mask {
+  overflow: hidden;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.crop-component .crop-cover {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.crop-component .crop-rotate {
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 68px;
+  margin: auto;
+  width: 92%;
+  height: 66px;
+  mask-image: linear-gradient(
+    90deg,
+    rgb(255 255 255 / 0%) 0,
+    rgb(255 255 255 / 64%) 50%,
+    rgb(255 255 255 / 0%) 100%
+  );
+}
+
+.crop-component .crop-rotate .current {
+  margin: auto;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 9px solid #d8d8d8;
+  border-radius: 1px;
+  width: 0;
+  height: 0;
+}
+
+.crop-component .crop-rotate .lineation {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 0;
+  padding: 0 0 8px;
+  height: 50px;
+  -webkit-touch-callout: none;
+  user-select: none;
+  font-size: 0;
+}
+
+.crop-component .crop-rotate .lineation li {
+  display: inline-block;
+  flex: 1;
+  height: 100%;
+}
+
+.crop-component .crop-rotate .lineation .number {
+  overflow: hidden;
+  width: 100%;
+  height: 32px;
+  line-height: 36px;
+  text-align: center;
+  font-family: DINCondensed-Bold;
+  font-size: 16px;
+  color: #fff;
+}
+
+.crop-component .crop-rotate .lineation .bg {
+  width: 100%;
+  height: 18px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAkCAQAAABbaR7PAAAA3ElEQVR42u2YMQ6DMAxFfSOuVRjKWSBsyRT3nq9zFxvJpEQoGbEUvTzs6CsiFy4mdnYm6Xexoyhbz4iViqJ9IypKHRYvsDgQ+0dkZjHrK2sM0d5BhMUmEA4Os54pDuLHnmgK2SFINmJyEXPQYrEO6Us6YzGKmKMWPcTi/ujmFpN9BtdibW/xH72Y2/Ziub8XU/jSiVtMLS2qn3Tut1jbW7xiXB5gsfQ/0eGru/uJfgRi+6s7nHRGXhx5ceTFkRdHXnxUXtyoKHtbizOz89zxNqonHpLtHURYeP1++QJbckm6SmQBuQAAAABJRU5ErkJggg==");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.crop-component .crop-btns {
+  display: flex;
+  position: absolute;
+  bottom: 16px;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: 24px;
+}
+
+.crop-component .crop-btns button {
+  display: inline-block;
+  position: relative;
+  flex: 1;
+  margin: auto;
+  padding: 0;
+  border: none;
+  height: 100%;
+  background-color: transparent;
+}
+
+.crop-component .crop-btns button::after {
+  display: inline-block;
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  content: "";
+}
+
+.crop-component .crop-close::after {
+  width: 18px;
+  height: 18px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAArElEQVR42q2WWw6AIAwEuQ/eh+t4cMkajCERH7R1+ifZnSCUtikdoawUi4tTqzaVCEpFm1Z1TIsA6sC0aCjl88ON6pjmzOOCGfXo8qNeHT7Up9qOmiptKJNqLjLv+1voOsl3sftunw2hbLubYkl7N0YxA6qqhjED6g/mRNWOqWEMBoJ+DTps6PqhhISeCPRooTICFTao1ELFH2pHUIOEWrYWbohgxhpw0GJGvx1lZkUZoxUOQQAAAABJRU5ErkJggg==");
+  background-size: 100% 100%;
+}
+
+.crop-component .crop-btn::after {
+  width: 21px;
+  height: 15px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAeCAYAAABaKIzgAAAAgklEQVR4AezOAQaEMQwF4d4nB+p1evBlFn4KFBheyAOCjG+lDqiVPmADP+DkI+9OByTfXR2QuwtykIMc5CCB6oA89zEb+Q4EIOsdcpBC0Ec6YaHlY4WGhxWQAlZAClgBKWAFpIcVkA5WQDpYASlgBaSCjUb+h+TYACB+DMUBSFKjAAABevZOv672hAAAAABJRU5ErkJggg==");
+  background-size: 100% 100%;
+}
+
+.crop-component .crop-reset::after {
+  width: 22px;
+  height: 19px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAmCAQAAAAVFrHsAAAB3klEQVR42u3XPUhVUQAH8OuzngaF1pAFVkQJElFEoPaxRELY0uAQVLS5REM0JCQYpNELiqitpoaGdKjN0cCKIFoSxOGRROJTEBoqkj6ev/B0faJpXOk9IvD8h3M4h/Pjcr7gRqKiJi0jJycTaTHq78ssnJnrKAY7B+fmOvwfcOZ3uOibV1y4kBW4hHCJTsUf4RrVS06rULVoUkngl96o0Wh8Xt6Hse4lLsj2JPAek7IaXAt5ZyzUV2P4m7NxJvQX2muTrfFuN5SF1gF5V1QURrpNidzWq1feYKh71S5389KG8NC4vfPgYVk9cZ5iVxK43quQmY3qkUe7rLfWz4NfaI9zLylc65Y+bDDgq9M4r8kPj+LX61OAc57FGUwKz+QU7vrimMoAR7pwVOS+bID7tMbpXC5crUlUgFc7E7bziQGRIXl504Q6vzz416mYhWfzXI9InQsqtYUFO+J48it9B1sWgdM+65L22oh1MfzYh6THrcO0YWPOaVLnsmZbbVOvRjP2uynvsMjFAG80qT/Jla7yUadyl0wtuLYnnDQi5YHrUiZ8N6FcpNWgTUm+uEE61Cmb7dPooEMha0R2hpGywLXZEc9Y9Y+fzRV4BS5RKSE8WhJ3tFi/CgtYLZES5Sdy/jxAWzo1BgAAAABJRU5ErkJggg==");
+  background-size: 100% 100%;
+}
+
+.crop-component .crop-around::after {
+  width: 18px;
+  height: 22px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAsCAQAAACnWtJ+AAABHklEQVR42u3UsUrDQBzH8YvFrYOhvoLp0BcohA5dhIzZdexrZHMU+wrt2sG9Q9LBICg4CkV0CfQFdBP9OpikqebSS//UQfJbj3zucv/7/5WqCBaWkocBz9xIkUMu+ACQMSfckUbCjHgDIcQx12xkN+aUFYghLvmkPK8siZhwhr2d6WGSd0L8auiAK+2JfibGrX1H2oxp1a4abRyGBDxsLM052vkd0WVWoB63UQ73+vLT56Vwqpag1+iwWN+VSfc/cavdaE25Jo9UO4/o5D8YS0dNPz+TL6WyCoZSqJs3ji2lsid6rvBIjFoiwSuBgnR1qgwZgKQEGqZrkaJGSnvgO0sp1M5GnxBS+fcN9AfQL7GBGuifQaJRW4REw38P+QIQNLRX56aQYgAAAABJRU5ErkJggg==");
+  background-size: 100% 100%;
+}
+
+@media only screen and (device-width <= 375px) and (device-height <= 812px) and (device-pixel-ratio: 3),
+  (device-width <= 414px) and (device-height <= 896px) {
+  .crop-component .crop-btns {
+    bottom: 43px;
+  }
+
+  .crop-component .crop-rotate {
+    bottom: 95px;
+  }
+}

package/mixRender.js

@@ -36,9 +36,33 @@ export default (op) => {
     mixDeviceInfo: op.mixDeviceInfo || ""
   };
   if(!mixJustMethod){
+    // 创建onstart生命周期事件代理
+    const onStartEventList = []
+    window.OnStartLoad = function (event, config) {
+      onStartEventList.push(event)
+      if (config?.immediate) {
+        event()
+      }
+    }
+    window.OnStart = function () {
+      onStartEventList.forEach((event) => {
+        event()
+      })
+    }
     renderBasic();
     mixNavigation(mixAppParameter);
     mixTabbar(mixAppParameter);
+    // 若为web端且页面为非首次加载，则执行OnStart(需转为异步延迟执行)
+    if(mixAppParameter.mixIsWeb){
+      if (window.performance) {
+        const navigationType = window.performance.navigation.type;
+        if (navigationType === window.performance.navigation.TYPE_BACK_FORWARD) {
+            setTimeout(() => {
+              window.OnStart();
+            },10);
+        }
+      }
+    }
   }
   return mixPublicLib(mixAppParameter.mixIsWeb)
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mix-public",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "use mix-app",
   "main": "mixRender.js",
   "scripts": {

package/pageRender/navigation.js

@@ -6,6 +6,7 @@ export default (op) => {
         const currentObj = res;
         if(currentObj && currentObj.showTitle){
             titleModule.style.display = 'flex'
+            titleModule.style.backgroundColor = "#" + currentObj.backgroudColor
             // 自定义标题内容
             if(currentObj.title){
                 const title = document.querySelector(".mix-navigation-title");