微信小程序中内嵌h5页面，添加拨打电话功能

最新推荐文章于 2025-03-28 17:36:30 发布
最新推荐文章于 2025-03-28 17:36:30 发布
阅读量1.4w 收藏 10
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序 拨打电话功能 小程序内嵌h5页面可拨打电话
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39378691/article/details/83653139
版权
1.内嵌的h5页面，head里面添加meta标签，需要拨打电话的地方添加a标签 ，属性href=“tel: 135xxxxxxxx”
PS：name="format-detection"为格式检测，telephone=yes为手机号码显示为拨号的超链接
<meta name="format-detection" content="telephone=yes"/>

在这里插入图片描述

2.html页面布局是，点击联系我们，弹出phone窗口，“拨打”后面跟着后台返回的号码，点击取消即放弃拨打，点击确定可拨打该号码

在这里插入图片描述

3.script中get请求，从后台获取到电话号码赋给pcall。点击“联系我们”，号码追加到.pcall的span标签中，点击“确定”，a标签添加href属性，即拨号的超链接，可去到手机拨号处

在这里插入图片描述

4.小程序中浏览效果如下：

在这里插入图片描述

uniapp H5页面、小程序页面获取手机号拨打电话
maoge_666的博客
04-12 3826
uniapp H5页面、小程序页面获取手机号拨打电话
微信小程序内嵌h5，h5自动登录功能实现
julycms.com
06-28 1640
回到主题，那么我们已知，同一个主体，比如 主体A，下面有一个小程序，一个h5，现在用户已经在小程序上登录了，然后访问内嵌h5，这个时候h5里面用户是没有登录的，那么怎么获取呢？比如，主体是A企业，A企业下面有应用小程序，H5, app，那么这个三个应用里面，同一个用户的openid不同，但是unionid相同。是微信给某个用户在某个应用下生产的一个id，同一个用户在同一个主题下的不同应用生产的openid不同。在实现这个功能之前，我们得先了解两个概念，code, openid，Unionid。
微信小程序嵌入 H5 页面（web-view）
热门推荐
hudeyong926的专栏
12-15 3万+
2、在 iOS 中，若存在JSSDK接口调用无响应的情况，可在 web-view 的 src 后面加个#wechat_redirect解决；在开发微信小程序的时候，我们有时候会遇到将 H5 页面嵌入到小程序页面中的情况；会自动铺满整个小程序页面，个人类型的小程序暂不支持使用；1、web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信；页面中的 iframe ，方便我们在微信小程序中打开一个 H5 页面；这里添加需要嵌入到小程序里面 H5 页面的合法域名（最多200个）；
微信小程序内嵌H5的技术实现与注意事项（二）
最新发布
m0_51429350的博客
03-28 1190
web-view>微信的组件允许你在微信内置浏览器中嵌入网页内容。这使得你可以将现有的网页应用集成到微信小程序中，提供更好的用户体验。以下是关于微信<web-view>
判断H5页面环境是否在小程序的webview中
weixin_40030173的博客
08-26 2897
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script> var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger...
在百度小程序嵌套H5页面拨打电话
小白的博客
11-29 1067
<script src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.6.js"></script> <script> //判断是否出于百度小程序内部,如果属于,就调用内部api function call_phone(phone){ if(navigator.u...
小程序怎么跳转H5并且进行一键拨号打电话？几行代码解决！
LauEl-的博客
07-26 1345
这样的话我们就可以使用一些手段进行一个电话拨打的功能。配置好这里后就把以下代码上传到服务器跳转就可以了。首先一定要在小程序后台管理里配置业务域名。模板建站无法进行一键拨号这个功能。模板也是可以进行h5链接的。就可以实现拨打电话功能了！但是小程序支持h5跳转。
【H5页面嵌入到小程序或APP中实现手机号点击复制和拨号功能】
m0_56026872的博客
08-28 6596
在H5界面嵌入到小程序和移动应用（安卓和iOS）中实现手指点击手机号弹出弹窗，包含呼叫和复制选项，是可以实现的。下面我将为你提供一个基本的示例，并解释在小程序、安卓和iOS中要做的支持工作。
微信小程序嵌入H5页面播放监控webrtc视频流1~2秒画面延迟,安卓和ios都兼容
04-23
在微信小程序中嵌入H5页面来播放监控视频流，特别是使用WebRTC技术，可能会遇到1到2秒的画面延迟问题，而这个问题需要针对iOS和Android两大操作系统进行优化以实现良好的兼容性。以下将详细探讨这一主题，以及如何...
快速小程序开发之微信小程序内嵌 H5
03-29
本篇博文将从业务选型，微信小程序后台配置，使用 web-view 完成登录业务以及在实战中如何调试一次性带你感受小程序内嵌 H5 的风采，帮你更有底气的使用微信小程序新组件 web-view。   技术选择 H5 转成小程序方案...
微信小程序（内嵌网页分享功能）
05-21
综上所述，微信小程序内嵌网页分享功能的实现涉及了`<web-view>`组件的使用、JSAPI的调用、消息传递机制以及微信小程序的权限管理。开发者需要对微信小程序的架构和API有深入理解，才能有效地集成并测试这种功能。...
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
10-16
通过以上步骤，我们成功实现了在微信小程序的Webview中内联H5页面，并通过交互调用微信支付的功能。在整个过程中，关键在于H5与小程序之间的数据通信，以及正确处理微信支付的回调。确保数据安全和用户体验是设计...
app里面嵌套的H5页面上电话号码怎么才能点击拨号？
anjiye7641的博客
09-29 1198
代码： <p>联系我们:<a href="tel://66666666666">66666666666</a> </p> 转载于:https://www.cnblogs.com/autoXingJY/p/9723815.html
微信小程序中嵌套webview页面，实现拨打电话功能
qq_42017632的博客
01-23 1355
微信小程序中嵌套webview页面，实现拨打电话功能
H5页面（微信也可）中调用手机拨打电话功能
qq_33290968的博客
03-29 3983
正常情况下直接调用如下代码： <a href="tel:13555555555">打电话</a> Vue中使用动态绑定 <a :href="'tel:'+phone">打电话</a> 如果要在组件内使用次功能，需要用a标签包裹组件才可生效 <a :href="'tel:'+phone"><van-button type="primary">联系用户</van-button></a> 上面的代码在绝大多数手机
微信小程序拨打电话
❤❤❤
10-30 319
wxml: &lt;view class='kf' bindtap='tel'&gt; &lt;view class='sc_img'&gt;&lt;image src='/images/tel.png'&gt;&lt;/image&gt;&lt;/view&gt; 客服 &lt;/view&gt;  js: 在index.js的Page里面去添加 tel:fu...
H5页面调用a标签打电话
A_one2010的博客
11-10 496
注意事项：使用tel:119,可以在安卓上正常使用，ios有兼容问题，tel://119，在ios与安卓上都可以正常调用。
h5点击电话号跳转手机拨号
newbaby123的博客
07-18 2285
我们首先在<head>标签中添加代码。需要使用到h5的 <a>标签。然后再想要的位置添加代码。这样最重的样式是这样的。
微信小程序嵌入 H5 页面（webview）基本用法和父子传参数说明
talentT的博客
03-29 8501
最近实现一个功能需要在小程序嵌入其它系统内部的一个页面（用vue写的H5页面），但小程序是无法使用iframe的，所以最终选择小程序官方的webview实现，本文对基本用法和父子传参进行说明
如何在微信小程序的内嵌H5页面中设置和实现小程序订阅通知功能？
11-07
在微信小程序中，为了实现内嵌H5页面的订阅通知功能，你需要通过微信提供的JS-SDK来完成。以下是步骤： 1. **引入JS-SDK**： 首先，在H5页面的`script`标签中引入微信JSSDK，通常在`wx.ready()`回调函数内部加载： ```javascript wx.ready(function() { // 初始化JS-SDK wx.config({ debug: false, // 开发环境开关，调试模式下会弹出log提示 appId: 'your_app_id', // 小程序ID timestamp: '', // 调用接口时返回的时间戳 nonceStr: '', // 调用接口时返回的随机串 signature: '', // 调用接口时返回的签名 jsApiList: ['checkJsApi', 'getUpdateManagerVersion'] // 需要使用的JS接口列表 }); }); ``` 2. **检查权限**： 使用`checkJsApi`方法检查用户是否授权了消息推送权限，如果没有则需要引导用户授权： ```javascript wx.checkJsApi({ jsApiList: ['subscribeMessage'], success: function(res) { if (!res.checkResult.subscribeMessage) { wx.authorize({ scope: 'scope.message', success: function() { // 用户同意授权，后续可以调用subscribeMessage接口 }, fail: function() { // 用户拒绝授权，提示无法使用该功能 } }); } } }); ``` 3. **申请订阅通知**： 当用户授权后，可以使用`subscribeMessage`方法请求订阅： ```javascript wx.subscribeMessage({ title: '标题', // 消息标题 desc: '描述信息', // 描述文字 needShowNotification: true, // 是否显示通知 clickTitle: '点击标题', // 点击后的跳转链接或按钮文案 path: '/pages/your_page', // 点击后的页面路径 success: function(result) { console.log('订阅成功'); }, fail: function(errCode, errMsg) { console.error('订阅失败:', errCode, errMsg); } }); ``` 4. **管理通知版本**： 可能需要更新通知服务端版本，使用`getUpdateManagerVersion`方法获取当前最新版本： ```javascript wx.getUpdateManagerVersion({ success: function(res) { if (res.updateAvailable) { // 版本可用，这里可以引导用户更新到最新版 } else { // 版本是最新的，不做处理 } } }); ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值