Uniapp 微信小程序内打开web网页

技术栈:Uniapp + Vue3

简介

实际业务中有时候会需要在本微信小程序内打开web页面,这时候可以封装一个路由页面专门用于此场景。

在路由跳转的时候携带路由参数,拼接上web url,接收页面进行参数接收即可。

实现

webview页面

新建一个路由页面,处理接收到的web url,并使用web-view渲染。

javascript 复制代码
<template>
  <view class="container">
    <web-view :src="externalUrl"></web-view>
  </view>
</template>
   
  <script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const externalUrl = ref("");
onLoad((options) => {
  externalUrl.value = options.url;
});
</script>
   
 <style scoped>
.container {
  width: 100vw;
  height: 100vh;
}
</style>

跳转

在需要触发的页面,路由时带上web url。

javascript 复制代码
/**
* 格式化路由携带的参数
**/
const createQuery = (obj, parentKey = '', keyValueSeparator = '=', pairSeparator = '&') => {
   let queryString = [];
   const that = this;
   Object.keys(obj).forEach(key => {
     const fullKey = parentKey ? `${parentKey}[${key}]` : key;
     if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
       queryString.push(this.createQuery(obj[key], fullKey));
     } else {
       queryString.push(`${fullKey}${keyValueSeparator}${obj[key]}`);
     }
   });
   return queryString.join(pairSeparator);
 }
  
  
/**
* 点击跳转web页面
**/
const onClick = () => {
	const params = {
		url: 'https://mp.weixin.qq.com/s/Dq4xx5FUFRB-oJKrwzjewg'
	}
	const url = '/pages/webview/index'
	const query = this.createQuery(params);
    uni.navigateTo({
      url: `${url}?${query}`,
    });
}
相关推荐
吴传逞1 天前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
服务端技术栈1 天前
历时 1 个多月,我的第一个微信小程序「图片转 Excel」终于上线了!
前端·后端·微信小程序
2501_915921431 天前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_916008891 天前
uni-app iOS 文件管理与 itools 配合实战,多工具协作的完整流程
android·ios·小程序·https·uni-app·iphone·webview
!win !1 天前
uni-app项目Tabbar实现切换icon动效
小程序·uni-app
xw51 天前
uni-app项目Tabbar实现切换icon动效
前端·uni-app
宋辰月1 天前
微信小程序-day4
微信小程序·小程序
2501_916007471 天前
uni-app iOS 文件调试常见问题与解决方案:结合 itools、克魔、iMazing 的实战经验
android·ios·小程序·https·uni-app·iphone·webview
豆豆(设计前端)1 天前
使用 Uni-app 打包 外链地址APK 及 iOS 注意事项
ios·uni-app
jingling5551 天前
uniapp | 解决组件样式不生效问题
前端·css·uni-app·html·学习方法