uniapp leven系列原生插件

Appearance

leven2025-12-15
1156
5.8m

使用方法 ​

安卓WebView操作UTS原生插件，支持获取、设置、移除cookie，重载url，支持设置userAgent等

注意

  • 当前插件暂不支持uniapp x
  • 插件只能在nvue中使用

联系作者 ​

关注微信公众号可联系作者

插件地址 ​

https://ext.dcloud.net.cn/plugin?id=20253

用法 ​

在需要使用插件的页面加载以下代码

vue
<leven-uts-webview ref="refLevenUtsWebview" style="flex:1; height: 400px;" :config="config" @onError="onError" @onPageStarted="onPageStarted"
    @onPageFinished="onPageFinished" @onLoadResource="onLoadResource" @onProgressChanged="onProgressChanged">
</leven-uts-webview>

页面内容 ​

vue
<template>
  <view>
    <uni-card title="安卓webview操作UTS原生插件">
      <leven-uts-webview ref="refLevenUtsWebview" style="flex:1; height: 400px;" :config="config" @onError="onError"
        @onPageStarted="onPageStarted" @onPageFinished="onPageFinished" @onLoadResource="onLoadResource"
        @onProgressChanged="onProgressChanged">
      </leven-uts-webview>
    </uni-card>
    <uni-card title="操作">
      <button type="primary" @click="setCookie">设置cookie</button>
      <button type="primary" @click="getCookie">获取cookie</button>
      <button type="primary" @click="removeCookie">删除cookie</button>
      <button type="primary" @click="loadUrl">加载网页</button>
      <button type="primary" @click="getWebData">获取网页属性</button>
      <button type="primary" @click="reload">刷新页面</button>
      <button type="primary" @click="stopLoading">停止加载</button>
      <button type="primary" @click="canGoForward">是否能够前进</button>
      <button type="primary" @click="canGoBack">是否能够后退</button>
      <button type="primary" @click="goBack">后退</button>
      <button type="primary" @click="goForward">前进</button>
      <button type="primary" @click="evaluateJavascript">执行JavaScript</button>
      <button type="primary" @click="clearCache">清除缓存</button>
      <button type="primary" @click="getLocalStorage">获取localStorage</button>
      <button type="primary" @click="getSessionStorage">获取sessionStorage</button>
      <button type="primary" @click="logStr = ''">清空日志</button>
    </uni-card>
    <uni-card title="url设置">
      <uni-section title="网页地址">
        <uni-easyinput v-model="config.url" :maxlength="-1" placeholder="请输入网页地址"></uni-easyinput>
      </uni-section>
    </uni-card>
    <uni-card title="cookie设置">
      <uni-section title="cookie名称">
        <uni-easyinput v-model="form.name" :maxlength="-1" placeholder="请输入cookie名称"></uni-easyinput>
      </uni-section>
      <uni-section title="cookie值">
        <uni-easyinput v-model="form.value" :maxlength="-1" placeholder="请输入cookie值"></uni-easyinput>
      </uni-section>
      <uni-section title="存活时间">
        <uni-easyinput v-model="form.maxAge" :maxlength="-1" placeholder="请输入存活时间"></uni-easyinput>
      </uni-section>
      <uni-section title="域名">
        <uni-easyinput v-model="form.domain" :maxlength="-1" placeholder="请输入域名"></uni-easyinput>
      </uni-section>
      <uni-section title="路径">
        <uni-easyinput v-model="form.path" :maxlength="-1" placeholder="请输入路径"></uni-easyinput>
      </uni-section>
    </uni-card>
    <uni-card class="uni-card-box" title="日志">
      <view><text style="font-size: 14px; flex-wrap: wrap;">{{logStr}}</text></view>
    </uni-card>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        //webview配置
        config: {
          //默认加载的url
          url: "https://www.baidu.com",
          //设置JavaScript是否可用，默认：true
          javaScriptEnabled: true,
          //媒体播放是否需要用户主动操作，默认：true
          mediaPlaybackRequiresUserGesture: true,
          //设置浏览器标识，默认：空
          userAgent: "",
          //浏览器缓存模式：default.默认处理方式，noCache:不走缓存，直接从网络获取，cacheOnly:不使用网络，仅从缓存加载，cacheElseNetwork:先取缓存（即使已过期），不存在则再网络获取
          cacheMode: "noCache"
        },
        //表单内容
        form: {
          //cookie名称
          name: "",
          //cookie的值
          value: "1",
          //存活时间
          maxAge: 86400,
          //域名
          domain: "douyin.com",
          //路径
          path: "/"
        },
        //日志
        logStr: ""
      }
    },
    onLoad() {

    },
    methods: {
      //获取sessionStorage
      getSessionStorage() {
        this.$refs.refLevenUtsWebview.getSessionStorage(res => {
          console.log("getSessionStorage:" + JSON.stringify(res))
        })
      },
      //获取localStorage
      getLocalStorage() {
        this.$refs.refLevenUtsWebview.getLocalStorage(res => {
          console.log("getLocalStorage:" + JSON.stringify(res))
        })
      },
      //清除缓存
      clearCache() {
        this.$refs.refLevenUtsWebview.clearCache(res => {
          console.log("clearCache:" + JSON.stringify(res))
        })
      },
      //执行JavaScript
      evaluateJavascript() {
        this.$refs.refLevenUtsWebview.evaluateJavascript({
          script: "javascript:alert('Hello from JavaScript!');"
        }, res => {
          console.log("evaluateJavascript:" + JSON.stringify(res))
        })
      },
      //前进
      goForward() {
        this.$refs.refLevenUtsWebview.goForward(res => {
          console.log("goForward:" + JSON.stringify(res))
        })
      },
      //后退
      goBack() {
        this.$refs.refLevenUtsWebview.goBack(res => {
          console.log("goBack:" + JSON.stringify(res))
        })
      },
      //是否能够后退
      canGoBack() {
        this.$refs.refLevenUtsWebview.canGoBack(res => {
          console.log("canGoBack:" + JSON.stringify(res))
        })
      },
      //是否能够前进
      canGoForward() {
        this.$refs.refLevenUtsWebview.canGoForward(res => {
          console.log("canGoForward:" + JSON.stringify(res))
        })
      },
      //停止加载
      stopLoading() {
        this.$refs.refLevenUtsWebview.stopLoading(res => {
          console.log("stopLoading:" + JSON.stringify(res))
        })
      },
      //刷新页面
      reload() {
        this.$refs.refLevenUtsWebview.reload(res => {
          console.log("reload:" + JSON.stringify(res))
        })
      },
      //获取当前网页属性
      getWebData() {
        this.$refs.refLevenUtsWebview.getWebData(res => {
          console.log("getWebData:" + JSON.stringify(res))
        })
      },
      //加载网页
      loadUrl() {
        this.$refs.refLevenUtsWebview.loadUrl({
          //加载的url
          url: this.config.url,
          //设置的headers
          headers: {
            token: "123"
          }
        }, res => {
          console.log("loadUrl:" + JSON.stringify(res))
        })
      },
      //删除cookie
      removeCookie() {
        if (this.$refs.refLevenUtsWebview) {
          this.$refs.refLevenUtsWebview.removeCookie({
            //名称，必须
            name: this.form.name,
            //域名，必须
            domain: this.form.domain,
            //路径，默认：/
            path: this.form.path
          }, res => {
            console.log("removeCookie:" + JSON.stringify(res))
          })
        }
      },
      //获取cookie
      getCookie() {
        if (this.$refs.refLevenUtsWebview) {
          this.$refs.refLevenUtsWebview.getCookie({
            //名称，为空则获取域名下所有的cookie
            name: this.form.name,
            //域名，为空则获取当前网页下的所有cookie
            domain: this.form.domain,
            //路径
            path: this.form.path
          }, res => {
            console.log("获取cookie：" + JSON.stringify(res))
          })
        }
      },
      //设置cookie
      setCookie() {
        if (this.$refs.refLevenUtsWebview) {
          this.$refs.refLevenUtsWebview.setCookie({
            //名称，必须
            name: this.form.name,
            //值，必须
            value: this.form.value,
            //域名，必须
            domain: this.form.domain,
            //存活时间，单位：秒，默认：86400
            maxAge: this.form.maxAge,
            //路径，默认：/
            path: this.form.path
          }, res => {
            console.log("设置cookie：" + JSON.stringify(res))
          })
        }
      },
      //网页加载进度
      onProgressChanged(e) {
        console.log("onProgressChanged：" + JSON.stringify(e.detail))
      },
      //网页资源加载
      onLoadResource(e) {
        // console.log("onLoadResource：" + JSON.stringify(e.detail))
      },
      //结束加载网页
      onPageFinished(e) {
        console.log("onPageFinished：" + JSON.stringify(e.detail))
      },
      //开始加载网页
      onPageStarted(e) {
        console.log("onPageStarted：" + JSON.stringify(e.detail))
      },
      //错误事件
      onError(e) {
        // console.log("onError：" + JSON.stringify(e.detail))
      }
    }
  }
</script>

<style>
</style>