媒介：
公司近来有一个H5页面的功用，比较简单的一个调查表功用，嵌套在我们微信民众号内里。选用的手艺栈是Vue。同时用到了微信的登录和分享接口。ps:本人小白，假如有题目愿望人人能指出来，写文章不止是为了纪录，照样为了发明本身的题目。感谢大噶！！！
重要功用以及碰到的题目：
- 摆布切换动画
- 路由带参数跳转
- 挪动端引入外部字体款式
- 运用htmtl2canvas截图功用
- 运用微信接口(前端部份)
- 挪动端屏幕适配
- 挪动端点击一个页面点击屡次只实行一次题目
- ios运用输入框的时键盘弹起来掩盖住按钮题目
- 打包项目碰到静态资本加载题目
1.摆布切换动画
–起首我考虑到用vue的挪动端动画库，看了良久，然则项目异常小，就摒弃了这个挑选本身最先手写。起首我考虑到的是过渡结果。而且找到了相干的文章参考。代码以下：
`<template>
<div id="app">
<transition :name="'fade-'+(direction==='forward'?'last':'next')">
<router-view></router-view>
</transition>
</div>
</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.直接在route-link:to 中带参数：
<router-link :to="{name:'home', query: {id:1}}"> 2.在this.$router.push中带参数：
运用query带参数: 类似于get传参 参数会拼接到url上面
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})运用params带参数： 只能用name 类似于post 参数不会拼接
this.$router.push({name:'home',params: {id:'1'}}) 参考链接：https://blog.csdn.net/jiandan…
3.挪动端引入外部字体款式
- 挪动端引入外部款式，我用的是直接把字体库的字体下载下来，平常后缀为 .ttf/.otf等。在asset文件下建立
fonts文件，将字体文件悉数放入。 - 再新建一个.css文件，相当于注册你下载的字体，能够自定义给字体们定名，不过平常照样根据之前的名字。src是文件地点的途径。
- 在须要的处所运用就能够了：font-family：”PingFang”
4.运用htmtl2canvas截图功用，转换成图片
- 先下载html2canvas包： cnpm i html2canvas -S / import html2canvas from ‘html2canvas’;
- 检察文档 ： 点击进来直接天生图片 应用微信长按保留图片功用来保留
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);题外话： 当时做这个的时刻真的有点懵。官网文档太少了，当时碰到图片跨域题目，找了良久，多是我没有细致Jan官网的参数设置文件。浪费了许多时刻，哭哭。
参考链接：http://html2canvas.hertzen.com/
5.运用微信接口(前端部份)
我们用微信SDK接口主假如做的登录和分享功用，起首是上微信民众平台上边看看，把权限搞好今后后端设置。前端只需要求获得数据，在举行一些设置就能够。这里重要引见分享给朋侪和分享到朋侪圈功用：
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.挪动端屏幕适配
如今我们挪动端屏幕适配，我用的是rem，之前也有看到说有一个felxable.js的库，后往来来往查，说是有更好的作者摒弃了，而且给我们供应了链接，哈哈哈哈真的太可爱了。预备抽时刻去细致看看，公司下一个项目又来了，真的加班了良久，为了如期完成项目，完成今后立马就新开项目，有点心累，这把应该是APP了，完整没有任何履历，嗷嗷只能硬着头皮做，照样要恰饭的，不幸的应届狗不敢造次。
下面分享一下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.其他题目汇总
点击事宜点击屡次只实行一次：
能够运用.once修饰符 另有许多有效的修饰符，人人有时刻能够去看看~~运用ios输入框的时刻，键盘弹起往返遮挡下面的按钮等元素的事宜：
我们能够给input注册一个落空核心事宜，当落空核心的时刻设置document.body.scroolTop = 0;打包项目碰到静态资本不展示的征象或者是途径毛病：
我用的是vue-cil3，他把设置文件都放在了node_modules中，官方文档上面有引见，假如须要修正设置， 就新建一个vue.config.js文件，他会自动的掩盖之前的文件。主假如修正成： publicPath: "./"， 文档已没有baseUrl，如今悉数运用publicPath,随着文档设置就ok了。
末端：
我碰到的题目大抵就这些，由于项目比较小，所以没有碰到太多题目。历程真的有点心伤，我自力处理题目的才能真的很平常，不知道是不是是没有做程序员的潜质，出现题目就很焦炙，处理了一段时刻今后，照样没有办法，就会越发焦炙。在上家公司练习的时刻，我们组长指出来这个题目今后，我真的反省了良久。如今这家公司照样在练习，然则前端就一个人，小姐姐人很好，然则不必vue框架，所以碰到题目照样得零丁处理。前端小姐姐是很坚固的人，碰到题目，真的是一个一个线索的去找，不摒弃那种，一最先我们要用flutter，我环境搭建搞了良久，末了是小姐姐陪我搞好的。真的走到那边都是进修的历程。我以为坚贞真的是世界上迥殊名贵的质量，盼望具有!!!
末了祝人人身体健康，快快乐乐。近来打球脚崴了，我哭晕1s，真的是太久不运动了，而且跟我敌手的朋侪是男的，打球的时刻以为我气力小。我？？我小丁是能忍的人？今后的每一拍都把命给拍出去的打。末了一个小时的羽毛球脚崴了满身酸痛，跛着脚去病院。happy ending!
