taro微信小程序跳转h5页面

项目架构-tarojs+react+sass+微信开发者工具

项目使用taro官网上面的步骤构建起来的项目架构，之后生成微信端的小程序，由于项目与车险有关，需要多个渠道融合在一起，所以避免不了要调用其他端的页面去实现功能，所以涉及到了taro小程序跳转h5的知识

小程序跳转需求需求

在项目中，有为用户提供了各种快捷服务：“门店查询”、“保单下载”、“电子发票”、"报案理赔"等功能，在这里我需要跳转到h5页面。

项目目录结构

具体实现

第一步：app.js文件
在此文件中有一个组件对象config配置对象，在里面配置小程序需要跳转的其他h5小程序的appid，获得跳转权限

第二步：server.js页面组件
在文件方法中写跳转连接地址

//门店查询
handleStoreInquiry=(e)=>{    this.$preload('path', Api.StoreQuery) //这里的path是配置的小程序跳转地址   Taro.navigateTo({      url: '/pages/webview/webview'    })  }

第三步：在微信开发者工具中，会自动生成webview目录结构，在webview.js中已经为你写好了大致的结构，你只需要将你的url键名变为动态传入的值就可以了。

import Taro, { Component } from '@tarojs/taro'
import { View, WebView } from '@tarojs/components'
/*** // NOTE Taro 的 RN 端还未提供 WebView 组件，可以引入原生组件来解决 * （备注：Taro v1.2.16 已支持，这块代码还是保留作为演示）* * Taro 有开启了 tree shaking，对于未用到的内容编译时会自动去除 *  因此可以把相应端的内容都 import 进来，再根据环境进行调用即可 * * 另外 1.2.17 版本有提供了统一接口方式 https://nervjs.github.io/taro/docs/envs.html * 可以参考 ./src/pages/user-login 中的实现*/import WebViewRN from './rn'import './webview.scss'
export default class extends Component {
config = {    navigationBarTitleText: ''  }
url = ''
title = ''
componentWillMount() {    this.url = this.$router.preload.path    this.title = this.$router.preload.tittle || ''    Taro.setNavigationBarTitle({ title: this.title })
}
componentDidMount() {    this.url = this.url    console.log(this.url)    this.setState({      url: this.url    })  }  render() {    return (      <View className='webview'>        <WebView src={this.url} />      </View>    )  }}

第四步，在文件webview.wxml中将你的url，也就相当于vue的date数据，在微信小程序页面上使用

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

就这样，小程序跳转h5页面也就完成了。

taro小程序跳转h5页面相关推荐

小程序跳到h5页面_小程序如何跳转h5页面
小程序跳转H5页面是通过web-view组件来实现的,web-view是一个可以用来承载网页的容器,会自动铺满整个小程序页面. 1.配置业务域名小程序账号必须是企业账号,个人和海外账号暂不支持,只有 ...
小程序跳转H5页面没有返回按钮解决方案
公司做了一个小程序,使用webview搭建:页面全部开发完毕后,领导说这个我们得嵌入某某H5活动页.一想,这不很简单.直接把h5页面地址给我不就好了吗.然而问题来了,发现下图的问题了吗???缺少返回按 ...
【微信小程序】微信小程序跳转H5页面的实现思路与方案
需求简述当前项目的主流程采用H5的方式编写. 在一些渠道的营销推广活动中,并不能直接跳转到网页,但可以跳转到微信小程序. 于是希望通过微信小程序,间接实现跳转H5页面的需求. 方法简述有两种解决方 ...
小程序跳转H5页面，修复线上环境无法打开问题
有时候会遇到小程序跳转到H5页面的需求,下面是利用web-view实现简单的小程序跳转到H5页面首先需要单独创建一个文件来使用web-view组件,组件具体使用方法见官方文档web-view | 微 ...
小程序跳到h5页面_微信小程序跳转到H5页面实战篇
有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信 ...
微信小程序跳转h5页面的方式
通过web-view跳转h5, 自己总结了几种用过的方法,有更好的,欢迎讨论补充: 1.使用navigator在wxml中编码,单独写一个文件,/pages/webview/index.wxml 第二 ...
WebView 微信小程序跳转h5项目，h5项目拿到token
h5vue项目接收token,防止用户从微信跳转h5,token失效,用户体验性差在App.vue文件中Mouted里面 getUrlData() {let tempStr = window.loc ...
【微信小程序】关于H5跳转微信小程序、微信小程序跳转H5、微信小程序跳转微信小程序的实现方法
0 说明业务提出需求,要实现H5跳转微信小程序的需求,在浏览器.微信环境下,都能通过H5跳转进入小程序. 另外,本文也将微信小程序跳转到H5,以及微信小程序跳转到微信小程序的方法进行汇总. 对于,微 ...
React + Taro 小程序跳转公众号
Taro小程序跳转公众号的文章步骤:登录公众号后台-小程序-小程序管理-添加-关联小程序关联后就可以在微信的公众平台查看(设置-关联设置-关联公众号) 如图所示: 然后使用web-view 我这个 ...

taro小程序跳转h5页面