uniapp vue3中使用webview在微信小程序中实现双向通讯

uniapp vue3中使用webview在微信小程序中实现双向通讯

直接上图,注意事项是这里
在这里插入图片描述

官网链接: https://uniapp.dcloud.net.cn/component/web-view.html

传递方法的话好像只能通过url来传,其它方式不支持,,,我这个参数没做处理,用的话记得把参数做一下处理

也就是说传递数据之后需要
uni.redirectTo({ url: '/pages/testFabric/index' }) 特定时机,当然用其他的也行,比如uni.navigateBack(),但是在我这不好使。这样vue中 @message="handlerMessage"才会触发
下面是代码

vue3 ts代码 src就是项目启动的网络地址,他必须要用网络地址, scr后面拼接参数记得做处理,转成json

<template>
  <view>
    <web-view
      src="http://xxxx:5173/src/static/fabric.html?iii=0"
      @message="handlerMessage"
      ref="webview"
    ></web-view>
    <view class="button">evalJs(改变webview背景颜色)</view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const webview = ref(null)
const handlerMessage = (e:any) => {
  console.log('快来---------')
  console.log('webview的', e)
  console.log('webview的webview', webview.value)
}
</script>
<style lang="scss" scoped>
.test {
  position: relative;
}
.button {
  position: absolute;
  top: 1200rpx;
  left: 0;
}
</style>

注意这里的script标签,需要引入

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn" id="btn">点击</button>
    测试fabric 来一个window
  </body>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script
    type="text/javascript"
    src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"
  ></script>

  <script>
    const button = document.getElementsByClassName('btn')
    const button2 = document.querySelector('.btn')
    button2.addEventListener('click', () => {
      console.log('h5 click')
      uni.postMessage({
        data: {
          action: 'autoLogin'
        }
      })
      //   uni.navigateBack()

      //   可以跳转
      uni.redirectTo({
        url: '/pages/testFabric/index'
      })

      uni.getEnv(function (res) {
        console.log('当前环境:' + JSON.stringify(res))
      })
    })
  </script>
</html>

需要说明一下的是你在html中写console.log的时候,在微信小程序不触发是正常的,不要想着用console.log去调试了,alert是可以用的

因为小程序内嵌的是一个网页,网页是支持放大缩小的,但是没有办法规定死不让他放大缩小,只能在mate标签上加点限制了

 <meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1, minimum-scale=1, user-scalable=no">
Vue3结合TypeScript(TS)开发微信小程序,并实现分享功能,你需要做以下几步: 1. **安装依赖**: 首先确保已经安装了 Vue CLI 和 TypeScript。如果你还没有,可以使用 `vue create` 创建一个新的项目,然后添加 `@vue/cli-plugin-typescript` 插件。 ```bash npm install -D @vue/cli-plugin-typescript ``` 2. **配置文件**: 更新 `vue.config.js` 添加TypeScript配置,并启用微信小程序支持。添加 `uni-app` 模板: ```js module.exports = { chainWebpack: (config) => { config.resolve.symlinks(true); // ... 其他配置 config.module .rule('uni') .test(/\.wxml|\.wxss|\.json$/) .use('vue-loader') .loader('@dcloudio/uni-template-loader'); }, transpileDependencies: ['umi', '@vue/cli-plugin-uniapp'], }; ``` 3. **创建组件**: 使用TS编写你的视图组件,比如一个分享按钮: ```typescript <template> <button v-if="!isWechat" @click="share">分享到微信</button> <uni-share :title="title" :desc="description" :link="link" /> </template> <script lang="ts"> import { Component } from 'vue'; import { ShareObject } from '@dcloudio/uni-app/dist/package/share'; @Component({ components: {}, }) export default class MyComponent extends Vue { isWechat = uni.getSystemInfoSync().platform === 'wechat'; // 判断是否微信环境 title = '我的标题'; description = '我的描述'; link = 'https://example.com'; // 分享链接 async share() { if (this.isWechat) { const shareOptions: ShareObject = { title: this.title, desc: this.description, path: location.href, // 或者自定义路径 }; await uni.share(shareOptions); } } } </script> ``` 4. **处理微信特定逻辑**: 如果在微信环境,你可能需要处理额外的逻辑,如授权、设置默认分享行为等。这通常在生命周期钩子里完成,例如 `onLoad` 或者 `onLaunch`。 5. **测试和部署**: 完成以上步骤后,通过 `npm run serve` 启动开发服务器,然后在微信开发者工具调试和测试分享功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Motion_zq

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值