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

自己用vue做微信公众号项目有一段时间了，遇到各种奇葩的问题，下面细数那些坑：

第一坑：微信分享导致安卓手机无法调起相册和无法调起微信充值

解决方案：

setTimeout(_ => {
      wx.config(sdkConfig)
     }, 500)

需要将微信分享延迟500毫秒，这样就解决了安卓手机无法调用相册和微信充值的问题，如果用了微信分享需要加个延迟。

第二坑：部分手机第三方输入法会将页面网上挤的问题

解决方案：

// 特定需求页面，比如评论页面，输入框在顶部之类的
const interval = setInterval(function() {
  document.body.scrollTop = 0;
}, 100)
// 注意关闭页面或者销毁组件的时候记得清空定时器
clearInterval(interval);

第三坑：部分地区移动4Gpost提交没有响应

本人vue项目是axios进行接口封装的，项目中老是出现一些地区请求发了没响应，后面经过排查后，后端只接受到了options请求，关键是只是个别用户出现这种情况，后面看到一遍文章https://itbilu.com/javascript/js/VkiXuUcC.html介绍了这些请求，不多说直接上代码

解决方案：

import axios from 'axios'
import qs from 'qs'
service.interceptors.request.use(
 config => {
 if(config.method === 'post'){
  config.data = qs.stringify(config.data)
 }
 return config
},
 error => {
  console.log(error)
  Promise.reject(error)
 }
)

项目做了也好几个月了，实在也没时间去发，后续还会把自己真实遇到的坑持续发布。。。

总结

以上所述是小编给大家介绍的vue 做移动端微信公众号采坑经验记录，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解用vue.js和laravel实现微信授权登陆

    详解用vue.js和laravel实现微信授权登陆

    在laravel框架我们使用安正超的package 网址:https://easywechat.org/ 有专门的针对laravel的安装包,请参见如下网址:https://github.com/overtrue/laravel-wechat 下面来说说具体的安装: 1.安装package composer require overtrue/wechat 2.在app/config/app.php 中注册 ServiceProvider Overtrue\LaravelWechat\Servic

  • vue移动端微信授权登录插件封装的实例

    1.新建wechatAuth.js文件 const queryString = require('query-string') //应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称.性别.所在地.并且,即使在未关注的情况下,只要用户授权,也能获取其信息) const SCOPES = ['snsapi_base', 'snsapi_userinfo'] class VueWe

  • Vue微信项目按需授权登录策略实践思路详解

    项目采用Vue作为开发框架,用户浏览页面时有两种情况: 一种是需要用户先登录之后才能继续浏览: 另一种是用户无需登录即可随意浏览. 在无需用户登录的页面中,可能包含需要用户信息的操作,此时就需要用户登录之后方能进行后续操作.因此,需要对授权登录策略进行区分. 思路 1.一般而言,我们为微信开发的H5页面,进入页面的时候就进行鉴权,要求用户登录之后才能继续浏览.但由于产品需求,这个项目我们需要对不同页面的鉴权策略进行划分,按照一般与特殊进行设计: 2.一般情况,用户进入页面第一时间要求用户授权登录

  • vue 微信授权登录解决方案

    背景 vue前后端分离开发微信授权 场景 app将商品分享到微信朋友圈或者分享给微信好友,用户点击页面时进行微信授权登陆,获取用户信息. 问题:没有固定的h5应用首页.授权后重定向url带参数并且很长 本人愚钝,开发过程中,尝试过很多方法,踩坑不足以形容我的心情,可以说每一次都是一次跳井的体验啊. 1.一开始是前端请求微信连接,返回code,然后code作为再去请求后台接口获取token,后面看到别人的博客说这个方法不好,最好就是直接请求后台接口,然后后台返回url做跳转,所以就采用了最传统的方

  • VueJs单页应用实现微信网页授权及微信分享功能示例

    VueJs单页应用实现微信网页授权及微信分享功能示例

    在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算完成了,但开发过程中遇到好几个坑.废话不多说了,开始正题. 描述点 微信相关开发知识了解 怎么样实现微信相关功能本地测试 微信网页授权 微信分享 微信相关开发知识了解 微信公众号的appId,AppSecret 当我们注册一个微信公众号后,便能够得到一个appId(每个微信公众号只有一个,一个微信公

  • 详解Vue微信授权登录前后端分离较为优雅的解决方案

    微信授权登录是一个非常常见的场景,利用微信授权登录,我们可以很容易获取用户的一些信息,通过用户对公众号的唯一openid从而建立数据库绑定用户身份. 微信授权登录的机制这里不做详述,微信官方文档已有详述,简述就是通过跳转微信授权的页面,用户点击确认后,微信会跳到回调页面,此时回调页面url上会携带code参数,通过code参数,后端可以拿code换取拥护openid,或者用户信息 在vue项目中,通常是一个SPA应用,即所有的页面都是同一个html,通常现在开发也是前后端彻底分离的,vue打包后

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

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

  • Android仿微信公众号界面

    最近在做一个关于微信公众平台服务号的小项目,主要用来实现排队叫号功能.一直都对微信公众号开发比较好奇,于是趁这次机会仔细研究了一下公众号的开发流程和逻辑架构. 微信公众平台现在分为3类:订阅号,服务号和企业号.其中,服务号和企业号的开放权限比较高,可以实现自定义菜单功能,调用摄像头以及LBS等API. 基本通信架构如图: 在项目的功能设计阶段本想搭建一个服务号Demo用来展示,但微信服务号的认证手续太麻烦,而且我也没有那个资质去开通服务号.于是打算自己做一个仿微信公众号的基本界面,先实现菜单功能

  • 使用Nodejs开发微信公众号后台服务实例

    使用Nodejs开发微信公众号后台服务实例

    摘要: 微信,庞大的用户基数,极强的用户粘性,在近两年吸引了无数的开发者注意力. Nodejs,近两年发展非常快的开发工具,尤其适合构建移动后台.本文就以笔者自己开发的实例,来描述如何基于Nodejs开发属于自己的微信公众号.在这个实例中,主要使用到了express, wechat, mongodb, monk等模块. 前期准备: 1.申请微信公众号,前往 https://mp.weixin.qq.com/  申请,这里不做过多阐述. 2. 购买服务器, 这里推荐Amazon的EC2,首次用户可

  • 微信公众号支付H5调用支付解析

    微信公众号支付H5调用支付解析

    最近项目需要微信支付,然后看了下微信公众号支付,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验. 一.配置公众号微信支付   需要我们配置微信公众号支付地址和测试白名单. 比如:支付JS页面的地址为 http://www.xxx.com/shop/pay/             那此处配置www.xxx.com/shop/pay/ 二.开发流程 借用微信公众号支付api(地址 http://pay.weixin.q

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

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

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

    巧用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微信公众号开发踩坑全记录

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

  • 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中使用微信公众号js-sdk踩坑记录

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

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

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

随机推荐