devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue 生成二维码海报并进行微信分享_vue 生成图片+二维码 分享

作者：花生_TL007 | 2024-02-17 22:21:25

赞

踩

vue 生成图片+二维码 分享

插件：Vue Canvas Poster 

网址:Vue Canvas Poster

1、安装

cnpm i vue-canvas-poster --save

2、使用

  1. <template>
  2.   <div class="share wh100">
  3.     <navBar title="邀请好友" :leftArrowFlag="true" />
  4.     <div class="content">
  5.       <h2>邀请亲友加入亲友团</h2>
  6.       <p>
  7.         邀请亲友加入后，可与您一起编写逝者生平故事，留言、上传照片、跟您一起完善逝者信息、共同缅怀
  8.       </p>
  9.       <div class="share_item">
  10.         <h3>方法一：长按海报发送朋友邀请加入</h3>
  11.         <div class="item_content">
  12.           <vue-canvas-poster
  13.             :widthPixels="1000"
  14.             :painting="painting"
  15.             @success="success"
  16.             @fail="fail"
  17.           ></vue-canvas-poster>
  18.           <div class="poster_box">
  19.               <img v-if="showPoster" class="poster_img" :src="detail.posterImg" alt="" />
  20.           </div>
  21.         </div>
  22.       </div>
  23.       <div class="share_item">
  24.         <h3>方法二：点击发送链接邀请亲朋加入</h3>
  25.         <div class="item_content">
  26.           <div class="large_btn" @click="wxShare"><span>点击发送链接邀请亲朋加入</span></div>
  27.         </div>
  28.       </div>
  29.     </div>
  30.     <van-overlay class="overlay_box" :show="show" @click="show = false">
  31.         <div class="mask_content"  @click="show = false">
  32.                 <img class="arrow" src="http://****/files/app/download/pic/arrow.png" alt="">
  33.                 <div class="mask_main">
  34.                     <div class="main_item">
  35.                         <div class="item_tip"><span>1</span></div>
  36.                         <div class="item_test">
  37.                             <span>点击右上角</span>
  38.                             <div class="item_btn">
  39.                                 <span>. . .</span>
  40.                             </div>
  41.                             <span>按钮</span>
  42.                         </div>
  43.                     </div>
  44.                     <div class="main_item">
  45.                         <div class="item_tip"><span>2</span></div>
  46.                         <div class="item_test">
  47.                             <span>将本页面分享给好友</span>
  48.                             
  49.                         </div>
  50.                     </div>
  51.                 </div>
  52.             </div>
  53.     </van-overlay>
  54.   </div>
  55. </template>
  1. <script>
  2. import navBar from "@/components/navBar";
  3. import { VueCanvasPoster } from "vue-canvas-poster";
  4. import sdk from "@/utils/wxShare"
  5. import {getShareData} from '@/api/memorialHall'
  6. export default {
  7.   data() {
  8.     return {
  9.       painting:null,
  10.       showPoster:false,
  11.       show:false,//显示隐藏
  12.       detail: {
  13.         posterImg:null
  14.       },
  15.     };
  16.   },
  17.   components: {
  18.     navBar,
  19.     VueCanvasPoster,
  20.   },
  21.   created() {
  22.     console.log(this.detail.posterImg, "分享");
  23.     this.getData(this.$route.params.id)
  24.   },
  25.   mounted() {
  26.     
  27.   },
  28.   methods: {
  29.     async getData(id) {
  30.       let params={
  31.         id
  32.       }
  33.       let res= await getShareData(params)
  34.       console.log(res,'000')
  35.       if(res.code!='2000'){
  36.         this.$toast.fail(res.msg)
  37.         return 
  38.       }
  39.       this.detail=res.data;
  40.     
  41.       this.ininShare(res.data)
  42.      this.initPoster(res.data)
  43.     },
  44.     ininShare(data){
  45.       var ua = window.navigator.userAgent.toLowerCase();
  46.       if (ua.match(/MicroMessenger/i) == 'micromessenger') {
  47.           let obj={
  48.               title: `${data.deadName}的纪念馆`,
  49.               des:`${data. biography}`,
  50.               linkurl: `http://**************/memorialHall/${data.id}`,//分享链接
  51.               img: `${data.deadPortraitUrl}`,	
  52.           }
  53.           // let url = encodeURIComponent(location.href.split('#')[0]);
  54.           let url = location.href.split('#')[0];
  55.           sdk.getJSSDK(url, obj)
  56.       }else{
  57.  
  58.       }
  59.     },
  60.     initPoster(data){
  61.          this.painting = {
  62.         width: "275px",
  63.         height: "365px",
  64.         borderRadius: "5px",
  65.         background: `${data.captionUrl}`,
  66.         views: [
  67.           {
  68.             type: "image",
  69.             url: `${data.deadPortraitUrl}`,
  70.             css: {
  71.               top: "20px",
  72.               left: "107.5px",
  73.               borderRadius: "30px",
  74.               width: "60px",
  75.               height: "60px",
  76.             },
  77.           },
  78.           {
  79.             type: "text",
  80.             text: `${data.deadName}的纪念馆`,
  81.             css: {
  82.               top: "90px",
  83.               fontSize: "14px",
  84.               left: "90px",
  85.               color: "#fff",
  86.               textAlign: "center",
  87.             },
  88.           },
  89.           {
  90.             type: "text",
  91.             text: `${data.birthday}-${data.deathday}`,
  92.             css: {
  93.               top: "110px",
  94.               fontSize: "14px",
  95.               left: "60px",
  96.               color: "#fff",
  97.               textAlign: "center",
  98.             },
  99.           },
  100.           {
  101.             type: "qrcode",
  102.             content: `http://****/memorialHall/${data.id}`,
  103.             css: {
  104.               background: "#fff",
  105.               padding: "10px",
  106.               width: "100px",
  107.               height: "100px",
  108.               left: "90px",
  109.               top: "170px",
  110.               borderWidth: "10px",
  111.               borderRadius: "1px",
  112.               borderColor: "#fff",
  113.             },
  114.           },
  115.           {
  116.             type: "text",
  117.             text: "扫码查看在线纪念馆",
  118.             css: {
  119.               bottom: "50px",
  120.               fontSize: "14px",
  121.               left: "80px",
  122.               color: "#fff",
  123.               textAlign: "center",
  124.             },
  125.           },
  126.         ],
  127.       };
  128.       
  129.     },
  130.     success(src) {
  131.       
  132.       this.detail.posterImg = src;
  133.       this.showPoster=true
  134.     },
  135.     fail(err) {
  136.       console.log("fail", err);
  137.     },
  138.     wxShare(){
  139.       this.show=true
  140.     }
  141.   },
  142. };
  143. </script>
  1. <style lang="scss" scoped>
  2. .share {
  3.   display: flex;
  4.   flex-direction: column;
  5.   .content {
  6.     flex: 1;
  7.     padding: 0.12rem 0.37rem;
  8.     // background-color: #3e3e3e;
  9.     h2 {
  10.       font-size: 16px;
  11.       line-height: 0.23rem;
  12.       font-weight: 600;
  13.       margin-bottom: 0.07rem;
  14.     }
  15.     p {
  16.       font-size: 14px;
  17.       line-height: 0.2rem;
  18.       color: $lightBlack;
  19.       margin-bottom: 0.05rem;
  20.     }
  21.     .share_item {
  22.       margin-bottom: 0.1rem;
  23.       h3 {
  24.         font-size: 16px;
  25.         line-height: 0.23rem;
  26.         font-weight: 600;
  27.         margin-bottom: 0.07rem;
  28.       }
  29.       .item_content {
  30.         display: flex;
  31.         flex-direction: column;
  32.         align-items: center;
  33.         .poster_box {
  34.              width: 2.75rem;
  35.           height: 3.65rem;
  36.          img{
  37.              width: 100%;
  38.              height: 100%;
  39.          }
  40.         }
  41.       }
  42.     }
  43.     
  44.   }
  45. }
  46. .overlay_box{
  47.   .mask_content{
  48.             padding:1rem 0.5rem;
  49.             font-size: 14px;
  50.             color: #fff;
  51.         }
  52.         .main_item{
  53.             display: flex;
  54.             align-items: center;
  55.             margin-bottom: 0.2rem;
  56.         }
  57.         .item_test{
  58.             display: flex;
  59.             align-items: center;
  60.         }
  61.         .item_tip{
  62.             width: 0.2rem;
  63.             height: 0.2rem;
  64.             border-radius: 50%;
  65.             background: crimson;
  66.             text-align: center;
  67.             line-height: 0.2rem;
  68.             margin-right: 0.15rem;
  69.         }
  70.         .item_btn{
  71.             padding:0.05rem 0.1rem;
  72.             text-align: center;
  73.             height: 0.3rem;
  74.             background: #282D32;
  75.             border-radius: 0.05rem;
  76.             margin:0 0.1rem;
  77.         }
  78.         .item_btn span{
  79.             line-height: 0.2rem;
  80.         }
  81.         .arrow{
  82.             position: absolute;
  83.             right:0.2rem;
  84.             top:0.2rem;
  85.             display: block;
  86.             width: 1rem;
  87.             z-index: 6;
  88.         }
  89. }
  90. </style>

wxShare.js

  1. import {wxSignatureVerification} from '@/api/wx'
  2. import {Toast} from 'vant'
  3. //import wx from 'weixin-js-sdk';
  4. import wx from 'weixin-jsapi';
  5. //
  6. 		//要用到微信API								
  7. function getJSSDK(url,shareData) {
  8.   let params={url}
  9.   console.log(wx,params,'url参数')
  10.   wxSignatureVerification(params).then(res => {
  11.     console.log('22222',res,shareData);
  12.     if(res.code!='2000')return Toast.fail('微信验签失败')
  13.     let result=res.data.wxConfig
  14.     wx.config({
  15.       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  16.       appId: res.data.appId, // 必填，公众号的唯一标识
  17.       timestamp: result.timestamp, // 必填，生成签名的时间戳
  18.       nonceStr: result.nonceStr, // 必填，生成签名的随机串
  19.       signature: result.signature, // 必填，签名
  20.       jsApiList:[
  21.         'onMenuShareTimeline', 
  22.         'onMenuShareAppMessage'
  23.       ] 
  24.     })
  25.     wx.ready(function () {
  26.         //分享给微信朋友
  27.       wx.onMenuShareAppMessage({
  28.         title: shareData.title,
  29.         desc: shareData.des,
  30.         link: shareData.linkurl,
  31.         imgUrl: shareData.img,
  32.         success: function success(res) {
  33.           Toast.success('分享成功')
  34.         },
  35.         cancel: function cancel(res) {
  36.           console.log('已取消');
  37.         },
  38.         fail: function fail(res) {
  39.           //alert(JSON.stringify(res));
  40.         }
  41.       });
  42.       // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
  43.       wx.onMenuShareTimeline({
  44.         title: shareData.title,
  45.         link: shareData.linkurl,
  46.         imgUrl: shareData.img,
  47.         success: function success(res) {
  48.           //alert('已分享');
  49.         },
  50.         cancel: function cancel(res) {
  51.           //alert('已取消');
  52.         },
  53.         fail: function fail(res) {
  54.           //alert(JSON.stringify(res));
  55.         }
  56.       });
  57. 	// 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
  58.     //   wx.onMenuShareQQ({
  59.     //     title: shareData.title,
  60.     //     desc: shareData.desc,
  61.     //     link: shareData.linkurl,
  62.     //     imgUrl: shareData.img,
  63.     //     trigger: function trigger(res) {
  64.     //       //alert('用户点击分享到QQ');
  65.     //     },
  66.     //     complete: function complete(res) {
  67.     //       alert(JSON.stringify(res));
  68.     //     },
  69.     //     success: function success(res) {
  70.     //       //alert('已分享');
  71.     //     },
  72.     //     cancel: function cancel(res) {
  73.     //       //alert('已取消');
  74.     //     },
  75.     //     fail: function fail(res) {
  76.     //       //alert(JSON.stringify(res));
  77.     //     }
  78.     //   });
  79.       // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
  80.     //   wx.onMenuShareWeibo({
  81.     //     title: shareData.title,
  82.     //     desc: shareData.desc,
  83.     //     link: shareData.linkurl,
  84.     //     imgUrl: shareData.img,
  85.     //     trigger: function trigger(res) {
  86.     //       //alert('用户点击分享到微博');
  87.     //     },
  88.     //     complete: function complete(res) {
  89.     //       // alert(JSON.stringify(res));
  90.     //     },
  91.     //     success: function success(res) {
  92.     //       //alert('已分享');
  93.     //     },
  94.     //     cancel: function cancel(res) {
  95.     //       // alert('已取消');
  96.     //     },
  97.     //     fail: function fail(res) {
  98.     //     // alert(JSON.stringify(res));
  99.     //     }
  100.     //   });
  101.     })
  102.     wx.error(function (res) {
  103.       //alert("微信验证失败");
  104.     });
  105.   })
  106. }
  107. export default {
  108.   // 获取JSSDK
  109.   getJSSDK
  110. }

备注

该方案生成的海报二维码在IOS上扫描报错，所以更改方案 ：生成二维码图片之后在用二维码图片绘制到海报上生成海报

更改后代码：

  1. <template>
  2.   <div class="share wh100">
  3.     <navBar title="邀请好友" :leftArrowFlag="true" />
  4.     <div class="content">
  5.       <h2>邀请亲友加入亲友团</h2>
  6.       <p>
  7.         邀请亲友加入后，可与您一起编写逝者生平故事，留言、上传照片、跟您一起完善逝者信息、共同缅怀
  8.       </p>
  9.       <div class="share_item">
  10.         <h3>方法一：长按海报发送朋友邀请加入</h3>
  11.         <div class="item_content">
  12.           <vue-canvas-poster
  13.             :widthPixels="1000"
  14.             :painting="painting"
  15.             @success="success"
  16.             @fail="fail"
  17.           ></vue-canvas-poster>
  18.           <div class="poster_box">
  19.             <img
  20.               v-if="showPoster"
  21.               class="poster_img"
  22.               :src="detail.posterImg"
  23.               alt=""
  24.             />
  25.           </div>
  26.         </div>
  27.       </div>
  28.       <div class="share_item">
  29.         <h3>方法二：点击发送链接邀请亲朋加入</h3>
  30.         <div class="item_content">
  31.           <div class="large_btn" @click="wxShare">
  32.             <span>点击发送链接邀请亲朋加入</span>
  33.           </div>
  34.         </div>
  35.       </div>
  36.     </div>
  37.     <van-overlay class="overlay_box" :show="show" @click="show = false">
  38.       <div class="mask_content" @click="show = false">
  39.         <img
  40.           class="arrow"
  41.           src="http://linyiapi.fushoubainian.com/files/app/download/pic/arrow.png"
  42.           alt=""
  43.         />
  44.         <div class="mask_main">
  45.           <div class="main_item">
  46.             <div class="item_tip"><span>1</span></div>
  47.             <div class="item_test">
  48.               <span>点击右上角</span>
  49.               <div class="item_btn">
  50.                 <span>. . .</span>
  51.               </div>
  52.               <span>按钮</span>
  53.             </div>
  54.           </div>
  55.           <div class="main_item">
  56.             <div class="item_tip"><span>2</span></div>
  57.             <div class="item_test">
  58.               <span>将本页面分享给好友</span>
  59.             </div>
  60.           </div>
  61.         </div>
  62.       </div>
  63.     </van-overlay>
  64.     <div id="qrcode"></div>
  65.   </div>
  66. </template>
  67.  
  68. <script>
  69. import navBar from "@/components/navBar";
  70. import { VueCanvasPoster } from "vue-canvas-poster";
  71. import sdk from "@/utils/wxShare";
  72. import { getShareData } from "@/api/memorialHall";
  73. import QRCode from "qrcodejs2";
  74. export default {
  75.   data() {
  76.     return {
  77.       loading: null,
  78.       painting: null,
  79.       qrcode: "", //二维码
  80.       defaultAvatar: require("@/assets/imgs/avatar.png"),
  81.       showPoster: false,
  82.       show: false, //显示隐藏
  83.       detail: {
  84.         posterImg: null,
  85.       },
  86.     };
  87.   },
  88.   components: {
  89.     navBar,
  90.     VueCanvasPoster,
  91.   },
  92.   created() {
  93.     console.log(this.detail.posterImg, "分享");
  94.     this.getData(this.$route.params.id);
  95.   },
  96.   mounted() {
  97.     var ua = window.navigator.userAgent.toLowerCase();
  98.     if (ua.match(/MicroMessenger/i) == "micromessenger") {
  99.       var u = navigator.userAgent,
  100.         app = navigator.appVersion;
  101.       var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  102.       if (isIOS) {
  103.         if (window.location.href.indexOf("#reloaded") == -1) {
  104.           window.location.href = window.location.href + "#reloaded";
  105.           window.location.reload();
  106.         }
  107.       }
  108.     }
  109.   },
  110.   methods: {
  111.     getCodeSrc(link) {
  112.       return new Promise((resolve, reject) => {
  113.         document.getElementById("qrcode").innerHTML = "";
  114.         this.qrcode = new QRCode("qrcode", {
  115.           width: 124,
  116.           height: 124, // 高度
  117.           text: link, // 二维码内容
  118.           // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
  119.           // background: '#f0f',   // 背景色
  120.           // foreground: '#ff0'    // 前景色
  121.         });
  122.         console.log(this.qrcode, "kkkk");
  123.         var canvas = this.qrcode._oDrawing._elCanvas;
  124.         //如果有循环,此句必不可少 qrcode.find('canvas').remove();
  125.         var src = canvas.toDataURL("image/jpg");
  126.         resolve(src);
  127.       });
  128.     },
  129.     async getData(id) {
  130.       let params = {
  131.         id,
  132.       };
  133.       let res = await getShareData(params);
  134.       if (res.code != "2000") {
  135.         this.$toast.fail(res.msg || "数据请求失败");
  136.         return;
  137.       }
  138.       this.detail = res.data;
  139.       this.initPoster(res.data);
  140.     },
  141.     ininShare(data) {
  142.       var ua = window.navigator.userAgent.toLowerCase();
  143.       if (ua.match(/MicroMessenger/i) == "micromessenger") {
  144.         let obj = {
  145.           title: `${data.deadName}的纪念馆`,
  146.           des: `${data.biography}`,
  147.           linkurl: `http://*****/memorialHall/${data.id}`, //分享链接
  148.           img: `${data.deadPortraitUrl}`,
  149.         };
  150.         // let url = encodeURIComponent(location.href.split('#')[0]);
  151.         let url = location.href.split("#")[0];
  152.         sdk.getJSSDK(url, obj);
  153.       } else {
  154.       }
  155.     },
  156.     initPoster(data) {
  157.       this.loading = this.$toast.loading({
  158.         message: "加载中...",
  159.         forbidClick: true,
  160.       });
  161.       this.getCodeSrc(
  162.         `http://*****/memorialHall/${data.id}`
  163.       ).then((res) => {
  164.         this.painting = {
  165.           width: "300px",
  166.           height: "400px",
  167.           borderRadius: "5px",
  168.           background: `${data.captionUrl}`,
  169.           views: [
  170.             {
  171.               type: "image",
  172.               url: data.deadPortraitUrl
  173.                 ? `${data.deadPortraitUrl}`
  174.                 : this.defaultAvatar,
  175.               css: {
  176.                 top: "20px",
  177.                 left: "120px",
  178.                 borderRadius: "30px",
  179.                 width: "60px",
  180.                 height: "60px",
  181.               },
  182.             },
  183.             {
  184.               type: "text",
  185.               text: `${data.deadName}的纪念馆`,
  186.               css: {
  187.                 top: "90px",
  188.                 fontSize: "14px",
  189.                 left: "105px",
  190.                 color: "#fff",
  191.                 textAlign: "center",
  192.               },
  193.             },
  194.             {
  195.               type: "text",
  196.               text: `${data.birthday}—${data.deathday}`,
  197.               css: {
  198.                 top: "120px",
  199.                 fontSize: "14px",
  200.                 left: "70px",
  201.                 color: "#fff",
  202.                 textAlign: "center",
  203.               },
  204.             },
  205.             {
  206.               type: "image",
  207.               url: res,
  208.               css: {
  209.                 background: "#fff",
  210.                 top: "250px",
  211.                 left: "100px",
  212.                 width: "100px",
  213.                 height: "100px",
  214.                 borderWidth: "6px",
  215.                 borderRadius: "1px",
  216.                 borderColor: "#fff",
  217.               },
  218.             },
  219.             // {
  220.             //   type: "qrcode",
  221.             //   content: `http://****/memorialHall/${data.id}`,
  222.             //   css: {
  223.             //     background: "#fff",
  224.             //     width: "100px",
  225.             //     height: "100px",
  226.             //     left: "100px",
  227.             //     top: "210px",
  228.             //     borderWidth: "10px",
  229.             //     borderRadius: "1px",
  230.             //     borderColor: "#fff",
  231.             //   },
  232.             // },
  233.             {
  234.               type: "text",
  235.               text: "扫码查看在线纪念馆",
  236.               css: {
  237.                 bottom: "20px",
  238.                 fontSize: "14px",
  239.                 left: "90px",
  240.                 color: "#fff",
  241.                 textAlign: "center",
  242.               },
  243.             },
  244.           ],
  245.         };
  246.       });
  247.     },
  248.     success(src) {
  249.       console.log(src, "哈哈哈哈");
  250.       this.$toast.clear();
  251.       this.detail.posterImg = src;
  252.       this.showPoster = true;
  253.     },
  254.     fail(err) {
  255.       console.log("fail", err);
  256.     },
  257.     wxShare() {
  258.       this.show = true;
  259.     },
  260.   },
  261. };
  262. </script>
  263. <style lang="scss" scoped>
  264. .share {
  265.   display: -webkit-box;
  266.   display: -moz-box;
  267.   display: -ms-flexbox;
  268.   display: -webkit-flex;
  269.   display: flex;
  270.   -moz-flex-direction: column;
  271.   -webkit-flex-direction: column;
  272.   flex-direction: column;
  273.   #qrcode {
  274.     display: none;
  275.   }
  276.   .content {
  277.     flex: 1;
  278.     padding: 0.05rem 0.37rem;
  279.     // background-color: #3e3e3e;
  280.     overflow-y: scroll;
  281.     h2 {
  282.       font-size: 14px;
  283.       line-height: 0.2rem;
  284.       font-weight: 600;
  285.       margin-bottom: 0.07rem;
  286.     }
  287.     p {
  288.       font-size: 14px;
  289.       line-height: 0.2rem;
  290.       color: $lightBlack;
  291.       margin-bottom: 0.05rem;
  292.     }
  293.     .share_item {
  294.       margin-bottom: 0.1rem;
  295.       h3 {
  296.         font-size: 14px;
  297.         line-height: 0.2rem;
  298.         font-weight: 600;
  299.         margin-bottom: 0.07rem;
  300.       }
  301.       .item_content {
  302.         display: -webkit-box;
  303.         display: -moz-box;
  304.         display: -ms-flexbox;
  305.         display: -webkit-flex;
  306.         display: flex;
  307.         -moz-flex-direction: column;
  308.         -webkit-flex-direction: column;
  309.         flex-direction: column;
  310.         -moz-align-items: center;
  311.         -webkit-align-items: center;
  312.         align-items: center;
  313.         .poster_box {
  314.           width: 3rem;
  315.           height: 4rem;
  316.           img {
  317.             width: 100%;
  318.             height: 100%;
  319.           }
  320.         }
  321.       }
  322.     }
  323.   }
  324. }
  325. .overlay_box {
  326.   .mask_content {
  327.     padding: 1rem 0.5rem;
  328.     font-size: 14px;
  329.     color: #fff;
  330.   }
  331.   .main_item {
  332.     display: -webkit-box;
  333.     display: -moz-box;
  334.     display: -ms-flexbox;
  335.     display: -webkit-flex;
  336.     display: flex;
  337.     -moz-align-items: center;
  338.     -webkit-align-items: center;
  339.     align-items: center;
  340.     margin-bottom: 0.2rem;
  341.   }
  342.   .item_test {
  343.     display: -webkit-box;
  344.     display: -moz-box;
  345.     display: -ms-flexbox;
  346.     display: -webkit-flex;
  347.     display: flex;
  348.     -moz-align-items: center;
  349.     -webkit-align-items: center;
  350.     align-items: center;
  351.   }
  352.   .item_tip {
  353.     width: 0.2rem;
  354.     height: 0.2rem;
  355.     border-radius: 50%;
  356.     background: crimson;
  357.     text-align: center;
  358.     line-height: 0.2rem;
  359.     margin-right: 0.15rem;
  360.   }
  361.   .item_btn {
  362.     padding: 0.05rem 0.1rem;
  363.     text-align: center;
  364.     height: 0.3rem;
  365.     background: #282d32;
  366.     border-radius: 0.05rem;
  367.     margin: 0 0.1rem;
  368.   }
  369.   .item_btn span {
  370.     line-height: 0.2rem;
  371.   }
  372.   .arrow {
  373.     position: absolute;
  374.     right: 0.2rem;
  375.     top: 0.2rem;
  376.     display: block;
  377.     width: 1rem;
  378.     z-index: 6;
  379.   }
  380. }
  381. </style>

图片跨域

1.如果图片在你自己的服务器上，配置 nginx

  1. location / {
  2.      add_header Access-Control-Allow-Origin *;
  3.        add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
  4.        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
  5.                 add_header Access-Control-Allow-Credentials "true";
  6.          if ($request_method = "OPTIONS") {
  7.                     add_header Access-Control-Allow-Origin *;
  8.                    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
  9.                    return 204;
  10.       }
  11.  
  12.   }
  13. location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
  14.   {
  15.       add_header Access-Control-Allow-Origin *;
  16.       expires      30d;
  17.       error_log off;
  18.       access_log /dev/null;
  19.   }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/101825
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。