当前位置:   article > 正文

uniapp 跳转内部链接/外部链接(思路:webview)_uniapp window.location.href跳转

uniapp window.location.href跳转

1、先在自己uniapp项目pages.json建一个内部页面webview.vue

在page.json里面指向我们跳转的这个内部路径:代码如下

  1. {
  2. "path": "pages/webview/webview",
  3. "style": {
  4. "navigationBarTitleText": "",
  5. "enablePullDownRefresh": false
  6. }

2、在pages/webview文件夹下建一个内部页面webview.vue

  1. <template>
  2. <web-view :src="url"></web-view>
  3. </template>
  4. <script>
  5. export default {
  6. data() {
  7. return {
  8. url: ''
  9. }
  10. },
  11. onLoad(item) {
  12. // 传入需要跳转的链接 使用web-view标签进行跳转
  13. this.url = decodeURIComponent(item.url)
  14. // console.log(this.url)
  15. }
  16. }
  17. </script>

3、在需要操作的页面引用这个方法=>点击触发跳转

  1. <template>
  2. <view class="uni-form-right" @tap="getApp">平台跳转</view>
  3. </template>
  4. <script>
  5. // 点击功能模块-触发跳转
  6. getApp() {
  7. let url = 'https://www.baidu.com'
  8. // 以百度url为例子,具体填写你自己要跳转的链接
  9. uni.navigateTo({
  10. url: '/pages/webview/webview?url=' + url
  11. // page.json定义的路径 传url到webview界面去接收-实现跳转
  12. })
  13. }
  14. </script>

4、补充:uniapp跳转外部链接

  1. <template>
  2. <view class="uni-form-right" @tap="getApp">平台跳转</view>
  3. </template>
  4. <script>
  5. getApp() {
  6. window.location.href = 'https://www.baidu.com' 
  7. }
  8. </script>
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/636943
推荐阅读