vue를 사용하여 WeChat 공개 계정 웹 페이지를 완성하는 방법

WeChat 공식 계정에 비교적 간단한 설문지 기능인 H5 페이지 기능이 포함되어 있습니다. 선택한 기술 스택은 Vue입니다. WeChat의 로그인 및 공유 인터페이스도 사용됩니다.

주요 기능 및 문제점:

1. 애니메이션 좌우 전환
2. 매개변수 점프로 라우팅
3. 모바일 단말기의 외부 글꼴 스타일 소개
4. htmtl2canvas 스크린샷 기능 사용
5. WeChat 인터페이스 사용(전면- 끝 부분)
6. 모바일 화면 적응
7. 모바일 측에서 페이지를 클릭하고 여러 번 클릭하면 한 번만 실행되는 문제
8. iOS에서 입력 상자를 사용할 때 키보드가 팝업되어 버튼을 가리게 됩니다. 정적 리소스 로딩 문제 발생
9. 1. 1. 애니메이션 전환

에 대하여 -- 우선 vue의 모바일 애니메이션 라이브러리를 활용하는 것을 고려했지만, 프로젝트가 매우 작았습니다. 이 옵션을 포기하고 직접 필기를 시작했습니다. 가장 먼저 고려한 것은 전환 효과였습니다. 그리고 관련 기사 참조를 찾았습니다. 코드는 다음과 같습니다.

`<template>
  <p id="app">
    <transition :name="&#39;fade-&#39;+(direction===&#39;forward&#39;?&#39;last&#39;:&#39;next&#39;)">
      <router-view></router-view>
    </transition>
  </p>
</template>
<script>
export default {
  name: "app",
  data: () => {
    return {
      direction: ""
    };
  },
  watch: {
    $route(to, from) {
      let toName = to.name;
      const toIndex = to.meta.index;
      const fromIndex = from.meta.index;
      this.direction = toIndex < fromIndex ? "forward" : "";
    }
  }
}
</script>
<style scoped>
.fade-last-enter-active {
  animation: bounce-in 0.6s;
}
.fade-next-enter-active {
  animation: bounce-out 0.6s;
}
@keyframes bounce-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0rem);
  }
}
@keyframes bounce-out {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0rem);
  }
}
</style>`

참고: https://yq.aliyun.com/article...

2. 매개변수를 사용하여 경로 점프

녹화용이며 세 가지 방법이 있습니다.

1. 매개변수를 path-link:to:

<router-link :to="{name:&#39;home&#39;, query: {id:1}}">

2. 매개변수 가져오기 this.$router.push:

쿼리를 사용하여 매개변수 가져오기: 매개변수 가져오기와 유사하게 매개변수가 연결됩니다. url

this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})

매개변수와 함께 매개변수 사용: 게시물과 유사하게 이름만 사용할 수 있으며 매개변수는 연결되지 않습니다.

this.$router.push({name:'home',params: {id:'1'}})

참조 링크: https://blog.csdn.net/jiandan...

3 소개합니다. 모바일 단말기에 외부 글꼴 스타일

모바일 단말기에 외부 스타일을 도입하려면 글꼴 라이브러리에서 직접 다운로드한 글꼴을 사용하며 일반적으로 접미사 .ttf/.otf 등이 붙습니다. 자산 파일 아래에

글꼴 파일을 만들고 모든 글꼴 파일을 여기에 넣습니다.
1. 
   다운로드한 글꼴을 등록하는 것과 동일한 새 .css 파일을 만듭니다. 글꼴 이름을 사용자 정의할 수 있지만 일반적으로 여전히 이전 이름을 따릅니다. src는 파일이 있는 경로입니다.

2. 
   

   필요한 곳에 사용하세요: 글꼴 계열: "PingFang"
4. html2canvas 스크린샷 기능을 사용하여 그림으로 변환하세요

먼저 html2canvas 패키지를 다운로드하세요: cnpm i html2canvas -S / import html2canvas from 'html2canvas';

1. 문서 보기: 클릭하여 이미지를 직접 생성하고 WeChat의 길게 누르기 이미지 저장 기능을 사용하여 저장하세요

2. setTimeout(() => {  //这里用定时器是因为页面一加载出来我就展示的是图片 为了防止图片还未生成 给点时间
         html2canvas(document.querySelector("#top"), {
           useCORS: true,  //是否尝试使用CORS从服务器加载图像 
           logging: false,//删除打印的日志 
           allowTaint: false //这个和第一个很像 但是不能同时使用 同时使用toDataURL会失效
         }).then(canvas => {
           let imageSrc = canvas.toDataURL("image/jpg"); // 转行img的路径 
           this.imageSrc = imageSrc;  //定义一个动态的 ：src 现在是赋值给src 图片就会展现
           this.$refs.top.style.display = "none"; // 让页面上其他元素消失 只显示图片
         });
       }, 1000);

주제 외: 이 작업을 할 때 정말 혼란스러웠습니다. 공식 홈페이지에 문서가 너무 적습니다. 당시 이미지에 대한 도메인 간 문제가 발생하여 오랫동안 검색했지만 공식 홈페이지의 매개변수 구성 파일을 주의 깊게 읽지 않은 것 같습니다. 울면서 많은 시간을 낭비했습니다.

참조 링크: http://html2canvas.hertzen.com/

5. WeChat 인터페이스 사용(프런트 엔드 부분)

저희는 주로 로그인 및 공유 기능을 위해 WeChat SDK 인터페이스를 사용합니다. 공개 플랫폼을 확인하려면 권한을 설정한 후 백엔드를 구성하세요. 프런트엔드는 데이터를 요청하고 일부 구성만 수행하면 됩니다. 여기에서는 주로 친구에게 공유하는 기능과 Moments에 공유하는 기능을 소개합니다.

this.code = location.href; //首先获取code 
if (this.code.lastIndexOf("code=") != -1) {
  (this.code = this.code.substring(
    this.code.lastIndexOf("code=") + 5,
    this.code.lastIndexOf("&state")
  )),
    this.$axios
      .get("*******8?code=".concat(this.code))
      .then(function(t) {  //获取后端传会来的参数 
        localStorage.setItem("unionid", t.data.unionid);
        localStorage.setItem("openid", t.data.openid);
        localStorage.setItem("nickname", t.data.nickname);
        localStorage.setItem("headimgurl", t.data.headimgurl);
      });
}
this.url = encodeURIComponent(location.href.split("#/")[0]);//获取配置的路径
this.$axios.get(`*********?url=${this.url}`).then(res => {
  this.res = res.data;
  wx.config({
    debug: false, // 开启调试模式,
    appId: res.data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
    timestamp: res.data.timestamp, // 必填，生成签名的时间戳
    nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
    signature: res.data.signature, // 必填，签名，见附录1
    jsApiList: [
      "updateAppMessageShareData",
      "updateTimelineShareData",
      "showMenuItems",
      "hideAllNonBaseMenuItem"
    ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  });
  //参考公众平台写的：
  wx.ready(function() {
    wx.hideAllNonBaseMenuItem();
    wx.showMenuItems({
      menuList: [
        "menuItem:share:appMessage",
        "menuItem:share:timeline",
        "menuItem:favorite"
      ] // 要显示的菜单项，所有menu项见附录3
    });
    wx.updateTimelineShareData({
      title: "******", // 分享标题
      desc: "*********", // 分享描述
      link: "**********", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: "******", // 分享图标
      success: function() {
        ***** 执行结束后执行的回调
      }
    });
    wx.updateAppMessageShareData({
      title: "*******", // 分享标题
      desc: "*********", // 分享描述
      link: "*********", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: "********, // 分享图标
      success: function() {
        *******
      }
    });
  });
 }

6. 모바일 화면 적응

이제는 모바일 화면에 적응하고 있습니다. 이전에 feldxable.js도 있는 것을 봤습니다. 도서관, 나중에 확인해 보니 더 나은 작가가 포기하고 우리에게 링크를 제공했다는 것을 알았습니다. 하하하하. 좀 더 자세히 살펴보는 시간을 갖도록 하겠습니다. 회사의 다음 프로젝트가 또 왔습니다. 오랫동안 야근을 하여 예정대로 프로젝트를 완료하기 위해 완료 후 바로 새로운 프로젝트를 시작했습니다. .좀 피곤해요 이건 APP이어야합니다. 경험이 전혀 없습니다. , Ao Ao는 총알을 물고 할 수 있지만 아직 제대로 요리해야하며 불쌍한 갓 졸업했습니다. 감히 실수하지 마십시오.

rem 적응을 위한 코드를 아래에 공유하세요:

//默认调用一次设置
 setHtmlFontSize();
 
 function setHtmlFontSize() {
     // 1. 获取当前屏幕的宽度
     var windowWidth = document.documentElement.offsetWidth;
     // console.log(windowWidth);
     // 2. 定义标准屏幕宽度 假设375
     var standardWidth = 375;
     // 3. 定义标准屏幕的根元素字体大小 假设100px  1rem=100px  10px = 0.1rem  1px 0.01rem
     var standardFontSize = 100;
     // 4. 计算当前屏幕对应的根元素字体大小
     var nowFontSize = windowWidth / standardWidth * standardFontSize + 'px';
     // console.log(nowFontSize);
     // 5. 把当前计算的根元素的字体大小设置到html上
     document.querySelector('html').style.fontSize = nowFontSize;
 }
 // 6. 添加一个屏幕宽度变化的事件  屏幕变化就触发变化根元素字体大小计算的js 
 window.addEventListener('resize', setHtmlFontSize);

이 코드를 main.js에 도입한 다음 변환기를 사용하여 px를 rem으로 변환하세요.

7. 기타 문제 요약

1. 클릭 이벤트는 여러 번 클릭하면 한 번만 실행됩니다.

.once 수식어를 사용할 수 있으며 유용한 수식어가 많이 있으므로 시간이 나면 확인하실 수 있습니다. out~~

2. 사용 ios 입력 상자를 사용할 때 키보드가 튀어 올라 아래 버튼과 기타 요소를 차단합니다.

입력에 대해 초점 상실 이벤트를 등록할 수 있으며, 초점이 상실되었을 때, set document.body.scoolTop = 0;

3. 패키징 프로젝트에서 정적 리소스가 표시되지 않거나 경로가 잘못된 현상이 발생하는 경우:

모든 구성 파일을 node_modules에 저장하는 vue-cil3을 사용합니다. 공식 문서에 소개되어 있습니다. 구성을 수정해야 하는 경우

이전 파일을 자동으로 덮어쓰는 새 vue.config.js 파일을 만듭니다. 주요 수정 사항은 다음과 같습니다. publicPath: "./",

문서에는 더 이상 baseUrl이 없으며 이제 모두 publicPath를 사용합니다. 문서 구성을 따르면 괜찮습니다.


관련 튜토리얼:

Vue 프레임워크 비디오 튜토리얼

위 내용은 vue를 사용하여 WeChat 공개 계정 웹 페이지를 완성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!