uniapp开发的h5如何跳转回uniapp开发的app或小程序以及getLocation授权

这篇具有很好参考价值的文章主要介绍了uniapp开发的h5如何跳转回uniapp开发的app或小程序以及getLocation授权。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近有个需求,以前开发的uniapp代码,用于打包成app与小程序。目前需要将其部分功能以h5的方式嵌入到另一个原生开发的小程序中。且需要监听webview中src的变化
1.解决打包成h5后,跳转到微信小程序页面
a. 首先按照uniapp官方给定的h5模板,新建一个index.html在根目录下
b. 在manifest.json中的Web配置–>index.html模板路径中选中刚才新建的index.html
c.在index.html中引入以下代码,即可使用对应方法跳转回原生页面

<!--若是跳转回原生语法的编写的微信小程序,则只需要第一个script
wx.miniProgram.navigateTo等方法跳转页面-->
 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
 <!--若是跳转回uniapp语法的编写的小程序,则同时需要个script,
uni.navigateTo等方法跳转页面-->
    <!--<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>-->

2.在被嵌入的h5页面中,可以使用hashchange监听到小程序weview标签上src的hash值变化,
但是在微信开发者工具中无法生效,只能在真机中调试
3.可以在微信webview页面使用await方法获取小程序定位,获取时会弹出授权提示,用户授权后,webview页面才会继续加载,不用担心用户还未授权webview便加载完成
4.从2022年7月开始,新发布的小程序使用位置信息相关的接口需要去微信公众平台中申请开通,并在app.json中进行配置https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html文章来源地址https://www.toymoban.com/news/detail-593783.html

  "requiredPrivateInfos": [
    "getLocation",
    "chooseLocation"
  ],

到了这里,关于uniapp开发的h5如何跳转回uniapp开发的app或小程序以及getLocation授权的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 开发uniapp过程中对app、微信小程序与h5的webview调试

        因为在开发中使用到了webview,因为出现一些问题,所以需要对webview进行跟踪调试,但因为app,h5与微信小程序不一样,所以需要单独说一下。     一、H5     这个比较简单,因为都是在chrome,用F12就可以  二、对微信小程序       因为普通的uniapp页面上都能通过F12可以

    2024年02月11日
    浏览(68)
  • 完全开源的商城源码thinkphp5后台+uniapp+多商家入驻+支持H5小程序APP且支持二次开发

    首先大家在搭建多商户商城小程序之前要做好市场调研,在对市场定位有了充分认识和了解之后才能够明确我们多商户商城小程序的定位方向。像是对于商城网店的市场行情做充分的了解,清楚消费者的具体需求,当前社会的流行趋势等都对于日后打造成功的多商户商城小程

    2024年02月04日
    浏览(49)
  • App打开小程序,无法跳转回App的问题

    我的需求: 在App中调起小程序,让小程序去完成支付,支付成功后,在小程序里点击按钮,返回App。 碰到的问题: 支付成功后,点击按钮,无法返回App。 解决方案: 在AndroidManifest.xml的WXEntryActivity中加入如下属性: 我的问题就是这么解决的,你也可以这么试一试。如果帮到

    2024年02月16日
    浏览(45)
  • uniapp webview交互以及h5传参到app

    app端,onPostMessage在nvue页面下接受参数,message在vue页面下接受参数 链接后拼接传参,只在一开始能传 方法传参 H5端,我这是用vue2写的 在index.html页面加上这个 在首页接受参数 往APP传参 接受APP的方法传参,变量跟data里面的变量绑定

    2024年02月16日
    浏览(51)
  • uniapp 之 uniapp app 与uniapp H5的通信 webview,以及处理H5页面的手机物理返回问题

    APP端: 引用 web-view     app给H5传参:通过h5地址传参 这个方法简单,就是直接通过src 地址后面通过 ? 拼接参数 app端 h5端通过uniapp生命周期函数 onLoad 接收参数     app给H5传参:通过方法 evalJS 传参 H5给app传参:通过 web-view 组件的 @message 绑定的方法 处理H5页面的手机物理返

    2024年01月16日
    浏览(49)
  • uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法

    方法1:在pages.json 原生小程序也可以采用类似的方法去掉顶部,让头部变透明 小程序页面顶部导航栏navigationBar如何隐藏、变透明?_你挚爱的强哥的博客-CSDN博客 小程序顶部的白色背景条就不见了,直接变透明,只剩下右上角的胶囊按钮。 https://s-z-q.blog.csdn.net/article/details/13

    2024年02月13日
    浏览(73)
  • Shopro商城 高级版 Fastadmin和Uniapp进行开发的多平台商城(微信公众号、微信小程序、H5网页、Android-App、IOS-App)

    Shopro商城无加密的开源源码( 可用于自营+外包项目(多主体) 、 可用于外包定制开发项目 ) shopro 商城,一款基于 uni-app 的前端模板商城。目前适配了(小程序+app+h5+公众号)。 主要功能:登录、注册、签到、富文本、分类、购物车、筛选、地址、商品评论、积分商城、拼团、

    2023年04月09日
    浏览(68)
  • 原生app与uniapp开发的H5交互,H5写法

    一、h5调用原生app方法         1、先判断是安卓系统还是ios系统         2、调用原生app方法     toAppLogin 为调用原生app的方法                 1)   ios环境:window.webkit.messageHandlers.toAppLogin.postMessage();                 2)安卓环境:window.android.toAppLogin(); 二、原

    2024年01月21日
    浏览(44)
  • uniapp区分app、h5、小程序

    标签内 JS+CSS内 标签内 JS+CSS内 标签内 JS+CSS内  

    2024年04月11日
    浏览(54)
  • uniapp 条件编译 APP 、 H5 、 小程序

    标识 作用 #ifdef 仅在某个平台上使用 #ifndef 在除了这个平台的其他平台上使用(非此平台使用) #endif 结束条件编译 标识 平台 APP-PLUS 5+App MP 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序 MP-WEIXIN 微信小程序 MP-ALIPAY 支付宝小程序 MP-BAIDU 百度小程序 MP-TOUTIAO 头条小

    2024年04月14日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包