uniapp-html页面中通过js调用vue方法

Mr_小冼

已于 2023-07-14 17:29:49 修改

阅读量802

点赞数

文章标签： javascript vue.js html

于 2023-07-14 17:17:24 首次发布

本文链接：https://blog.csdn.net/Devil_Mr/article/details/131564472

版权

在index.vue中mounted方法内，把被调用的方法暴露在window中。

mounted() {
	window["sdkLogin"] = (loginCallback) => {
		// //弹出登录框
	},
	window["sdkLogout"] = (logoutCallback) =>{
				
	},
	//...
},

在js中封装一个方法。

function login(callback,logoutCallback) {
	sdkLogin({
		onsuccess(u) {
			userInfo = u;
			// checkLogin(userInfo)
			callback.onsuccess(userInfo);
		}
	});
}

在需要调用的html文件中引入对应的js文件。

<body>
    <button onclick="login()" class="btn">
			登录
		</button>
</body>
<script type="module">
	import sdk from "@/pages/sdk.js";
    function login() {
		sdk.login({
			onsuccess(data) {
			// console.log(data);
			}
		});
	}
	window.login = login;
</script>

需要注意的是调用的方法传参的类型和参数数量必须要对应，不然会提示找不到对应的方法。

关注博主即可阅读全文