h5移动端/微信公众号
微信公众号,h5页面,适配,兼容等
姜无忧
莫问前程凶吉,但求落幕无悔
展开
-
微信扫码ios:scanQRCode:the permission value is offline verifying
报错信息:安卓手机:permission deniedios手机:scanQRCode:the permission value is offline verifying解决方案:1、确认config的jsApiList参数包含了这个JSAPI前端代码:wx.config中jsApiList里加上'scanQRCode'2、确认IP白名单、js安全域名、网页授权域名IP白名单:【开发/基本配置】-【IP白名单】 js安全域名、网页授权域名:【设置/公众号设置】-【功能设置】-.原创 2022-04-12 12:36:23 · 5049 阅读 · 0 评论 -
微信扫码scanQrCode:permission denied
报错信息:安卓手机:permission deniedios手机:scanQRCode:the permission value is offline verifying解决方案:1、确认config的jsApiList参数包含了这个JSAPI前端代码:wx.config中jsApiList里加上'scanQRCode'2、确认IP白名单、js安全域名、网页授权域名IP白名单:【开发/基本配置】-【IP白名单】 js安全域名、网页授权域名:【设置/公众号设置】-【功能设置】-.原创 2022-04-12 12:35:15 · 8320 阅读 · 0 评论 -
uniapp中app应用和h5页面,调用微信h5支付
直接上代码:mixinsPayLoad(res) {//res接受后端的参数,mwebUrl为跳转微信支付路径 // #ifdef H5 window.location.href = res.mwebUrl; // #endif // #ifdef APP-PLUS const platform = uni.getSystemInfoSync().platform const webvie原创 2022-03-01 12:40:49 · 6320 阅读 · 1 评论 -
钉钉微应用iconfont在Android下图标找不到
低版本android他不支持woff2格式的字体,必须要使用woff格式字体,由于从默认iconfont网站上下载来的字体,woff2排在woff之前,所以导致android无法正确识别到woff了@font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1557465831153'); /* IE9 */ src: url('iconfont.eot?t=1557465831153#iefix') format('embedd原创 2021-05-10 15:16:00 · 584 阅读 · 0 评论 -
uni-app小程序中swiper图片不显示
<view class="swiper_img"> <uni-swiper-dot :info="info" :current="current" :mode="mode" field="content"> <swiper class="swiper-box" @change="change" :autoplay="true" :interval="300...原创 2019-12-11 14:42:36 · 7479 阅读 · 0 评论 -
uni-app小程序中背景图片找不到
一开始我按照普通css的背景图片写法,导致图片找不到。后来查看uni-app官网,找到了解决方案:但是,这种方式在小程序中,还是无法显示,怎么办呢?1.首先,我在js中导入图片import indexBackgroundImage from "@/static/home.png"2.在data中定义data() { return { indexB...原创 2019-12-11 14:36:44 · 3670 阅读 · 0 评论 -
如何清除微信公众号的缓存
安卓手机:在微信随便打开一个聊天窗口打开网址(打开debug 调试页面):debugx5.qq.com拉到调试页面的最底端,勾选上所有的缓存项目,点击清除。苹果手机:我的-设置-通用-存储空间-缓存清理 ...原创 2020-07-16 15:07:45 · 9190 阅读 · 0 评论 -
vue微信公众号获取当前省市区详细地址
1.获取签名,调用微信api进行位置信息授权获取当前经纬度2.火星经纬度转百度经纬度3.利用百度api转化成对应的省市区详细地址(这里要注意,我们需要引入百度api,及自己的密钥,<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=自己的密钥"></script>)wxAddress() { let that = this; let u = navi原创 2020-05-27 10:52:29 · 2003 阅读 · 0 评论 -
vue页面title问题(微信公众号)
一般来说vue单页面应用的title在index.html中设置,但是一旦设置就是唯一了,对此有了以下需求:需要实现不同的页面对应不同的title。我们可以用router.beforeEach 来实现router.js{ path: '/personal', component: () => import('../view/home.vue'), ...原创 2020-04-14 14:43:21 · 1599 阅读 · 0 评论 -
普通js使用ajax,微信公众号授权(微信网页授权)
微信授权的整个流程:引导用户进入授权页面同意授权,获取code 通过code换取网页授权access_token(与基础支持中的access_token不同) 如果需要,开发者可以刷新网页授权access_token,避免过期 通过网页授权access_token和openid获取用户基本信息(支持UnionID机制)其实说白了,前端只需要干一件事儿,引导用户发起微信授权页面,然后得到...原创 2018-11-19 17:12:19 · 7166 阅读 · 3 评论 -
vue脚手架,微信公众号授权(微信网页授权)
如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。首先我做了一个H5小项目,然后申请公众号,然后在【自定义菜单】中输入想填写的,公众号菜单名称,以及页面地址:然后,我们在我们的前端页面写调用服务器接口,得到授权。当然这里,后端操作的多。前端只需要请求接口即可。前端应该做什么呢?首先,在我们的vue架子下,找到路由rout...原创 2018-11-17 22:16:59 · 9398 阅读 · 1 评论 -
ios中mint-ui picker滑动时页面跟着滚动的解决方法
由于 Picker 组件的滚动是用 touch 事件 + translate 实现的,所以我们可以在 Picker 弹层出现的时候禁止页面的默认滚动机制,Picker 弹层消失时解除禁用页面的默认滚动机制解决方案:data () { return { /*---------监听函数--------------*/ handler:function(e){e.preve...原创 2020-04-27 17:14:39 · 1018 阅读 · 0 评论 -
移动端微信浏览器字体放大导致布局错乱的解决方案
IOS中css设置:body{ -webkit-text-size-adjust: 100% ;}Android中js设置:(function() { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFont...原创 2020-04-07 20:30:15 · 1176 阅读 · 1 评论 -
微信浏览器调整字体后,页面错位
阻止页面字体自动调整大小// 安卓:(function() { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else { if (document.addEventListener)...原创 2020-01-13 18:01:35 · 398 阅读 · 0 评论 -
vue指令解决ios微信打开网页键盘弹起后页面上滑,导致弹框里的按钮响应区域错位
import Vue from 'vue';Vue.directive('blur', { 'bind'(el) { el.addEventListener("click", function(){ window.scrollTo(0,0); }) }}); //在点击页面提交按钮的时候,把滚动条滚到底部就OK了...原创 2020-01-13 17:56:56 · 755 阅读 · 0 评论 -
微信浏览器input关闭键盘后导致页面底部空缺问题
移动端页面中有一个input框,点击时弹出软键盘,关闭时页面底部空白出一部分,然后滑动一下又恢复原状了。解决方案: 绑定一个blur事件,当其触发时,使scrollTo为0<input type="text" v-model="teamCodeValue" @blur="inputBlur"> //对应的methods中添加js inputBlur () ...原创 2019-03-13 17:21:55 · 989 阅读 · 0 评论 -
ios系统select标签第一个选项不能被选中
可以在所有option前,加入一个option,然后设置display:none.以及disabled属性<select v-model="item.value" style="width:60px;"> <option style="display:none" value="" disabled>请选择</option>原创 2019-03-13 17:24:18 · 2170 阅读 · 2 评论 -
vue骨架屏介绍
骨架屏可以理解为是当数据还未加载进来前,页面的一个空白版本,一个简单的关键渲染路径。可以看一下下面Facebook的骨架屏实现,可以看到在页面完全渲染完成之前,用户会看到一个样式简单,描绘了当前页面的大致框架的骨架屏页面,然后骨架屏中各个占位部分被实际资源完全替换,这个过程中用户会觉得内容正在逐渐加载即将呈现,降低了用户的焦躁情绪,使得加载过程主观上变得流畅。可以看一下下面的示例图,...转载 2019-07-13 17:47:43 · 4547 阅读 · 0 评论 -
react配置postcss-pxtorem
1.通过 eject 命令暴露出react 全部配置npm run eject2.安装npm i postcss-pxtorem -D3.配置 webpack.config.jsrequire('postcss-pxtorem')({ rootValue : 100, selectorBlackList : [], //过滤 propList : ['*']...原创 2019-08-02 15:49:46 · 4201 阅读 · 0 评论 -
vue-cli2.0 中postcss-px2rem配置
1.安装npm install postcss-px2rem -S2.webpack.base.conf.js配置 remUnit: 100意思为1rem=100pxplugins:[ new webpack.LoaderOptionsPlugin({ vue: { postcss: [require('postcss-px2rem')({'rem...原创 2019-08-02 15:54:52 · 3769 阅读 · 2 评论 -
js防抖与节流
在性能上,防抖和节流还是很重要的,处理不当或者放任不管就容易引起浏览器卡死。我们开发页面经常会遇到一个返回顶部的功能。这个按钮只会在滚动到距离顶部一定位置之后才出现问题代码:mounted(){ var singel_page = document.getElementsByClassName('contentWrap')[0]; singel_page.add...原创 2019-09-01 16:07:25 · 182 阅读 · 1 评论 -
vue添加锚点,滚动页面时锚点添加相应的class
第一步,给vue页面添加锚点.orange{ color: #f97910;}<template> <div class="productDetail" ref="content"> <div class="tabbar"> <div @click.pr原创 2019-03-08 10:49:56 · 1847 阅读 · 0 评论 -
html2canvas实现将网页生成图片,自定义保存图片的名称
1.安装npm install --save html2canvas2.引入import html2canvas from 'html2canvas'3.写方法方式一:通过<a>标签,当然这种方式 不适用 于手机端。<div class="save_btn" @click="savecanvas"> 保存图片</div>...原创 2019-03-02 16:56:39 · 1240 阅读 · 0 评论 -
vue插件qrcode实现手机端二维码保存功能
1.安装npm install qrcode --save2.页面引入并使用利用<img src="">标签,实现二维码图片功能。然后长按保存即可。<template> <div class="qrcode"> <canvas id="canvas" style="display:none"原创 2019-03-10 14:30:30 · 2202 阅读 · 1 评论 -
移动端适配解决方案rem的js换算(非font-size:31.25vw,非font-size:62.5%)
在这之前做web app开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 1136标准,所以高度一般取个大概值,各种图标的宽高也是取平衡值写死,然后部分样式通过媒体查询来设置,例如背景图的多倍图、基础字体大小、图标宽高。这样做的弊端很明显: 1. 做出来的页面在各种手机端看起来的物理大小(高度...原创 2018-11-11 01:26:18 · 848 阅读 · 2 评论 -
手机端font-size:62.5%原理
原理: 是根据根节点html的默认字体大小font-size来计算的,以此进行rem的初始值设置。实现对不同屏幕宽度的适配。(100px/16px=6.25=625%, 100代表100px,这里是以100px来换算的,即:1rem=100px。当然有些地方是10px/16px=62.5%,以10px来换算的,即1rem=10px。)rem是css3中新增加的一个单位属性,是相对长度单位。相对...原创 2018-11-11 00:52:33 · 3754 阅读 · 2 评论 -
手机端font-size:31.25vw原理
移动端布局一般使用: 方法一:媒体查询 + rem + 弹性盒子布局 方法二:vw + rem + 弹性盒子布局这里说一下vw原理: vw它是根据可视区的宽度来计算的 如果是10vw,就是当前移动设备(浏览器)宽度的十分之一大小 vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)...原创 2018-11-11 00:33:20 · 1788 阅读 · 0 评论 -
移动端常用meta属性
1.设置当前html文件的字符编码<meta charset="UTF-8">2设置浏览器的兼容模式(让IE使用最新的浏览器渲染)<meta http-equiv="X-UA-Compatible" content="IE=edge"/>基本的属性: <meta name="viewport" content="width=原创 2018-11-11 00:29:27 · 401 阅读 · 0 评论 -
手机端如何使得头部底部固定,中间不被遮住且展示完整信息
这里用的是flex#app{ display: flex; flex-direction: column;}中间部门写 flex:1; 所以,底部和顶部会被撑开,且固定。(这里的中间部分我用的是h5新标签,当然可以用div来写)。注:这里面的px应当用rem转换,这里我并没有写,没有介绍。写手机端的时候,是一定要转换的。这里主要讲的是,头部和底部固定。全部代码如下:...原创 2018-11-07 14:48:54 · 3993 阅读 · 0 评论 -
vue刷新当前路由 router-view中的内容(pc端+手机端)
通过改变router-view中的key来达到刷新组件的目的。界面上有个刷新按钮,点击刷新的时候,执行函数,改变activeDate的值,为当前的时间戳。这样就会刷新router-view中的内容。<span title="刷新" @click="refresh"></span><router-view :key="activeDate"/>d..原创 2018-10-26 11:21:51 · 2877 阅读 · 0 评论 -
手机端页面自适应—rem布局
写手机端页面的时候要在meta加入,下面代码:<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> name=”viewport” 说明此meta标签定义视口的属性 initial-scale=1.0 意思是将页面不放大,还是1.0 wi...原创 2018-07-08 21:27:06 · 265 阅读 · 0 评论 -
移动端border为1px的设置方法
在Reina屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多。为什么会这样呢?那是因为css中的1px并不等于移动设备(物理像素)的1px。物理像素显示是1个像素代表2个像素,所以出现border为2px。解决方式:伪类 + transform 原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transf...原创 2018-07-21 18:24:50 · 1337 阅读 · 0 评论 -
苹果手机清除input阴影效果以及圆角效果
因为苹果手机input框,会带上圆角效果和阴影效果。很不美观,所以要想去掉,加以下代码即可 。input{ -webkit-appearance: none; border-radius:0;}原创 2018-07-21 17:33:35 · 2160 阅读 · 0 评论 -
移动端,div点击瞬间,出现阴影问题。
苹果手机测试中,div被点击的时候就不会有阴影出现,可以写以下代码,来解决这个bug:div {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}rgba(0, 0, 0, 0) 也可以改transparent (透明色) 作用相同。...原创 2018-11-16 14:19:27 · 2394 阅读 · 0 评论 -
mint-ui的search组件使用
首先页面引入:import { Search} from 'mint-ui';Vue.component('mt-search', Search); vue页面代码<div class="page-search"> <form action="" target="frameFile"> <mt-search v-model="c.原创 2018-11-17 18:05:10 · 5220 阅读 · 2 评论 -
关于移动端使用position:fixed/absolute出现随屏幕滚动情况
在position:fixed/absolute内加入-webkit-transform: translateZ(0);假如有遮罩情况则在内容区域,加入:margin-bottom:30px;//margin-top:30px;抖动情况,则在内容区域,加入 :overflow-y: auto;...原创 2019-03-03 17:05:50 · 9505 阅读 · 0 评论 -
移动端经常出现的兼容问题整理
1.防止手机中页面放大和缩小<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>2. 安卓浏览器看背景图片,有些设备会模糊因为手机分辨率太小,如果按照分辨率来显示网页,字会非常小,安卓手机devicePixoRa...原创 2019-02-09 16:50:48 · 252 阅读 · 0 评论 -
移动端中使用调试控制台 vConsole插件
1.安装npm install vconsole然后复制 dist/vconsole.min.js 到自己的项目中。2.引入模块(1) 如果未使用 AMD/CMD 规范,可直接在 HTML 中引入 vConsole 模块。为了便于后续扩展,建议在 <head> 中引入:<head> <script src="path/to/vc...原创 2018-12-18 17:44:52 · 1769 阅读 · 3 评论 -
微信公众号支付接口(vue项目中,两种方法)
第一种:引入微信js-sdk//在一个地方调用this.weixin()方法,比如说按钮 //写微信支付方法weixin() { var that = this; var url=''; var params = { .....//价格,数量等等一类的 }; axios.post(url...原创 2018-11-23 14:37:13 · 2889 阅读 · 1 评论 -
微信公众号接口调用JS-SDK(vue项目,以扫一扫为例)
该方法需引入微信js-sdk ,先npm安装//在一个地方调用this.weixin()方法,比如说按钮//写扫一扫方法weixin() { var that = this; var url=''; var params = { ..... }; axios.post(url,param...原创 2018-11-23 11:35:55 · 2676 阅读 · 1 评论