浙公网安备33032602100516如何使用vue完成微信公众号网页
阅读 27982 · 发布日期 2020-08-24 17:26 · 温州优光网络科技有限公司|建站|APP小程序制作|做网站SEO推广优化
【摘要】
有一个H5页面的功能，比较简单的一个调查表功能，嵌套在我们微信公众号里面。选用的技术栈是Vue。同时用到了微信的登录和分享接口。主要功能以及遇到的问题：左右切换动画路由带参数跳转移动端引入外部字体样式使用htmtl2canvas截图功能使用微信接口(前端部分)移动端屏幕适配移动端点击一个页面点击多次只执行一次问题ios... 【温州小程序开发,温州微信公众号,平阳做网站,平阳网站建设公司,平阳小程序商城制作,昆阳万全做网站,鳌江水头小程序,萧江腾蛟微信公众号,山门顺溪南雁海西南麂凤卧麻步怀溪网络网店服务,政采云网店管理服务】...
选用的技术栈是Vue。
同时用到了微信的登录和分享接口。
主要功能以及遇到的问题：
左右切换动画路由带参数跳转移动端引入外部字体样式使用htmtl2canvas截图功能使用微信接口(前端部分)移动端屏幕适配移动端点击一个页面点击多次只执行一次问题ios使用输入框的时键盘弹起来掩盖住按钮问题打包项目遇到静态资源加载问题1.左右切换动画--首先我考虑到用vue的移动端动画库，看了好久，但是项目非常小，就放弃了这个选择自己开始手写。
首先我考虑到的是过渡效果。
并且找到了相关的文章参考。
代码如下：
`
https://yq.aliyun.com/article...2.路由带参数跳转这个就是记录一下，有三种方法。
1.直接在route-link:to 中带参数：
使用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.其他问题汇总1.点击事件点击多次只执行一次：
可以使用.once修饰符 还有很多有用的修饰符，大家有时间可以去看看~~2.使用ios输入框的时候，键盘弹起来回遮挡下面的按钮等元素的事件：
我们可以给input注册一个失去焦点事件，当失去焦点的时候设置document.body.scroolTop = 0;
3.打包项目遇到静态资源不展示的现象或者是路径错误：
我用的是vue-cil3，他把配置文件都放在了node_modules中，官方文档上面有介绍，如果需要修改配置，就新建一个vue.config.js文件，他会自动的覆盖之前的文件。
主要是修改成：
publicPath: "./"，文档已经没有baseUrl，现在全部使用publicPath,跟着文档配置就ok了。
相关教程：
Vue框架视频教程以上就是如何使用vue完成微信公众号网页的详细内容，更多请关注php中文网其它相关文章！
微信
分享相关标签：
vue.js html5 html css javascript本文转载于：
segmentfault，如有侵犯，请联系a@php.cn删除
上一篇：
微信公众号的二次开发框架--微擎基本介绍
下一篇：
微信公众号网页授权详解相关文章相关视频如何理解vue数据双向绑定原理vue.js计算属性是什么？（代码示例）vue3.0什么时候发布的vuex是什么如何使用vue完成微信公众号网页VUE基本的路由结构深入vue组件初始化vue项目
