Es gibt eine H5-Seitenfunktion, eine relativ einfache Fragebogenfunktion, eingebettet in unser offizielles WeChat-Konto. Der gewählte Technologie-Stack ist Vue. Auch die Login- und Sharing-Schnittstellen von WeChat kommen zum Einsatz.
--Zuerst habe ich lange darüber nachgedacht, die mobile Animationsbibliothek von Vue zu verwenden, aber das Projekt war sehr klein, also habe ich diese Option aufgegeben und angefangen, selbst handschriftlich zu schreiben. Das erste, woran ich dachte, war der Übergangseffekt. Und relevante Artikelreferenzen gefunden. Der Code lautet wie folgt:
`<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>`Referenz: https://yq.aliyun.com/article...
Das ist einfach Für die Aufnahme gibt es drei Methoden.
1. Bringen Sie Parameter direkt in route-link:to:
<router-link :to="{name:'home', query: {id:1}}">2. Bringen Sie Parameter in this.$router.push:
Verwenden Sie eine Abfrage mit Parametern: ähnlich, um das übergebene zu erhalten Parameter werden in die URL gespleißt
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})Verwenden Sie Parameter, um Parameter zu bringen: Es kann nur der Name verwendet werden, ähnlich wie im Beitrag. Parameter werden nicht gespleißt
this.$router.push({name:'home',params: {id:'1'}})Referenzlink: https ://blog.csdn.net /jiandan...
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);Off topic: Ich war wirklich verwirrt, als ich das gemacht habe. Es gibt zu wenige Dokumente auf der offiziellen Website. Zu diesem Zeitpunkt bin ich auf ein domänenübergreifendes Problem mit Bildern gestoßen und habe lange danach gesucht. Möglicherweise habe ich die Parameterkonfigurationsdatei der offiziellen Website nicht sorgfältig gelesen. Es wurde viel Zeit mit Weinen verschwendet.
Referenzlink: http://html2canvas.hertzen.com/
Wir verwenden hauptsächlich die WeChat SDK-Schnittstelle Für die Anmeldung und die Freigabefunktion gehen Sie zunächst zur öffentlichen WeChat-Plattform, um sie auszuprobieren, und konfigurieren Sie dann das Backend, nachdem Sie die Berechtigungen korrigiert haben. Das Frontend muss lediglich Daten anfordern und einige Konfigurationen durchführen. Hier stellen wir hauptsächlich die Funktionen des Teilens mit Freunden und des Teilens mit Momenten vor:
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() {
*******
}
});
});
}//默认调用一次设置
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. Zusammenfassung anderer Probleme
Sie können den Modifikator .once verwenden und es gibt viele nützliche Modifikatoren . Jeder hat es. Sie können es ausprobieren, wenn Sie Zeit haben.
2 Bei Verwendung des iOS-Eingabefelds springt die Tastatur nach oben und zurück, um die Tasten und andere Elemente unten abzudecken:
Wir können ein Fokusverlustereignis für die Eingabe registrieren. Wenn der Fokus verloren geht, setzen Sie document.body.scoolTop = 0; Das verpackte Projekt stößt auf das Phänomen, dass statische Ressourcen nicht angezeigt werden oder der Pfad ist falsch:
Ich verwende vue-cil3, das die Konfigurationsdateien in node_modules ablegt. Wenn Sie die Konfiguration ändern müssen,
Das Dokument hat keine baseUrl mehr und verwendet jetzt alle publicPath. Folgen Sie einfach der Dokumentkonfiguration und es ist in Ordnung.
Verwandte Tutorials:
Video-Tutorial zum Vue-Framework
Das obige ist der detaillierte Inhalt vonSo vervollständigen Sie die WeChat-Webseite für öffentliche Konten mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
