Android IOS 与Vue网页进行JS交互之一、使用HBuilderX编写Vue页面

admin管理员组

文章数量:1530973

Android IOS 与Vue网页进行JS交互之一、使用HBuilderX编写Vue页面

• 前言
• 为什么使用HBuilderX
• 如何使用HBuilderX开发一个Vue网页
• • 安装HBuilderX
  • 新建项目
  • 创建一个页面
  • 页面逻辑
  • 页面完整代码
• GitHub
• 完事

前言

---

Android IOS 与Vue网页进行JS交互之一、使用HBuilderX编写Vue页面
Android IOS 与Vue网页进行JS交互之二、使用Android WebView与Vue网页进行交互
Android IOS 与Vue网页进行JS交互之三、使用IOS WKWebView与Vue网页进行交互

---

这系列文章主要是为了展示如何在移动APP端调用同样的一个Vue页面并且进行JS交互。

Android

• 开发工具：Android studio4.0.1
• 开发语言：Kotlin
• 关键词：androidx、dataBinding、WebView

IOS

• 开发工具：Xcode11.7
• 开发语言：Swift
• 关键词：SwiftUI、WKWebView、WKScriptMessageHandler

网页

• 开发工具：HBuilderX2.8.9.20200829-alpha
• 开发语言：Vue
• 关键词：JS、uni-app、mounted

这篇文章主要描述为什么使用HBuilderX进行Vue网页的开发，和如何使用HBuilderX开发一个Vue网页。

为什么使用HBuilderX

HBuilderX是DCloud推出的一款Web开发IDE。同时，这家公司也开发了一个使用 Vue.js 开发所有前端应用的框架uni-app，而使用这个框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

HBuilderX专为vue打造，有着强大的语法提示，当我们需要开发一个Vue的网页时，毫无疑问趁手的高效率工具更有价值。

如何使用HBuilderX开发一个Vue网页

安装HBuilderX

打开下载链接：https://www.dcloud.io/hbuilderx.html
使用参考链接：https://uniapp.dcloud.io/quickstart

新建项目

新建一个项目，名为vue-test，使用默认模版即可。

创建一个页面

新建项目后会默认给项目建立一个初始化页面，在这个位置pages/index/index，我们直接找到这个路径，编写这个文件。

首先，编写一个简单的页面样式

<template>
	<view">
		<text>当前平台为IOS</text>
		<view">
			<text">hello</text>
		</view>
		<button>点击我触发调用原生方法</button>
		<button>点击我还原文本</button>
	</view>
</template>

再经历一丢丢的样式调整，和数据替换

<template>
	<view style="margin: auto;">
		<text>当前平台为{{platform}}</text>
		<view style="width: 100%;background-color: #555555;text-align: center;">
			<text style="color: #FFFFFF;font-size: 40rpx;">{{title}}</text>
		</view>
		<button>点击我触发调用原生方法</button>
		<button>点击我还原文本</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello world!',
				platform: uni.getSystemInfoSync().platform
			}
		},
		methods: {
			
		}
	}
</script>

页面逻辑

我们想要这个页面在一个原生APP中显示，并且实现两个交互功能；

1. 原生代码触发修改Vue网页；（原生代码改变hello world的文本内容）
2. Vue网页触发原生代码；（网页触发原生的弹窗）

那么现在我们就来给【点击我触发调用原生方法】这个按钮编写点击事件；
第一步、我们需要先声明按钮具有点击事件

<button v-on:click="clickBtn">点击我触发调用原生方法</button>

第二步、编写点击事件的工作内容

<script>
	export default {
		methods: {
			clickBtn: function() {
			    // 判断运行的平台
				switch(this.$data.platform) {
					case "android":
					    // Android平台
					    // AppJsFunction为Android端提供的函数入口，showDialog为Android端的方法
					    AppJsFunction.showDialog(this.$data.title);
					    break
				    case "ios":
					    // IOS平台
					    // AppJsFunction为IOS端提供的函数入口
					    window.webkit.messageHandlers.AppJsFunction.postMessage(this.$data.title);
					    break
				}
			}
		}
	}
</script>

这时候已经完成了网页JS触发原生代码的工作内容了，接下来是提供接口给原生代码去修改网页文本内容；
第一步、新增一个改变标题的方法

<script>
	export default {
		methods: {
			changeTitle(value) {
				this.$data.title = value;
				return "调用成功";
			}
		}
	}
</script>

第二步、需要在页面挂载时，在window中提供该方法

<script>
	export default {
		mounted() {
			window.changeTitle = this.changeTitle
		},
		methods: {
			changeTitle(value) {
				this.$data.title = value;
				return "调用成功";
			}
		}
	}
</script>

页面完整代码

<template>
	<view style="margin: auto;">
		<text>当前平台为{{platform}}</text>
		<view style="width: 100%;background-color: #555555;text-align: center;">
			<text style="color: #FFFFFF;font-size: 40rpx;">{{title}}</text>
		</view>
		<button v-on:click="clickBtn">点击我触发调用原生方法</button>
		<button v-on:click="clickBack">点击我还原文本</button>
	</view>
</template>

<script>
	export default {
		mounted() {
			window.changeTitle = this.changeTitle
		},
		data() {
			return {
				title: 'Hello world!',
				platform: uni.getSystemInfoSync().platform
			}
		},
		onLoad() {
			console.debug(uni.getSystemInfoSync().platform)
		},
		methods: {
			clickBtn: function() {
				switch(this.$data.platform) {
					case "android":
					    AppJsFunction.showDialog(this.$data.title);
					    break
				    case "ios":
					    window.webkit.messageHandlers.AppJsFunction.postMessage(this.$data.title);
					    break
				}
			},
			clickBack: function(){
				this.$data.title = "Hello world!";
			},
			changeTitle(value) {
				this.$data.title = value;
				return "调用成功";
			}
		}
	}
</script>

<style>
</style>

GitHub

AndroidIOSAndVueJS

完事

本文标签： 页面网页iosandroidvue