uniapp 使用 webview 触发uni.postMessage

最新推荐文章于 2024-09-03 17:33:16 发布
最新推荐文章于 2024-09-03 17:33:16 发布
阅读量258 收藏 1
点赞数 5
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xutongbao/article/details/141843810
版权

https://uniapp.dcloud.net.cn/component/web-view.html#uniappjsbridgeready-%E7%9A%84%E4%BD%BF%E7%94%A8 

uni-app应用端web-view代码：

<template>
	<cl-page>
		<!-- <view class="m-wrap">
			<cl-button @click="handleClick">测试</cl-button>
		</view> -->
		<web-view
			:src="webViewSrc"
			@load="handleLoad"
			@error="handleError"
			@onPostMessage="handlePostMessage"
			@message="handleMessage"
		></web-view>
	</cl-page>
</template>

<script setup lang="ts">
import moment from "moment";
import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useConfig } from "@/config/hook";
import { useUi } from "@/ui";

const ui = useUi();
const { router } = useConfig();
let webViewSrc = ref("");

//#region 其他事件
const handleClick = () => {};
//#endregion

//#region webView事件
const handleH5Message = (value: any) => {
	console.log("handleH5Message", value);
};
const handleMessage = (value: any) => {
	console.log("handleMessage", value);
};

const handlePostMessage = (value: any) => {
	console.log("handlePostMessge", value);
};

const handleLoad = (value: any) => {
	console.log("handleLoad", value);
};

const handleError = (value: any) => {
	console.log("handleError", value);
};

//#endregion

const init = () => {
	let { title, webViewUrl } = router.query;
	uni.setNavigationBarTitle({
		title,
	});
	if (webViewUrl && webViewUrl !== "undefined") {
		webViewSrc.value = "http://localhost:99/"; // webViewUrl;
	} else {
		ui.showToast("未设置webview链接");
	}
	window.addEventListener("message", handleH5Message);
};

onMounted(() => {
	init();
});

onBeforeUnmount(() => {
	window.removeEventListener("message", handleH5Message);
});
</script>

<style lang="scss" scoped>
.m-wrap {
	height: 100%;
}
</style>

嵌入的h5页面代码：

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>网络网页</title>
    <style type="text/css">
      .btn {
        display: block;
        margin: 20px auto;
        padding: 5px;
        background-color: #007aff;
        border: 0;
        color: #ffffff;
        height: 40px;
        width: 200px;
      }

      .btn-red {
        background-color: #dd524d;
      }

      .btn-yellow {
        background-color: #f0ad4e;
      }

      .desc {
        padding: 10px;
        color: #999999;
      }

      .post-message-section {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <p class="desc">
      web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。
    </p>
    <div class="btn-list">
      <button class="btn" type="button" data-action="navigateTo">
        navigateTo
      </button>
      <button class="btn" type="button" data-action="redirectTo">
        redirectTo
      </button>
      <button class="btn" type="button" data-action="navigateBack">
        navigateBack
      </button>
      <button class="btn" type="button" data-action="reLaunch">reLaunch</button>
      <button class="btn" type="button" data-action="switchTab">
        switchTab
      </button>
    </div>
    <div class="post-message-section">
      <p class="desc">
        网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。
      </p>
      <div class="btn-list">
        <button class="btn btn-red" type="button" id="postMessage">
          postMessage
        </button>
      </div>
    </div>
    <script type="text/javascript">
      var userAgent = navigator.userAgent
      if (userAgent.indexOf('AlipayClient') > -1) {
        // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
        document.writeln(
          '<script src="https://appx/web-view.min.js"' +
            '>' +
            '<' +
            '/' +
            'script>'
        )
      } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
        // QQ 小程序
        document.write(
          '<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
        )
      } else if (
        /miniProgram/i.test(userAgent) &&
        /micromessenger/i.test(userAgent)
      ) {
        // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
        document.write(
          '<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>'
        )
      } else if (/toutiaomicroapp/i.test(userAgent)) {
        // 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
        document.write(
          '<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>'
        )
      } else if (/swan/i.test(userAgent)) {
        // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
        document.write(
          '<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
        )
      } else if (/quickapp/i.test(userAgent)) {
        // quickapp
        document.write(
          '<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>'
        )
      }
      if (!/toutiaomicroapp/i.test(userAgent)) {
        document.querySelector('.post-message-section').style.visibility =
          'visible'
      }
    </script>
    <!-- uni 的 SDK -->
    <!-- 需要把 uni.webview.1.5.5.js 下载到自己的服务器 -->
    <!-- <script type="text/javascript" src="https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/hybrid/html/uni.webview.1.5.5.js"></script> -->
    <script
      type="text/javascript"
      src="./hybrid_html_uni.webview.1.5.5.js"
    ></script>

    <script type="text/javascript">
      // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
      document.addEventListener('UniAppJSBridgeReady', function () {
        uni.postMessage({
          data: {
            action: 'message',
          },
        })
        uni.getEnv(function (res) {
          console.log('当前环境：' + JSON.stringify(res))
        })

        document
          .querySelector('.btn-list')
          .addEventListener('click', function (evt) {
            var target = evt.target
            if (target.tagName === 'BUTTON') {
              var action = target.getAttribute('data-action')
              switch (action) {
                case 'switchTab':
                  uni.switchTab({
                    url: '/pages/home/user/my',
                  })
                  break
                case 'reLaunch':
                  uni.reLaunch({
                    url: '/pages/tabBar/component/component',
                  })
                  break
                case 'navigateBack':
                  uni.navigateBack({
                    delta: 1,
                  })
                  break
                default:
                  uni[action]({
                    url: '/pages/home/schedule/index',
                  })
                  break
              }
            }
          })
        document
          .getElementById('postMessage')
          .addEventListener('click', function () {
            uni.postMessage({
              data: {
                action: '123',
              },
            })
            //uni.navigateBack()
          })
      })
    </script>
  </body>
</html>

hybrid_html_uni.webview.1.5.5.js:

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function i(e,i){return n.call(e,i)}var t=[];function o(){return window.__dcloud_weex_postMessage||window.__dcloud_weex_}function a(){return window.__uniapp_x_postMessage||window.__uniapp_x_}var r=function(e,n){var i={options:{timestamp:+new Date},name:e,arg:n};if(a()){if("postMessage"===e){var r={data:n};return window.__uniapp_x_postMessage?window.__uniapp_x_postMessage(r):window.__uniapp_x_.postMessage(JSON.stringify(r))}var d={type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}};window.__uniapp_x_postMessage?window.__uniapp_x_postMessageToService(d):window.__uniapp_x_.postMessageToService(JSON.stringify(d))}else if(o()){if("postMessage"===e){var s={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(s):window.__dcloud_weex_.postMessage(JSON.stringify(s))}var w={type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(w):window.__dcloud_weex_.postMessageToService(JSON.stringify(w))}else{if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:i,pageId:""},"*");if(0===t.length){var u=plus.webview.currentWebview();if(!u)throw new Error("plus.webview.currentWebview() is undefined");var g=u.parent(),v="";v=g?g.id:u.id,t.push(v)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}},"__uniapp__service");else{var c=JSON.stringify(i);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(c,",").concat(JSON.stringify(t),");"))}}},d={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;r("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("redirectTo",{url:encodeURI(n)})},getEnv:function(e){a()?e({uvue:!0}):o()?e({nvue:!0}):window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r("postMessage",e.data||{})}},s=/uni-app/i.test(navigator.userAgent),w=/Html5Plus/i.test(navigator.userAgent),u=/complete|loaded|interactive/;var g=window.my&&navigator.userAgent.indexOf(["t","n","e","i","l","C","y","a","p","i","l","A"].reverse().join(""))>-1;var v=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var c=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var _=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var m=window.qa&&/quickapp/i.test(navigator.userAgent);var f=window.ks&&window.ks.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var l=window.tt&&window.tt.miniProgram&&/Lark|Feishu/i.test(navigator.userAgent);var E=window.jd&&window.jd.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var x=window.xhs&&window.xhs.miniProgram&&/xhsminiapp/i.test(navigator.userAgent);for(var S,h=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},y=[function(e){if(s||w)return window.__uniapp_x_postMessage||window.__uniapp_x_||window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&u.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),d},function(e){if(_)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(g){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(v)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(p)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(m){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(f)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.ks.miniProgram},function(e){if(l)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(E)return window.JDJSBridgeReady&&window.JDJSBridgeReady.invoke?setTimeout(e,0):document.addEventListener("JDJSBridgeReady",e),window.jd.miniProgram},function(e){if(x)return window.xhs.miniProgram},function(e){return document.addEventListener("DOMContentLoaded",e),d}],M=0;M<y.length&&!(S=y[M](h));M++);S||(S={});var P="undefined"!=typeof uni?uni:{};if(!P.navigateTo)for(var b in S)i(S,b)&&(P[b]=S[b]);return P.webView=S,P}));

参考链接

https://blog.csdn.net/qwe_aaaaa/article/details/126286725

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/hybrid/html/uni.webview.1.5.5.js

 人工智能学习网站

https://chat.xutongbao.top

徐同保
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
uni-app开发介绍
b523606163的博客
05-26 3274
在学习uni-app前，建议开发者先学习Vue.js框架，因为uni-app基于Vue.js框架开发。若您已经熟悉Vue.js，则可以开始学习uni-app了。uni-app使用HTML、CSS和JavaScript编写应用程序，您可以通过使用Vue.js的语法以及Uni-app提供的组件和API来构建应用程序。在学习uni-app时，建议同时了解应用开发的相关知识，如应用的生命周期、页面布局、事件绑定及其响应等。这些知识将帮助您更好地理解Uni-app的实现原理和应用开发流程。
uni-app优医问诊-配套资料
05-04
【uni-app优医问诊-配套资料】是2023年某马前端就业版最新线下课程的一部分，专为学习者提供了丰富的学习素材，旨在帮助学员深入理解和掌握uni-app框架在医疗领域应用的实践技巧。uni-app是一个多端开发框架，它允许...
uni-app 经验分享，从入门到离职（一）——初始 uni-app，快速上手
热门推荐
黛琳ghz的博客，期待你的关注。
07-28 4万+
这个专栏主要是分享和介绍从零到一学习和使用的 uni-app 的笔记和个人经验。通过个人的学习经验和工作经验来给大家分享关于 uni-app 开发的技巧，以及快速入门的诀窍等等。
uni-app介绍
weixin_63526054的博客
05-24 9786
Uni-app的特点是使用Vue.js作为开发语言，可以在不同的移动端平台上共享组件库和业务逻辑代码，大大提高了开发效率和代码重用率。pages.json ：文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。App.vue：是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。manifest.json ：文件是应用的配置文件，用于指定应用的名称、图标、权限等。pages：所有的页面存放目录。
uni-app扫盲，快速了解uni-app开发框架
qq18285的博客
04-29 2279
uni-app扫盲
uni-app开发总结分享
qq_39891453的博客
04-24 9772
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到14个平台：iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app官网下面是uni-app功能框架图，可以了解下它的架构。​uniapp底层集成了native技术，就是h5+引擎，能调用手机原生api，所以uniapp能开发接近原生性能的app，这是js引擎部分；它是双引擎，渲染又是独立一个独立引擎。
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uni-app
02-22
【uni-app】是一款由DCloud（即数字天堂）开发的多端开发框架，它允许开发者编写一次代码，就可以在iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序、字节跳动小程序等多个平台上运行。uni-app极大...
uni-app-template:uni-app基础模板
04-01
"uni-app-template:uni-app基础模板" 是一个基于Vue.js框架的前端开发模板，专为构建多端应用而设计。Uni-app是一个由Egret Wing团队开发的开源框架，它允许开发者使用Vue语法来编写一次代码，然后可以跨平台运行在...
uni-app-barcode:uni-app 条形码生成器
05-12
uni-app 条形码生成器 作者：诗小柒 支持H5、微信小程序、APP，其它平台的没有测试 使用canvas生成 不懂如何使用可以去直接打包下载运行 说明 此条形码组件的条形码生成部分移植改造自，精简了代码，移除无效属性，...
自定义全局变量在uniapp的Vuex应用
xingyuemengjin的博客
08-29 519
本文介绍了uniapp使用自定义全局变量的方法。当同一业务在连续页面操作时，存在部分筛选变量需要始终保持一致，比如时间筛选条件等，来回跳转页面时如果采用变量传递，常较为繁琐，存在遗漏传递或未清除上一次变量值，造成错误。本文介绍了通过store本地缓存机制，实现全局变量的方法。
uniapp本地上传照片并转化为base64格式
最新发布
weixin_58129544的博客
09-03 332
/ 获取 base64 部分。console.error('选择图片失败:', error);// 下载图片并转为 Base64。
vue,小程序,uni-app的生命周期
hexadecimal_001的博客
08-29 967
在Vue、小程序（以微信小程序为例）和Uni-app中，生命周期的概念非常关键，它们帮助开发者理解组件或页面从创建到销毁的整个过程，并在适当的时候执行特定的代码。
uniapp scroll-view滚动触底加载 height高度自适应
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-30 763
uniapp 的组件scroll-view在实现触底加载的功能的时候，首先在App上可以滚动，就必须设置高度；触底加载的动态效果，会发起网络请求的，不用设置height，通过css设置min-height:0
vue3+ts封装一个uniapp的自动滚动列表，实现看板效果
qq_51384850的博客
08-31 858
自行配置滚动时间，滚动的高度默认为一行数据的高度，当数据更新的时候，会对新旧数据进行比较，在旧数据的基础上删除解除异常了的数据，将新增异常数据加到数据的最顶部，重新开始从顶部滚动，实现数据在电视机上的实时刷新和展示
解决uni-app中navigateTo报错问题：避坑指南
cm2010_03_31的博客
08-29 467
虽然这个问题看起来挺吓人的，但通过重启项目、检查依赖和配置、更新依赖等方法，通常都能搞定。希望这篇文章能帮到你，让你在开发uni-app项目时少踩点坑。如果你有其他好方法，欢迎在评论区分享！祝大家开发顺利！
uniapp css样式盒子上面的箭头样式
m0_69254007的博客
08-29 523
的顺序是从上开始，顺时针方向设置的。如果你想要向下、向左或向右的箭头，可以适当调整。在uniapp中，要创建一个盒子上面的箭头样式，可以使用CSS的伪元素。以下是一个简单的例子，展示了如何使用CSS创建一个向上的箭头。属性，可以改变箭头的大小和颜色。这里的箭头是向上的，因为。是用来创建箭头的伪元素。
uniapp+uView级联筛选列表
记录做程序员自己遇到的每一个难点
08-29 1439
确认取消数据主题
uni.postMessage
08-12
uni.postMessage是一个用于在H5页面和原生App之间进行通信的方法。它可以在H5页面中使用，通过postMessage方法向原生App发送信息。在H5页面中，可以通过uni.postMessage({ data: { action: 'H5来了' } })来发送信息给原生App。这样原生App就可以通过监听message事件来接收来自H5页面的信息，并进行相应的处理。对于Vue页面，可以在created生命周期中添加window.addEventListener('message', this.handleMessage)来监听message事件，而在beforeDestroy生命周期中移除监听器window.removeEventListener('message', this.handleMessage)，以确保在组件销毁时不再监听message事件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [uniapp 与H5通信实操](https://blog.csdn.net/jkhedge/article/details/128715363)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [uniapp 使用 webview 触发uni.postMessage](https://blog.csdn.net/qwe_aaaaa/article/details/126286725)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

徐同保

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

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

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

打赏作者

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

抵扣说明：

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

余额充值