微信小程序跳转h5页面的方式

通过web-view跳转h5, 自己总结了几种用过的方法,有更好的,欢迎讨论补充:
1、使用navigator在wxml中编码,单独写一个文件,/pages/webview/index.wxml
在这里插入图片描述
第二步是
或者

2、通过bindtap方法在js文件中使用wx的api方法跳转,比如

 wx.navigateTo({
       url: '/pages/webview/index?url=https://域名/order/detail&orderNo=232822323',
     })

tips1. 需要注意的是,这两种方法都是先到/pages/webview/index.js文件的onload方法中,需要处理一下参数,

  onLoad: function (options) {

    let { url } = options
    // url = decodeURIComponent(url)
    if(options.orderNo){
      url = url +"?orderNo="+options.orderNo
    }

    this.setData({
      url : decodeURIComponent(url) 
    })
  },

tips2. 域名需要在微信小程序的后台开发设置中配置
在这里插入图片描述


文章标签:

原文连接:https://blog.csdn.net/mobile18611667978/article/details/121491988

相关推荐

Webpack学习系列 - Webpack5 怎么集成Babel ?

Webpack干货系列 | 在 Webpack 5 集成 ESLint 的方法

使用开源Cesium+Vue实现倾斜摄影三维展示

使用 Abp.Zero 搭建第三方登录模块(三):网页端开发

Vue初探

【前端面试】Vue面试题总结(持续更新中)

Re:用webpack从零开始的vue-cli搭建'生活'

vue3代码编写

Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

SpringBoot+Vue实现简单用户管理平台第二篇(前端设计,接口对接)

SpringBoot+Vue实现前后端分离的实习管理系统

Spring Boot+Vue3 动态菜单实现思路梳理

vue3 axios全局配置封装

热门App 高仿项目12 个 GitHub 上的高仿项目

vue2升级vue3指南(一)—— 环境准备和构建篇

TypeScript--如何在 vue中使用?

Vite+TS带你搭建一个属于自己的Vue3组件库

vue封装原生的可预览裁剪上传图片插件H5,PC端都可以使用

Java 之SpringBoot+Vue实现后台管理系统的开发

基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结