WebClip在線工具

扒了深度學習資源整合這位作者的這篇文章的代碼之后,恍然大悟,原來主題里內置的Vue還可以這么用~ 所以就把WebClip在線工具的代碼遷移到博客園試試水😄 ,操作如下~

<!-- run -->
<div class="source-download">
	<div class="source-type zip">
	</div>
	<div class="source-info">
		<p>github代碼.zip</p>
		<p>@v2021-07-04</p>
	</div>
	<div class="download-btn">
		<a href="https://github.com/WangGuibin/webclicp-vue-app/archive/refs/heads/main.zip"></a>
	</div>
</div>
<style type="text/css">
      .source-download {
		border-radius: 6px;
		width: 100%;
		padding: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--background-color-base);
		margin:20px 0;
	}

	.source-type {
		width: 60px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		color:#fff;
		border-radius: 2px;
		background: var(--color-primary)
	}

	.zip:before {
		font-family: fontawesome;
		content: "\f1c6"
	}

	.source-info {
		flex-grow: 1;
		display: flex;
		padding:0 20px;
		flex-direction: column;
		justify-content: center;
	}

	.source-info p:nth-child(1) {
		margin:0!important;
                font-size: var(--text-h4);
		font-weight:400;
                color: var(--color-text-primary);
	}
	.source-info p:nth-child(2) {
		margin:0!important;
                font-size: var(--text-h5);
                color: var(--color-text-secondary);
	}
	.download-btn {
		width: 30px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.download-btn a::before {
		font-family: fontawesome;
		content: "\f019";
		color:var(--color-primary)
	}
</style>

<!-- run -->
<style>
#app {
  margin: 20px;
  padding: 15px;
  width: 300px;
}
.button-style {
  width: 300px;
  height: 50px;
  font-size: 20px;
  font-weight: 800px;
}
</style>

<div id="app">
    <div style="color: red">
      (建議使用Safari手機自帶的瀏覽器打開體驗更佳哦~)
    </div>
    <h6>功能介紹:</h6>
    <ol>
      <li>選擇web類型就類似桌面書簽</li>
      <li>選擇app類型即類似於新增一個app入口和圖標副本</li>
    </ol>
    <el-form :model="formData">
      <el-form-item label="應用類型: " label-width="100px">
        <el-radio-group v-model="formData.type">
          <el-radio label="web"></el-radio>
          <el-radio label="app"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="桌面顯示名稱: " label-width="100px">
        <el-input
          v-model="formData.appName"
          placeholder="請輸入名稱"
        ></el-input>
      </el-form-item>

      <el-form-item
        :label="
          this.formData.type === 'web'
            ? 'URL地址: '
            : 'Universal Link 或者 URL Scheme : '
        "
      >
        <el-input
          v-model="formData.URL"
          type="url"
          placeholder="請輸入link或者scheme"
        ></el-input>
      </el-form-item>
      <div v-if="this.formData.type === 'app'">
        <p>
          蘋果App的這個<a
            href="https://developer.apple.com/library/archive/documentation/General/Conceptual/AppSearch/UniversalLinks.html#//apple_ref/doc/uid/TP40016308-CH12-SW1"
            target="_blank"
          >
            universal link</a
          >
          URL地址具體如何獲取尚未可知,只能是自己已知的去驗證或者主流的App
          例如微信(<a href="https://www.wechat.com" target="_blank"
            >https://www.wechat.com</a
          >) , 淘寶(<a href="https://b.mashort.cn" target="_blank"
            >https://b.mashort.cn</a
          >) <span> ~~~~~~ </span>
          <a
            href="https://search.developer.apple.com/appsearch-validation-tool/"
            target="_blank"
          >
            蘋果universal link驗證入口
          </a>
        </p>
      </div>
      <el-form-item
        v-if="formData.type === 'app'"
        label="bundleId: "
        label-width="100px"
      >
        <el-input
          v-model="formData.bundleId"
          placeholder="請輸入bundleId"
        ></el-input>
      </el-form-item>

      <el-form-item label="圖標(可選): " label-width="120px">
        <input
          type="file"
          accept="image/*"
          label="選擇圖片"
          @change="selectImageAction"
        />
        <img
          v-show="imagePath.length"
          :src="imagePath"
          alt="圖標"
          width="100px"
          height="100px"
        />
      </el-form-item>

      <el-form-item label="能否從桌面刪除: ">
        <el-switch v-model="formData.canDeleteDesktop"></el-switch>
      </el-form-item>

      <el-form-item>
        <el-button
          class="button-style"
          type="primary"
          round
          :loading="loading"
          @click="onSubmit"
          size="medium"
          >生成配置</el-button
        >
      </el-form-item>
    </el-form>
  </div>

<script>
new Vue({
  el: "#app",
  name: "App",
  data() {
    return {
      loading: false,
      imagePath: "",
      base64Icon: "",
      formData: {
        type: "web",
        appName: "",
        URL: "",
        bundleId: "",
        appId: this.getUUID(),
        canDeleteDesktop: true,
      },
    };
  },
  methods: {
    getUUID() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16).toUpperCase();
        }
      );
    },
    //獲取文件路徑
    getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },
    selectImageAction(e) {
      var _this = this;
      var file = e.target.files[0];
      this.imagePath = this.getObjectURL(file);
      var reader = new FileReader();
      if (file) {
        //通過文件流將文件轉換成Base64字符串
        reader.readAsDataURL(file);
        reader.onloadend = function () {
          // console.log(reader.result);
          _this.base64Icon = reader.result;
        };
      }
    },
    onSubmit() {
      if (this.formData.appName.length === 0) {
        this.$message.error("請輸入應用名稱(web/app的名字),再提交生成配置~");
        return;
      }
      if (this.formData.URL.length === 0) {
        this.$message.error("請輸入URL網址,再提交生成配置~");
        return;
      }

      if (this.formData.type === "app" && this.formData.bundleId.length === 0) {
        this.$message.error("請輸入應用bundleId,再提交生成配置~");
        return;
      }

      if (this.formData.type === "web" && this.formData.URL.length !== 0) {
        this.formData.bundleId = "";
      }
      this.loading = true;
      this.createXML();
    },
    createXML() {
      var base64Str = this.base64Icon.replace(/^data:image\/\w+;base64,/, "");
      var iconXML =
        base64Str && base64Str.length
          ? `<key>Icon</key>
      <data>${base64Str}</data>`
          : "";
      // URL是必填的
      var URL = `<key>URL</key>
      <string>${
        this.formData.URL.length ? this.formData.URL : "https://foo.example.com"
      }</string>`;
      var bundleId = this.formData.bundleId.length
        ? `<key>TargetApplicationBundleIdentifier</key>
          <string>${this.formData.bundleId}</string>`
        : "";
      var xmlText = `<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>PayloadContent</key>
  <array>
    <dict>
      <key>FullScreen</key>
      <true/>
      ${iconXML}
      <key>IgnoreManifestScope</key>
      <true/>
      <key>IsRemovable</key>
      <${this.formData.canDeleteDesktop}/>
      <key>Label</key>
      <string>${this.formData.appName}</string>
      <key>PayloadDescription</key>
      <string>${this.formData.appName}WebClip配置</string>
      <key>PayloadDisplayName</key>
      <string>Web Clip</string>
      <key>PayloadIdentifier</key>
      <string>com.apple.webClip.managed.${this.formData.appId}</string>
      <key>PayloadType</key>
      <string>com.apple.webClip.managed</string>
      <key>PayloadUUID</key>
      <string>${this.formData.appId}</string>
      <key>PayloadVersion</key>
      <integer>1</integer>
      <key>Precomposed</key>
      <true/>
      ${URL}
      ${bundleId}
    </dict>
  </array>
  <key>PayloadDisplayName</key>
  <string>${this.formData.appName}的描述文件</string>
  <key>PayloadIdentifier</key>
  <string>CoderWGBDeMacBook-Pro.${this.getUUID()}</string>
  <key>PayloadRemovalDisallowed</key>
  <false/>
  <key>PayloadType</key>
  <string>Configuration</string>
  <key>PayloadUUID</key>
  <string>${this.getUUID()}</string>
  <key>PayloadVersion</key>
  <integer>1</integer>
</dict>
</plist>
`;

      this.saveConfigFile(
        xmlText,
        "text/xml",
        `${this.formData.appName}.mobileconfig`
      );
      this.loading = false;
    },

    saveConfigFile(textValue, fileType, fileName) {
      var blob;
      if (typeof window.Blob == "function") {
        blob = new Blob([textValue], {
          type: fileType,
        });
      } else {
        var BlobBuilder =
          window.BlobBuilder ||
          window.MozBlobBuilder ||
          window.WebKitBlobBuilder ||
          window.MSBlobBuilder;
        var bb = new BlobBuilder();
        bb.append(textValue);
        blob = bb.getBlob(fileType);
      }
      var URL = window.URL || window.webkitURL;
      var blobUrl = URL.createObjectURL(blob);
      var archorDom = document.createElement("a");
      if ("download" in archorDom) {
        archorDom.style.visibility = "hidden";
        archorDom.href = blobUrl;
        archorDom.download = fileName;
        document.body.appendChild(archorDom);
        var evt = document.createEvent("MouseEvents");
        evt.initEvent("click", true, true);
        archorDom.dispatchEvent(evt);
        document.body.removeChild(archorDom);
      } else if (navigator.msSaveBlob) {
        navigator.msSaveBlob(blob, fileName);
      } else {
        location.href = blobUrl;
      }
    },
  },
});
</script>