-
2020-07-28 09:48:17
微信内打开App终于开发完成了: 说说我踩过的坑吧:
1,跨域问题,微信给的api地址是微信的前缀,访问时是需要处理跨域的,一般的跨域问题处理方式:
1.1:请求让后端完成,后端请求不会出现跨域问题。1.2:前端做代理,前端做代理是代理的本地,再将服务器nigix的代理做好,就能将服务器的代理也完成。
2,appid的问题,微信标签里面写的appid不是公众号的appid,而是移动应用的appid。这个怪我没好好读文档导致的。
<wx-open-launch-app id="launch-btn" appid="wxc8d81336736a6d43" //**app的appid** extinfo="" >
3,
import wx from 'weixin-js-sdk'
这个weixin-js-sdk是一定要在使用页面引入的。判断是否引入成功,就是后面的debug模式一定要开启的。
4,
wx.config({ debug: true, // 开启调试模式, appId: 'wxcdbe7983be8fb746', // 必填,企业号的唯一标识,此处填写企业号corpid timestamp: this.time, // 必填,生成签名的时间戳 nonceStr: this.nums, // 必填,生成签名的随机串 signature: this.signature,// 必填,签名,见附录1 jsApiList: ['wx-open-launch-app'], openTagList: ['wx-open-launch-app'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 });
- 在调试的时候,一定要将debug调成true,这样的话就进入的是调试模式,调试模式下,进入页面后,就会有弹框弹出:config:fail表示这个标签引入是失败的;
config:ok表示这个标签的引入是成功的。
5,
wx.ready(function (res) { console.log(res) }); wx.error(function (res) { console.log(res) });
var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success'); }); btn.addEventListener('error', function (e) { console.log('fail', e.detail); });
这段代码的回调判断可以直接得到wx的引入是否成功。e.detail.errMsg的报错信息是比较关键的。具体的报错原因要到微信的官方上看。上面给出了很多种报错的可能性以及解决方案。
附录5-常见错误及解决方法https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
兼容性问题
现在开发遇到了一个兼容性的问题,正在解决当中。问题描述如下:-
在安卓机型的微信浏览器中,打开h5页面,点击出现弹框,但是弹框的按钮部分,本来应该是“打开App”字样,但是却是空白的。
解决排查方案:
-
思考是否是兼容的问题:
-
线索:苹果手机可以正常显示“打开App”字样,只有安卓机型不显示。所以初步判定是兼容的问题,但是另一个banner上的“打开App”可以正常显示,所以这个标签本身对安卓是不过敏的,因此我认为不显示和弹框有很大的关系。
-
排查步骤: 是否是Dom层的问题:因此我去掉了微信标签,换成了原来的按钮html,
现在的结果是:按钮显示出来了,文字也显示了。完成✅ -
进行下一步:让按钮上的文字能有正常的显示样式。完成✅
-
进行第4步:将微信标签加到Dom中。观察按钮是否还在。❌完全不显示了
-
5,排查一下是否是标签外部没加view导致的。因此我在标签外部加了view,并且给了这个view宽度以及高度和背景颜色。❌即使外部的框显示出来了,内部的也没有显示。
-
我将没有问题的代码直接复制过来了,看看会不会出错。❌我已经试了所有的可能性,还是没出现这个按钮!!!我绝望了
-
也许是z-index 的问题吗?好像就是❌,并不是的。
-
终于发现了问题,这个微信标签是不可以和position :
fixed一起用的。我的弹框的样式都是用固定定位写的,因此出了问题。那么,我写在外面可不可以呢??试一下吧:我将标签按钮写在了position:fixed的外面。答案是:可以的。🙆✅ -
在网上:微信开放平台的问答区找到了合适的方法。将这个标签的定位定在弹框的确认按钮上,然后将这个按钮设为完全透明,这样用户点击时,实际上触法的是覆盖在弹框上的透明按钮。✅
这里要注意的点是:微信标签的按钮宽高样式不支持rpx,使用px就好。还有覆盖层级z-index要注意。 -
最后一步了,现在安卓手机的兼容问题已经解决了大部分。安卓上按钮可以点击了。但是:按钮不可以和v-show一起用!!!这样的问题就是:按钮会一直存在于页面上,不会和弹框一起消失,一起出现!!现在还没解决这个问题!!
-
✅终于解决了这个问题:v-show会让按钮在安卓机上不显示呢,换成v-if就可以了。 ⛽️😄
完成啦!!!
代码会在下一篇文章中贴出来。
更多相关内容 -
App内置的web浏览器
2021-04-04 10:33:31源码DZNWebViewController,该项目是一个简单的适用于iPhone & iPad的web浏览器,功能上类似Safari,适合在app内进行web浏览,可以被子类化和扩展。 测试环境:Xcode 6.0,iOS 6.0以上 -
uniapp APP打开浏览器界面(browser.js)
2021-07-31 08:30:00uniapp APP打开浏览器界面 -
Android-一个App内嵌浏览器
2019-08-13 05:15:59WappBrowser是一个Android In-App浏览器,这个浏览器遵循亚美H5框加规范,规范主要将H5 -
ios内置浏览器
2016-01-06 16:07:39可直接拖入项目中使用,可自定义浏览器中的前进、后退、刷新控件。 -
微信支付如何实现内置浏览器的H5页面支付
2020-09-03 08:03:55主要介绍了微信支付如何实现内置浏览器的H5页面支付的相关资料,需要的朋友可以参考下 -
Adnroid 微信内置浏览器清除缓存
2020-10-21 23:30:15本文主要介绍,微信内置浏览器无法清除缓存的问题.这里整理了一些方法,以供大家学习参考,希望能帮到有需要的小伙伴 -
uniapp 微信内置浏览器h5打开app
2022-01-21 15:13:20主要就是使用微信jssdk中的开放标签wx-open-launch-app’ 使用微信 JSSDK 可以用npm下载并安装 先新建文件并在里面声明开放标签 import wx from '这是你引进来的微信jssdk地址' export default { wxjs(){ uni....主要就是使用微信jssdk中的开放标签wx-open-launch-app’
使用微信 JSSDK
可以用npm下载并安装
先新建文件并在里面声明开放标签import wx from '这是你引进来的微信jssdk地址' export default { wxjs(){ uni.request({ url:这是你们后端返回appid、签名等的接口, methed:'get', then((res)=>{ wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名 jsApiList: [], // 必填,需要使用的JS接口列表 openTagList: ['wx-open-launch-app'] // 非必填, }); wx.ready(() => { }) }) }) } }
在main.js声明新建文件
import integralTask from './utils/integralTask.js' Vue.prototype.$tool = integralTask
在使用该标签的页面
<wx-open-launch-app id="launch-btn" appid="这个appid是要跳转的app在微信开放平台的appid" extinfo="这是跳转app时所带的参数"> <script type="text/wxtag-template"> <style> .btn{ display: flex; height: 31px;width: 90px; } .txet{ margin-left: 6px;color: #fff;font-size: 13px;line-height: 31px; } </style> <view class="btn"> <text class="txet">在APP打开</text> </view> </script> </wx-open-launch-app> <script> export default { onLoad() { this.$tool.wxjs() }, mounted() { setTimeout(()=>{ var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function(e) { console.log('success成功'); }); btn.addEventListener('error', function(e) { console.log('fail', e.detail); uni.showModal({ title: '系统消息', content: '您的手机未找到当前应用,是否去下载?', success: function(res) { if (res.confirm) { let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isiOS) { window.location.href = '这里填应用宝的iOS端app下载链接' }else{ window.location.href = '这里填应用宝的android端app下载链接' } } else if (res.cancel) { console.log('用户点击取消'); } } }); uni.showToast({ title:"请在自带浏览器上打开", icon:"none" }) }); },1000) }, } </script>
-
使用android内置浏览器打开网页
2021-06-04 07:56:14package ...import android.app.Activity;import android.app.AlertDialog;import android.content.DialogInterface;import android.os.Bundle;import android.text.Editable;import android.te...package com.example.exp14_10_1;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.text.Editable;
import android.text.method.KeyListener;
import android.util.Log;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnKeyListener;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends Activity {
private WebView wv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wv = (WebView) findViewById(R.id.webView1);
wv.getSettings().setJavaScriptEnabled(true);
wv.setWebChromeClient(new WebChromeClient());
wv.setWebViewClient(new WebViewClient());
// wv.setWebViewClient(new WebViewClient());如果不适用该句代码将使用内置浏览器
Button back = (Button) findViewById(R.id.back);
Button forward = (Button) findViewById(R.id.forward);
Button GO = (Button) findViewById(R.id.go);
final EditText urlText = (EditText) findViewById(R.id.editTextUrl);
back.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
wv.goBack();
}
});
forward.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
wv.goForward();
}
});
GO.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
String urlStr = urlText.getText().toString();
if (!"".equals(urlStr)) {
openBrowser(urlStr);
} else {
openBrowser(urlStr);
showDialog();
}
}
});
urlText.setOnKeyListener(new OnKeyListener() {
public boolean onKey(View v, int keyCode, KeyEvent event) {
// TODO Auto-generated method stub
if (keyCode == KeyEvent.KEYCODE_ENTER) {
String urlStr2 = urlText.getText().toString();
if (!"".equals(urlStr2)) {
openBrowser(urlStr2);
return true;///不让文本框换行
} else {
openBrowser(urlStr2);
showDialog();
return true;//不让文本框换行,但showDialog显示了两次,为何呢??
}
}
///return true;这会导致文本内容无法删除,删除没反应
return false;
}
});
}// /onCreate
private void openBrowser(String url) {
Toast.makeText(MainActivity.this, "正在加载" + url, Toast.LENGTH_SHORT)
.show();
wv.loadUrl(url);
}
private void showDialog() {
new AlertDialog.Builder(MainActivity.this).setTitle("浏览器")
.setMessage("请输入网址!")
.setPositiveButton("确定", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
// TODO Auto-generated method stub
Log.d("webview", "单击确定按钮");
};
}).show();// //new DialogInterface.OnClickListener()
}// /showDialog
}
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="http://192.168.1.105:8080/bbs"
android:ems="10" >
android:id="@+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Go" />
android:id="@+id/webView1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
-
微信内置浏览器直接下载APP的解决方法
2019-02-22 09:58:00最近很多朋友问我微信内置浏览器直接下载APP有没有什么解决办法?那么今天我就跟大家分享一下有关微信内直接下载APP的解决方法。 微信作为一个通讯平台,使用人数一直稳居第一。也正因如此,微信成为了目前最具有...最近很多朋友问我微信内置浏览器直接下载APP有没有什么解决办法?那么今天我就跟大家分享一下有关微信内直接下载APP的解决方法。
微信作为一个通讯平台,使用人数一直稳居第一。也正因如此,微信成为了目前最具有营销价值和推广产品的渠道之一。但是使用过微信的人都知道,在微信里面,用户是不能直接下载APK的。原因很简单,腾讯为了自身利益,在微信中屏蔽了外来下载链接。
最简单的解决方法,在微信中打开第三方链接或下载apk需要用户通过点击“微信右上角的三个点”然后选择在浏览器里面打开,如下图
就是因为这个操作,导致大部分用户都止步不前而流量损失大半。那为了业务需要,我们该如何解决这个问题呢?现在市场上普遍使用的跳转通过腾讯的接口跳转到QQ浏览器的,如果用户手机没有安装QQ浏览器,就会出现无法跳转的后果。直接影响到的就是我们的推广率。而我们猴子数据开发的这款接口,会自动唤起手机出厂自带的浏览器进行下载,这样的话可以不用担心浏览器的问题了。大大的提高推广转化率,降低了推广的成本。
-
localStorage在安卓内内置浏览器中报错解决
2018-06-29 14:50:56localStorage在安卓内内置浏览器中报错解决,最好的解决的方法 -
微信内置浏览器中如何打开App
2016-12-19 03:45:38在微信浏览器中打开H5分享页,分享页有个大开app的Botton,当用户点击“打开app”这时判断用户的手机是否安装了此app如果安装了app则唤醒app如果没有iOS的系统就跳转到App Store,安卓的就跳转到应用宝的商店 -
java实现内置浏览器
2017-04-17 17:25:36利用java实现的内置浏览器 使用起来就像在windows上使用app一样 。后台页面是web 附带全屏功能 -
可嵌入iOS应用的内置web浏览器
2021-04-04 12:01:26源码SVWebViewController,SVWebViewController是一个简单的内置开源浏览器,可嵌入到iOS7应用中。主要特性:1、提供iPhone和iPad两套不同的UIs。2、完全支持横向切换。3、提供回退、前进、刷新、停止和分享按钮。4... -
微信扫码跳转浏览器下载app
2021-03-05 14:17:50微信扫码跳转浏览器下载app -
HBuilder X 下载安装内置浏览器失败
2021-01-30 15:00:10文章目录前言解决方法参考 ...在下载内置浏览器插件,一直提示下载失败,请检测网络是否正常: 详细错误日志,在HBuilder X中,帮助 -> 查看运行日志 解决方法 下次两种方法可以依次尝试下: 关闭HBuider X -
微信实现自动跳转到用其他浏览器打开指定APP下载
2021-01-21 12:12:51这时需要微信跳转外部浏览器打开页面的功能,对于ios用户默认可以通过微信内置浏览器点击右上角的更多按钮从而选择“在浏览器中打开”,对于安卓用户则可以实现微信内直接跳出到手机默认浏览器。但是很多用户其实并... -
uni-app运行到浏览器跨域H5页面的跨域问题解决方案.docx
2021-10-26 07:54:52uni-app运行到浏览器跨域H5页面的跨域问题解决方案.docx -
uni-app项目,在内置浏览器可以获取到接口数据,在系统浏览器或者手机扫码就获取不到
2020-07-24 11:49:00之前一直用HBuilderX的内置浏览器里调试,今天写完了用手机扫码看效果,发现手机只能显示vue内容,接口传回来的数据都不显示! 求大佬 -
uniapp 运行到内置浏览器,怎么打开开发者工具
2022-04-20 09:35:02首先 运行到内置浏览器是这样的: 然后 -
uni-app - 运行到内置浏览器使用 IP 地址(Network)访问(自定义域名)
2022-03-14 10:58:10前言 默认情况下,运行后只能 localhost 访问,如下图所示: 解决方案 打开 mainfest.json 文件,添加 disableHostCheck 属性,将值设为 true。 "h5": { "devServer": { "disableHostCheck": true ... -
Android或者是IOS/普通屏全面屏及qq浏览器和qq内置浏览器判断
2020-11-18 19:44:22app = navigator.appVersion; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // -
微信内置浏览器无法打开APP下载链接的解决方案
2019-10-08 11:24:59但是我又遇到问题,我以为微信官方提供了对应的js-sdk可以指定在微信内置浏览器中点击右上角浏览器,跳转到指定链接的页面。但是找了半天没找到,点击在浏览器中打开又在外部浏览器中打开了当前的引导页,这肯定是有... -
Android 应用程序与浏览器
2021-06-04 18:54:29首先需要明确一点基础概念点我启动应用程序在 AndroidManifest.xml 中对被启动的 Activity 进行配置接着写出 Html 文件 Just.xml启动 APP无法启动启动 APP1启动 APP2启动 APP3启动 APP4启动 APP5在浏览器中打开 ... -
微信浏览器打开APP
2021-10-27 13:55:58微信浏览器会阻止在其中直接打开APP 所有一般需要引导用户去其他浏览器 但是如果还是想在微信浏览器直接打开APP的话可以通过 wx-open-launch-app这个组件 这里是官方文档 需要的一些信息 在使用这个组件之前我们需要... -
微信中转发分享app下载链接或指定网页无法使用内置浏览器打开的解决办法
2019-03-07 23:09:10在微信的使用人数已经高居各通讯APP的榜首的同时,微信成为了我国移动流量最大的平台之一。在次趋势的引导下,很多的商家、体户便抓住了这一机遇,利用微信这个渠道来做产品的推广、以及营销方案宣传。但是好景不长... -
自己手动抓取的一些app内置浏览器的UA(User-Agent)
2019-07-05 21:47:03自己手动抓取的一些app内置浏览器的UA(User-Agent) 微信 Mozilla/5.0 (Linux; Android 8.1.0; vivo X21A Build/OPM1.171019.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/67.0.3396.87 X... -
uni-app 运行在浏览器跨域问题
2022-02-18 16:18:14在 manifest.json 根目录下配置代理 "h5": { "devServer": { "port": 8080, //端口号 ...uni.request({ url:'/api/test', methods:"GET", success:(res)=>{ } }) 即可无障碍运行在浏览器,亲测有效