修改

.gitignore

+node_modules

.nine/entry.info.js

+import * as config from '../src/schema.js'
+import demo from '../src/demo.js'
+import { nineConfig } from '../package.json';
+
+const componentConfig = {
+  ...config,
+  props: config.default || config.props,
+  type: config.type || 'component',
+  slots: config.slots,
+  provides: config.provides,
+  consumes: config.consumes,
+  nineConfig,
+}
+
+// export { schema, demo };
+
+export * from '../src/schema.js'
+
+function doRegister() {
+  if (
+    typeof window !== 'undefined' &&
+    typeof window.registerNineComponent === 'function'
+  ) {
+    window.registerNineComponent(
+      'DevelopingComponent', // 开发时全部默认该名字
+      componentConfig,
+      demo
+    )
+  }
+}
+
+doRegister()

.nine/entry.js

+import Component from '../src/component.vue'
+import * as config from '../src/schema.js'
+import demo from '../src/demo.js'
+import { nineConfig } from '../package.json';
+
+export default Component
+
+const componentConfig = {
+  ...config,
+  props: config.default || config.props,
+  type: config.type || 'component',
+  slots: config.slots,
+  provides: config.provides,
+  consumes: config.consumes,
+  nineConfig,
+}
+
+// export { schema, demo };
+
+export * from '../src/schema.js'
+
+function doRegister() {
+  if (
+    typeof window !== 'undefined' &&
+    typeof window.registerNineComponent === 'function'
+  ) {
+    window.registerNineComponent(
+      'DevelopingComponent', // 开发时全部默认该名字
+      Component,
+      // schema,
+      componentConfig,
+      demo
+    )
+  }
+}
+
+doRegister()

.nine/entry.prod.js

+import Component from "../src/component.vue";
+// import { nineConfig } from "./package.json";
+
+function doRegister() {
+  if (
+    typeof window !== "undefined" &&
+    typeof window.registerNineComponent === "function"
+  ) {
+    window.registerNineComponent('DevelopingComponent', Component);
+  }
+}
+
+doRegister();

dist/nineprivatedrainage.58f1cb32.min.js

+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n=e();for(var o in n)("object"==typeof exports?exports:t)[o]=n[o]}}(this,(function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=2)}([function(t,e,n){},function(t,e,n){"use strict";n(0)},function(t,e,n){"use strict";n.r(e);var o="micromessenger"==navigator.userAgent.toLowerCase().match(/MicroMessenger/i),i={name:"NinePrivateDrainage",props:{wxBackgroundImage:{type:String,default:"https://cdn.wanwudezhi.com/static/web-static/image/0a3b011f569c4620b483ae2509170253_236x420.jpeg"},content:{type:String,default:"请输入微信号"},wxUrl:{type:String,default:""},backgroundImage:{type:String,default:"https://cdn.wanwudezhi.com/static/web-static/image/53a5d50c2732e1d19d455240f65ac41f_202x322.jpeg"},buttonImage:{type:String,default:"https://cdn.wanwudezhi.com/static/web-static/image/6c3d7c6c1fe1469cdf38e6508ddd73f5_715x148.png"},fontColor:{type:String,default:"#777"},bottomPosition:{type:Number,default:40}},data:function(){return{ready:!1,isWxSet:!1}},computed:{textContentStyle:function(){return{color:this.fontColor}},contentStyle:function(){return{bottom:this.bottomPosition+"px"}},wxSetBackground:function(){return{backgroundImage:"url(".concat(this.wxBackgroundImage,")")}}},created:function(){},methods:{copyAndGo:function(){var t,e;if(0==this.content.length?this.$toast("请先配置微信号"):(t=this.content,(e=document.createElement("input")).setAttribute("readonly","readonly"),e.setAttribute("value",t),document.body.appendChild(e),e.select(),e.setSelectionRange(0,9999),document.execCommand("copy"),document.body.removeChild(e),this.$toast("复制成功，打开微信添加好友")),o)this.isWxSet=!0;else{if(console.log(this.wxUrl),0==this.wxUrl.length||"请输入"==this.wxUrl)return this.$toast("请先配置小程序跳转schema地址");!function(t){Date.now();var e=window.document,n=e.createElement("iframe");window.location.href=t,n.src=t,n.style.cssText="display:none;border:0;width:0;height:0;",e.body.appendChild(n),setTimeout((function(){e.body.removeChild(n),window.location.href="weixin://"}),5e3)}(this.wxUrl)}},bgImageLoaded:function(){this.ready=!0}}};n(1);var r=function(t,e,n,o,i,r,a,s){var c,d="function"==typeof t?t.options:t;if(e&&(d.render=e,d.staticRenderFns=n,d._compiled=!0),o&&(d.functional=!0),r&&(d._scopeId="data-v-"+r),a?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},d._ssrRegister=c):i&&(c=s?function(){i.call(this,(d.functional?this.parent:this).$root.$options.shadowRoot)}:i),c)if(d.functional){d._injectStyles=c;var u=d.render;d.render=function(t,e){return c.call(e),u(t,e)}}else{var l=d.beforeCreate;d.beforeCreate=l?[].concat(l,c):[c]}return{exports:t,options:d}}(i,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{directives:[{name:"show",rawName:"v-show",value:t.ready,expression:"ready"}]},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.isWxSet,expression:"isWxSet"}],staticClass:"wxBjShow",style:t.wxSetBackground}),t._v(" "),n("div",{staticClass:"container-cjw"},[n("img",{staticClass:"background-image",attrs:{src:t.backgroundImage,alt:""},on:{load:t.bgImageLoaded}}),t._v(" "),n("div",{staticClass:"content",style:t.contentStyle},[n("div",{staticClass:"text-content",style:t.textContentStyle},[n("span",[t._v(t._s(t.content))])]),t._v(" "),n("div",{staticClass:"button-container"},[n("img",{staticClass:"button-image",attrs:{src:t.buttonImage},on:{click:t.copyAndGo}})])])])])}),[],!1,null,"82cfdfe4",null).exports;"undefined"!=typeof window&&"function"==typeof window.registerNineComponent&&window.registerNineComponent("DevelopingComponent",r)}])}));
\ No newline at end of file

dist/styles.58f1cb328d7b5bda6bc9.css

+.wxBjShow[data-v-82cfdfe4] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  z-index: 99;
+}
+.container-cjw[data-v-82cfdfe4] {
+  position: relative;
+  min-height: 1rem;
+}
+.container-cjw .background-image[data-v-82cfdfe4] {
+  width: 100%;
+  display: block;
+}
+.container-cjw .button-image[data-v-82cfdfe4] {
+  width: 4.17rem;
+}
+.container-cjw .content[data-v-82cfdfe4] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.container-cjw .text-content[data-v-82cfdfe4] {
+  width: 90%;
+  font-size: 0.27rem;
+  text-align: center;
+  font-family: PingFang SC;
+  font-weight: 400;
+}
+.container-cjw .button-container[data-v-82cfdfe4] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.18rem;
+}
+.container-cjw .copy-and-go[data-v-82cfdfe4] {
+  width: 3rem;
+  line-height: 0.6rem;
+  text-align: center;
+  background: #00f;
+  color: #fff;
+}
+

package.json

+{
+  "name": "@wanwu/nine-nine-copy-jump-wechat",
+  "version": "0.0.10",
+  "files": [
+    "dist"
+  ],
+  "nineConfig": {
+    "componentName": "NinePrivateDrainage",
+    "displayName": "私域外部引流",
+    "functionTypes": [
+      "投放组件"
+    ],
+    "homeLink": "https://code.aliyun.com/PlayGoods-Nine/nine-copy-jump-wechat",
+    "showCaseImage": "./show-case.png"
+  },
+  "scripts": {
+    "build": "nine build",
+    "publish": "nine publish",
+    "dev": "nine dev"
+  },
+  "dependencies": {
+    "@wanwu/base-fn": "^1.0.72",
+    "@wanwu/nine-dll": "^4.1.8",
+    "@wanwu/nine-tools": "^2.0.24"
+  }
+}

src/component.vue

+<template>
+  <div v-show="ready">
+    <div class="wxBjShow" v-show="isWxSet" :style="wxSetBackground"></div>
+
+    <div class="container-cjw">
+      <img
+        :src="backgroundImage"
+        class="background-image"
+        alt=""
+        @load="bgImageLoaded"
+      />
+      <div class="content" :style="contentStyle">
+        <div class="text-content" :style="textContentStyle">
+          <span>{{ content }}</span>
+        </div>
+        <div class="button-container">
+          <img :src="buttonImage" class="button-image" @click="copyAndGo" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//复制
+const copyText = (content, vm) => {
+  const input = document.createElement("input");
+  input.setAttribute("readonly", "readonly");
+  // input.setAttribute("type", "hidden");
+  input.setAttribute("value", content);
+  document.body.appendChild(input);
+  input.select();
+  input.setSelectionRange(0, 9999);
+  if (document.execCommand("copy")) {
+    // alert('success')
+    // vm.$logE('')
+  } else {
+    // alert('fail')
+    // vm.$logE({})
+  }
+  document.body.removeChild(input);
+};
+
+//跳转到微信
+function tiaozhuan(nativeUrl) {
+  var last = Date.now(),
+    doc = window.document,
+    ifr = doc.createElement("iframe");
+
+  window.location.href = nativeUrl;
+  //创建一个隐藏的iframe
+  ifr.src = nativeUrl;
+  ifr.style.cssText = "display:none;border:0;width:0;height:0;";
+  doc.body.appendChild(ifr);
+
+  setTimeout(function () {
+    doc.body.removeChild(ifr);
+    window.location.href = "weixin://";
+  }, 5000);
+}
+
+//是否是微信浏览器
+const is_weixn = () => {
+  var ua = navigator.userAgent.toLowerCase();
+  if (ua.match(/MicroMessenger/i) == "micromessenger") {
+    return true;
+  } else {
+    return false;
+  }
+};
+
+let isWx = is_weixn();
+//判断是否是微信浏览器
+
+export default {
+  name: "NinePrivateDrainage",
+  props: {
+    wxBackgroundImage: {
+      type: String,
+      default:
+        "https://cdn.wanwudezhi.com/static/web-static/image/0a3b011f569c4620b483ae2509170253_236x420.jpeg",
+    },
+    content: {
+      type: String,
+      default: "请输入微信号",
+    },
+    wxUrl: {
+      type: String,
+      default: "",
+    },
+
+    backgroundImage: {
+      type: String,
+      default:
+        "https://cdn.wanwudezhi.com/static/web-static/image/53a5d50c2732e1d19d455240f65ac41f_202x322.jpeg",
+    },
+    buttonImage: {
+      type: String,
+      default:
+        "https://cdn.wanwudezhi.com/static/web-static/image/6c3d7c6c1fe1469cdf38e6508ddd73f5_715x148.png",
+    },
+    fontColor: {
+      type: String,
+      default: "#777",
+    },
+    bottomPosition: {
+      type: Number,
+      default: 40,
+    },
+  },
+  data() {
+    return {
+      ready: false,
+      isWxSet: false,
+    };
+  },
+  computed: {
+    textContentStyle() {
+      return {
+        color: this.fontColor,
+      };
+    },
+    contentStyle() {
+      return {
+        bottom: this.bottomPosition + "px",
+      };
+    },
+    wxSetBackground() {
+      return {
+        backgroundImage: `url(${this.wxBackgroundImage})`,
+      };
+    },
+  },
+  created() {},
+  methods: {
+    copyAndGo() {
+      if (this.content.length == 0) {
+        this.$toast("请先配置微信号");
+      } else {
+        copyText(this.content);
+        this.$toast("复制成功，打开微信添加好友");
+      }
+
+      if (isWx) {
+        this.isWxSet = true;
+      } else {
+        console.log(this.wxUrl);
+        if (this.wxUrl.length == 0 || this.wxUrl == "请输入") {
+          return this.$toast("请先配置小程序跳转schema地址");
+        }
+        tiaozhuan(this.wxUrl);
+      }
+    },
+    bgImageLoaded() {
+      this.ready = true;
+    },
+  },
+};
+</script>
+
+<style scoped lang="stylus">
+.wxBjShow {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  z-index: 99;
+}
+
+.container-cjw {
+  position: relative;
+  min-height: 100px;
+
+  .background-image {
+    width: 100%;
+    display: block;
+  }
+
+  .button-image {
+    width: 417px;
+  }
+
+  .content {
+    position: absolute;
+    left: 0;
+    // top 0
+    right: 0;
+    // bottom 0
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .text-content {
+    width: 90%;
+    font-size: 27px;
+    text-align: center;
+    font-family: PingFang SC;
+    font-weight: 400;
+  }
+
+  .button-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 18px;
+  }
+
+  .copy-and-go {
+    width: 300px;
+    line-height: 60px;
+    text-align: center;
+    background: blue;
+    color: #fff;
+  }
+}
+</style>

src/demo.js

+/**
+ * 这里导出的对象会用于在九宫中展示组件的样例
+ */
+export default {
+  name: "Yidao"
+};

src/schema.js

+export default {
+  type: "object",
+  properties: {
+    wxBackgroundImage: {
+      type: "string",
+      format: "image",
+      title: "微信环境下展示图片",
+      default:
+        "https://cdn.wanwudezhi.com/static/web-static/image/0a3b011f569c4620b483ae2509170253_236x420.jpeg",
+    },
+    wxUrl: {
+      type: "string",
+      title: "小程序链接",
+      default: "请输入",
+    },
+    content: {
+      type: "string",
+      title: "代码内容",
+      default: "请输入微信号",
+    },
+    fontColor: {
+      type: "string",
+      format: "color",
+      title: "字体颜色",
+      default: "#777",
+    },
+    buttonImage: {
+      type: "string",
+      format: "image",
+      title: "按钮图",
+      default:
+        "https://cdn.wanwudezhi.com/static/web-static/image/6c3d7c6c1fe1469cdf38e6508ddd73f5_715x148.png",
+    },
+    bottomPosition: {
+      type: "number",
+      title: "内容距离底部距离",
+      default: 40,
+    },
+    backgroundImage: {
+      type: "string",
+      format: "image",
+      title: "背景图",
+      default:
+        "https://cdn.wanwudezhi.com/static/web-static/image/53a5d50c2732e1d19d455240f65ac41f_202x322.jpeg",
+    },
+  },
+  required: ["content", "wxBackgroundImage", "wxUrl"],
+};