微信小程序打开外部页面

这篇具有很好参考价值的文章主要介绍了微信小程序打开外部页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

思路

1.通过微信的webview实现在小程序页面显示外部链接
2.webview就相当于一个容器,用于承载外部链接的页面

实现

首先在app.json文件的page里加入一个页面"pages/webview/webview",页面名字可以自定义

"pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/webview/webview"
  ]

ctrl+s保存,微信开发者工具会生成对应页面的一些配置
微信小程序打开网页,Cocos Creator,微信小程序,小程序
接下来在webview.wxml文件里加入

<web-view src="{{url}}"></web-view>

如图
微信小程序打开网页,Cocos Creator,微信小程序,小程序
url字段通过代码赋值
在index.ts脚本里面,我这里用的是ts,也可以用js,写一段函数用于跳转

 testUrl(){
    wx.navigateTo({
      url:'/pages/webview/webview?url=www.baidu.com',
      success:(result)=>{
         console.log("************ navigateTo success:"+result)
      },
      fail:()=>{
        console.log("************ navigateTo fail:")
      },
      complete:()=>{
        console.log("************ navigateTo complete:")
      }
    })
  }

在index.wxml页面建个button监听这个函数

<button bindtap="testUrl" > 跳转外部链接</button>

最后在webview.ts脚本里的onLoad加入,onLoad有两个重载函数

 onLoad(options) {
    console.log("*********** web view" + options.url);
     let fromPath=decodeURIComponent(options.url);
     this.setData({
       url:fromPath
     })
  },

以上,即可跳转
参考:博客文章来源地址https://www.toymoban.com/news/detail-522092.html

到了这里,关于微信小程序打开外部页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序怎么改变默认的打开页面?

    刚开始接触微信小程序,本来想要打开一个新页面而不是用原来的 这个页面,每次编译之后怎么才能让默认打开的页面不是这个页面而是我指定的页面呢? 就去找到app.json 把想指定的页面放到第一个,那么默认打开的首页就是你指定的页面了, 这是来源于官网: 小程序

    2024年02月11日
    浏览(49)
  • 微信小程序打开微信H5页面,体验版可打开,生产环境访问失败,无法访问该页面

    在开发中是有web-view打开微信H5页面时出现体验版可打开,开发版可以打开,打开调试后可以打开,生产环境访却问失败,无法访问该页面,那就是我们没有配置业务域名,如下图, 解决办法,在小程序后台找到开发管理,开发设置,往下拉,找到业务域名配置 这样吧我们要

    2024年02月12日
    浏览(76)
  • 微信小程序使用webview打开pdf文档及显示网页内容

    一、微信小程序根据接口返回的pdf链接,在小程序内部浏览pdf内容 需要用到微信小程序的两个api 下载资源到本地 wx.downloadFile wx.openDocument 前一个api下载资源到本地,后一个api打开pdf文档 二、根据网页链接,把网页内容在微信小程序内部显示 需要用到微信小程序的一个标签

    2024年02月09日
    浏览(50)
  • 微信小程序扫码打开H5页面

    要在微信小程序中扫描二维码打开H5页面,你需要使用微信小程序的API接口wx.scanCode()。以下是示例代码: 1 . 在小程序页面中添加一个按钮,并绑定点击事件: 在小程序页面的js文件中编写scanCode()方法: 在小程序中添加一个webview页面用于展示H5页面,代码如下: JS代码 以上

    2024年02月11日
    浏览(54)
  • 微信小程序 ---- 通过 URLScheme 或 URLLink 从短信、邮件、微信外网页等场景打开小程序

    1. 用于短信、邮件、网页、微信内等拉起小程序的方法 《URL Scheme 拉起小程序》 《URL Link 拉起小程序》 2. 功能描述 URL Scheme: 该接口用于获取小程序 scheme 码,适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。目前仅针对国内非个人主体的小程序开放,详见获

    2024年02月02日
    浏览(50)
  • 在微信小程序中如何改变默认打开的页面

    在微信小程序中,在我们编写页面的时候,可能会在重新渲染的时候导致页面跳转到默认打开的页面上,为了提升用户的一个体验,我们可以设置一些内容来修改小程序默认打开的页面,提升开发者的开发体验。 当我们打开一个微信小程序的时候,这里是普通编译 那么,我

    2024年02月03日
    浏览(76)
  • 小程序-uniapp:URL Link / 适用于在移动端 从短信、邮件、微信外网页 等场景打开小程序任意页面

    一、背景介绍 小程序URL Scheme、URL Link是微信小程序后台生成的一种地址,适用于从短信、邮件、微信外网页 等场景打开小程序任意页面。所以,适用性极强。可与微信扫码携带参数跳转到小程序指定页面技术互补 若在微信外打开,用户可以在浏览器页面点击进入小程序。每

    2024年02月04日
    浏览(36)
  • 在微信小程序中打开的页面不能超过10个,达到10个页面后,就不能再打开新的页面

    微信小程序路由跳转有个隐藏的坑,就是  wx.navigateTo 打开新页面,最多只能打开10个,超过10个之后就没反应,控制台也不会报错。 小程序路由跳转的方式有五种,分别是wx.navigateTo(打开新页面,新页面入栈)、wx.redirectTo(重定向,当前页面出栈,新页面入栈)、wx.naviga

    2023年04月08日
    浏览(42)
  • 【微信小程序】扫描外部二维码、小程序码进入并获得携带参数,使用参数跳转到指定页面

    您需要使用微信提供的跳转链接和相关参数。以下是实现的步骤: 生成跳转链接:使用以下链接格式生成跳转链接,其中 APPID 是您的小程序的 AppID, PATH 是您要跳转的页面路径, QUERY 是您要传递的参数。 生成二维码:使用生成的跳转链接生成二维码。您可以使用在线的二维

    2024年02月08日
    浏览(60)
  • 短信跳转打开微信小程序的指定页面,可以携带参数

    本项目具体需求是短信跳转同一个小程序的不同页面,可以带参数。使用云函数和h5页面,开发时使用静态网站调试,后期h5页面后端另外部署的。 不属于原创,只是在使用的过程中参考以下教程,最终达到效果。现在记录下自己的实施过程。 微信小程序云函数使用教程【超

    2024年04月16日
    浏览(85)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包