WeChat 공식 계정에 비교적 간단한 설문지 기능인 H5 페이지 기능이 포함되어 있습니다. 선택한 기술 스택은 Vue입니다. WeChat의 로그인 및 공유 인터페이스도 사용됩니다.
`<template> <p id="app"> <transition :name="'fade-'+(direction==='forward'?'last':'next')"> <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. 매개변수를 사용하여 경로 점프
<router-link :to="{name:'home', query: {id:1}}">
쿼리를 사용하여 매개변수 가져오기: 매개변수 가져오기와 유사하게 매개변수가 연결됩니다. 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 등이 붙습니다. 자산 파일 아래에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 인터페이스 사용(프런트 엔드 부분)
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. 모바일 화면 적응
//默认调用一次设置 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);
7. 기타 문제 요약
.once 수식어를 사용할 수 있으며 유용한 수식어가 많이 있으므로 시간이 나면 확인하실 수 있습니다. out~~
2. 사용 ios 입력 상자를 사용할 때 키보드가 튀어 올라 아래 버튼과 기타 요소를 차단합니다.
입력에 대해 초점 상실 이벤트를 등록할 수 있으며, 초점이 상실되었을 때, set document.body.scoolTop = 0;
3. 패키징 프로젝트에서 정적 리소스가 표시되지 않거나 경로가 잘못된 현상이 발생하는 경우:
모든 구성 파일을 node_modules에 저장하는 vue-cil3을 사용합니다. 공식 문서에 소개되어 있습니다. 구성을 수정해야 하는 경우
문서에는 더 이상 baseUrl이 없으며 이제 모두 publicPath를 사용합니다. 문서 구성을 따르면 괜찮습니다.
관련 튜토리얼:
위 내용은 vue를 사용하여 WeChat 공개 계정 웹 페이지를 완성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!