使用vue完成微信公众号网页小记(推荐)

前言:

公司最近有一个H5页面的功能,比较简单的一个调查表功能,嵌套在我们微信公众号里面。选用的技术栈是Vue。同时用到了微信的登录和分享接口。ps:本人小白,如果有问题希望大家能指出来,写文章不止是为了记录,还是为了发现自己的问题。谢谢大噶!!!

主要功能以及遇到的问题:

  1. 左右切换动画
  2. 路由带参数跳转
  3. 移动端引入外部字体样式
  4. 使用htmtl2canvas截图功能
  5. 使用微信接口(前端部分)
  6. 移动端屏幕适配
  7. 移动端点击一个页面点击多次只执行一次问题
  8. ios使用输入框的时键盘弹起来掩盖住按钮问题
  9. 打包项目遇到静态资源加载问题

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>

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://www.jb51.net/article/160401.htm

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官网的参数配置文件。浪费了很多时间,哭哭。

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,我环境搭建搞了好久,最后是小姐姐陪我搞好的。真的走到那里都是学习的过程。我觉得坚毅真的是世界上特别珍贵的品质,渴望拥有!!!

(0)

相关推荐

  • vue中使用微信公众号js-sdk踩坑记录

    最近又在vue中捣鼓了下微信公众号api的接入,不得不说这里边水是真的深啊,上次分享了微信授权登录和js-sdk签名的部分,其中很多朋友私信我表示了疑惑,今天我就再次尝试理顺一下这里边的坑吧: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 分享页面到朋友圈 上文是从官方文档

  • Vue开发Html5微信公众号的步骤

    一.调起微信支付 在微信浏览器里面打开H5网页中执行JS调起支付,WeixinJSBridge内置对象在其他浏览器中无效. 具体参考官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 (1)大致流程: (2)调用代码示例: mounted(){ if (typeof WeixinJSBridge == "undefined") { if (document.addEventListe

  • vue项目使用微信公众号支付总结及遇到的坑

    微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档: 使用的vuex,在mutations中 wechatPay (state, data) { state.payObject = data console.log('微信支付开始请求') if (wechat) { wx.chooseWXPay({ timestamp: state.payObject.timeStamp, // 支付签名时间戳 nonceStr: state.payObject.nonceStr, // 支付签

  • 详解Vue微信公众号开发踩坑全记录

    本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中涉及签名和token校验依赖服务端 JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到IOS和android微信客户端浏览器内核的差异性导致的兼容问题 解决方案

  • 巧用Vue.js+Vuex制作专门收藏微信公众号的app

    本文一步一步教大家如何利用Vue.js + Vuex制作专门收藏微信公众号的app 项目地址: https://github.com/jrainlau/wechat-subscriptor 下载&运行 git clone git@github.com:jrainlau/wechat-subscriptor.git cd wechat-subscriptor && npm install npm run dev   // run in dev mode cd backend-serv

  • vue 做移动端微信公众号采坑经验记录

    自己用vue做微信公众号项目有一段时间了,遇到各种奇葩的问题,下面细数那些坑: 第一坑:微信分享导致安卓手机无法调起相册和无法调起微信充值 解决方案: setTimeout(_ => { wx.config(sdkConfig) }, 500) 需要将微信分享延迟500毫秒,这样就解决了安卓手机无法调用相册和微信充值的问题,如果用了微信分享需要加个延迟. 第二坑:部分手机第三方输入法会将页面网上挤的问题 解决方案: // 特定需求页面,比如评论页面,输入框在顶部之类的 const interva

  • Vue.js 实现微信公众号菜单编辑器功能(二)

    Vue.js 实现微信公众号菜单编辑器功能(一)上一篇菜单的点击和添加菜单功能已经在模版实现了,接下来实现菜单的编辑功能 实现菜单删除方法 在vue实例中添加删除菜单方法,根据选中的菜单级别和索引来删除. methods: { //删除菜单 delMenu:function(){ //删除主菜单 if(this.selectedMenuLevel()==1&&confirm('删除后菜单下设置的子菜单也将被删除')){ if(this.selectedMenuIndex===0){ thi

  • Vue.js 实现微信公众号菜单编辑器功能(一)

    学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下 具体样式代码查看项目github 创建一个vue实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"&g

  • 使用vue完成微信公众号网页小记(推荐)

    前言: 公司最近有一个H5页面的功能,比较简单的一个调查表功能,嵌套在我们微信公众号里面.选用的技术栈是Vue.同时用到了微信的登录和分享接口.ps:本人小白,如果有问题希望大家能指出来,写文章不止是为了记录,还是为了发现自己的问题.谢谢大噶!!! 主要功能以及遇到的问题: 左右切换动画 路由带参数跳转 移动端引入外部字体样式 使用htmtl2canvas截图功能 使用微信接口(前端部分) 移动端屏幕适配 移动端点击一个页面点击多次只执行一次问题 ios使用输入框的时键盘弹起来掩盖住按钮问题 打

  • Vue微信公众号网页分享的示例代码

    前言 今天做了个分享功能,反正挺诡异的,下面就来说一说步骤 后端使用egg.js,代码如下: 'use strict'; const Subscription = require('egg').Subscription; class AccessToken extends Subscription { static get schedule() { return { interval: '2h',//2小时获取一次 type: 'all', }; } async subscribe() { co

  • 微信公众号网页分享功能开发的示例代码

    现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接: 上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的视觉效果. 微信JS-SDK Demo :这个是微信网页分享出去的标题. 微信JS-SDK,帮助第三方为用户提供更优质的移动web服务:这个是被分享的这个页面的分享描述. 微信图标:这个就是自己网站或者自己自定义的图像. 上面这个是微信官方网页分享出去的定义描述,那么怎样实现自己网站网页的自定义分享

  • Spring Security实现微信公众号网页授权功能

    微信公众号提供了微信支付.微信优惠券.微信H5红包.微信红包封面等等促销工具来帮助我们的应用拉新保活.但是这些福利要想正确地发放到用户的手里就必须拿到用户特定的(微信应用)微信标识openid甚至是用户的微信用户信息.如果用户在微信客户端中访问我们第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑.今天就结合Spring Security来实现一下微信公众号网页授权. 环境准备 在开始之前我们需要准备好微信网页开发的环境. 微信公众号服务号 请注意,一定是微信公众号

  • 微信公众号网页授权登录的超简单实现步骤

    目录 前言 一.微信公众号授权登录到底哪几步 二.回调地址,安全域名怎么配置 三.代码怎么写 四.出现问题怎么办 总结 前言 这篇文章带大家掌握 从0到1实现微信公众平台授权登录 微信公众号授权登录到底哪几步回调地址,安全域名怎么配置代码怎么写出了问题怎么办 一.微信公众号授权登录到底哪几步 官方文档介绍微信开放文档微信开发者平台文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_author

  • 微信公众号 网页授权登录及code been used解决详解

    首先微信公众号开发网页授权登录使用环境: 开发工具:eclipse:服务器:tomcat8,开发语言:JAVA. 我写的网页授权登录时用开发者模式自定义view类型按钮点击跳转链接的. 微信网页授权登录首先以官方微信开发文档为准,大体共分为4步: 先说第一步获取code: code说明:code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5扽这未被使用自动过期. 微信公众开发文档给的有获取code的链接,建议直接复制来用,然后替换其中相应的参

  • vue实现微信公众号h5跳转小程序的示例代码第1/3页

    目录 项目概述 涉及知识点 实现 实现容器 computed 实现分页 项目概述 实现类似图中红色框框选中可以左右滑动的组件,点击可以跳转到对应的小程序页面. 涉及知识点 computed 实现分页 开放标签 wx-open-launch-weapp 使用 实现 实现容器 首先我们来实现两行可以左右滑动的容器. 这边为了省事,我是选择了 vue-awesome-swiper@2.6.7: npm i vue-awesome-swiper@2.6.7 -S main.js 引入 import Vu

随机推荐