taro小程序跳转h5页面
2020-02-05 05:40
2141 查看
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页面也就完成了。
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- h5打开小程序,h5网页跳转打开小程序页面
- 小程序跳转到h5页面,h5页面再跳回小程序
- 从h5网站页面跳转到微信小程序——微信web-view高级用法9
- 微信小程序 页面跳转传参详解
- 详谈gdtool如何通过代码实现微信h5页面跳转浏览器 在微信中点击链接直接跳转到手机默认浏览器
- 小程序页面跳转
- web-view h5页面传递参数给小程序,小程序接收h5网页传过来的数据——微信web-view高级用法10
- 微信小程序 页面跳转和数据传递实例详解
- 解决微信小程序使用switchTab跳转后页面不刷新的问题
- Android单击通知栏后返回正在运行的程序并跳转到指定fragment页面
- 小程序页面跳转时传参如何传对象
- 小程序倒计时页面跳转
- 【微信小程序】微信小程序页面跳转的数据传递
- 微信小程序页面监听右上角退出,判断小程序进入后台时就实现页面跳转
- h5判断移动设备是否安装了某app,有跳转,无则跳至下载页面
- 微信小程序 跳转页面
- 微信小程序——页面跳转
- Android卸载程序之后跳转到指定的反馈页面
- 微信小程序 页面跳转与参数传递
- 小程序---页面兼容h5标签