在uniapp中如何访问和使用https://uniapp.jrtxa.com/#/

在uniapp项目中如何正确访问和使用https://uniapp.jrtxa.com/#/这个网址？我尝试在代码中直接引用，但无法正常加载内容。请问需要配置什么特殊设置吗？比如跨域问题处理或安全策略配置？还有这个网址提供的功能该如何集成到我的uniapp应用中？希望有详细的使用示例说明。

2 回复

在uniapp中访问该网站，可通过web-view组件实现。在页面中添加：

<web-view src="https://uniapp.jrtxa.com/#/"></web-view>

注意：需要配置域名白名单，在manifest.json的h5配置中添加域名。


在 UniApp 中访问和使用外部网站（如 https://uniapp.jrtxa.com/#/），可以通过以下方式实现：

  1. 使用 web-view 组件：
    在 UniApp 页面中嵌入 web-view 组件，直接加载外部 URL。
    示例代码：

    <template>
  <view>
    <web-view src="https://uniapp.jrtxa.com/#/"></web-view>
  </view>
</template>

    注意：web-view 组件需在页面中单独使用，不支持嵌套其他组件。

  2. 使用 API 跳转：
    通过 uni.navigateTo 或 uni.redirectTo 跳转到新页面，并在新页面中使用 web-view。
    示例代码：

    uni.navigateTo({
  url: '/pages/webview/webview?url=' + encodeURIComponent('https://uniapp.jrtxa.com/#/')
});

    在 pages/webview/webview.vue 中：

    <template>
  <web-view :src="url"></web-view>
</template>
<script>
export default {
  data() {
    return {
      url: ''
    };
  },
  onLoad(options) {
    this.url = decodeURIComponent(options.url);
  }
};
</script>

  3. 注意事项：

    • 确保目标网站支持 HTTPS，避免混合内容问题。
    • web-view 受平台限制（如小程序需配置业务域名）。
    • 无法直接与网页进行复杂交互，需通过 uni.postMessage 实现通信。

根据需求选择合适的方式即可。

回到顶部