vue+原生App混合开发（vue中暴露js方法给android和ios调用）
首先声明以下例子（代码）适用于h5通过采用自定义Url拦截，JS回传数据的方式调取原生方法（即H5通过window.location=url的方式调用接口）。

话不多说直接上代码：
 mounted() {
 	//把js方法暴露给app（也可以写在created里）
    window["loginData"] = res => {
      this.loginData(res);
    };
    this.getLogin()
  },
  methods:{
  	getLogin(){ //callback的参数值由h5这边提供（你暴露给原生的方法名）
    	window.location.href = "原生提供的接口地址?参数1=xxx&callback=loginData"
  	},
  	loginData(res){
  		console,log(res);//原生返回的数据
  	}
  }

很多多年经验的程序，习惯了使用原生html和js来开发前端页面，对于很多没用过vue的程序员来说，觉得vue没有必要。

我们的这篇文章，帮助大家分析vue相对原生js的优缺点，vue的一些好处如下：

一、控件跟数据自动绑定，可以直接使用data里面的数据值来提交表单，而不需要再使用$("#myid").val()那一套方法来获取控件的值，对控件赋值也方便很多，只需要改变data的值，控件就会自动改变值。将复杂的界面操作，转化为对数据进行操作。

比如下面的一段代码就可以很简单的实现了select控件的里面的列表的动态管理：

html代码：

<el-select v-model="mType" style="flex: 1;">
　　<el-option v-for="(item,index) in enums" :label="item.label" :value="item.value" :key="index"></el-option>
</el-select>

js代码：

data(){
    return{
　　　　mType:'',
　　　　enums:[{value:0,label:'正常'},{value:1,label:'拉黑'}]
　　}
}

二、页面参数传递和页面状态管理。

页面传值对于vue来说，可供选择的方法非常多。比如使用子组件实现，通过对props属性传值；也可以使用页面url参数的方法传值；或使用vuex全局状态管理的方法页面传值等等。而原生开发的时候，在页面有多个参数的时候，页面传值和初始化，要复杂很多。而vue直接将参数保存在对象里面，直接给子组件的属性或vuex存储一个对象就行了，比如<Ctrl   :userinfo="userinfo"  ></Ctyrl> , 这样就可以将userinfo传到自定义组件。

三、模块化开发、无刷新保留场景参数更新

比如一个列表页面里面有添加功能，有修改功能，这时候我们可以通过引用子组件的形式，当子组件内容更新的时候，修改主组件的数据，比如修改了一条数据后，我们需要列表页同时刷新，但我们不希望改变原来列表页的页码和搜索条件。假如你用原生开发来实现这个，需要写很多业务逻辑保存上一个页面的搜索条件和页码这些参数，但假如你用vue开发，将变得非常简单。

 

四、代码的可阅读性

vue天生具有组件化开发的能力，因此不同的功能基本都是写在不同的模块里面，因此代码的可阅读性非常高。当一个新手接手一个旧项目的时候，基本上可以做到一天就能定位到要修改的代码，进行修改，快速接手项目。

 

五、基于强大的nodejs，添加新的组件库，基本一句npm命令就能安装，比如当我需要使用axios组件的时候，直接npm install axios安装一下，就可以使用axios这个组件。熟悉maven的同学估计很容易就能理解npm工具。

 

六、主路由、子路由、主页面、子组件的方式，可以让我们彻底抛弃iframe。写过前端的同学都知道，因为iframe的滚动条、和子页面跟其他页面的交互性这些原因、用户体验还是远远没有单页面架构友好。而且使用vue非常简单方便的实现系统菜单、导航等固定布局。

 

七、各子组件样式不冲突：各个组件之间，可以使用相同的样式名，但有不同的样式属性。比如组件A和组件B的button都绑定了class="btn", 但在两个组件里，我们可以实现两个不同的btn样式属性，互不影响。

 

vue的不足：

当然，vue也有不足，不足的地方如下：

一、vue是单页面页面，对于搜索引擎不友好，影响seo.因此不适合做公司官网。比如两个vue路由（页面），它的路径是这样的：index.html#aaa  和 index.html#bbb，但对于搜索引擎来说，都是同一个页面，就是index.html。这样搜索引擎就无法收录你的页面。

 

二、vue门槛较高，使用vue，需要先学习和摸索vue大概3天左右的时候，建议使用vue的时候，不需要看node.js自动帮你生成的js文件。你只需要编写你自己页面的代码就行了。具体nodejs帮你生成的框架代码，其实是不用看的。

 

 

 

 

在使用uniapp开发的时候，uniapp是跨端解决方案，我的项目是开发成web页面，供App端使用，在其中需要和原生之间交换数据，出现了几个问题

iOS WKWebView和js 交互的文档很多，但是写了以后，在js代码里面执行

window.webkit.messageHandlers.OnLineCollectionFun.postMessage({ messageId: '2444' });总是提示webkitunderfine的，，我开始的时候，在iOS端增加了webkit.frame这两个框架，运行以后，就不提示错误了，但是我再次去掉这个框架以后，也不报错了，不知道是什么原因，  我建议是可以卸载重装App，清除一些缓存，在调试的过程中，总是发现代码更新不及时，第一次reload没效果，多试几次以后就可以了。

WKWebView和js 交互

此外还可以用这个库，实现交互的功能

WebViewJavascriptBridge
上面说的是js,但是uniapp怎么和iOS通信呢，因为uniapp就是用Vue开发的，所以我参考了Vue的实现方法

在 App.vue文件里面

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
			try {
			    uni.setStorageSync('storage_key', 'hello');
			} catch (e) {
			    // error
			}
			// uni.setStorageSync('testMessageKey',window.webkit)
			
			window.webkit.messageHandlers.OnLineCollectionFun.postMessage({ messageId: '2444' });
		},
		methods:{
			addList:function(message) {
			    // consule.log(message);
				uni.setStorageSync('testMessageKey',message)
			},
		},
		mounted(){
			window.addList = this.addList;
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

参考Vue通信

项目体验地址

免费视频教程

分别使用原生JS，Vue和React，手把手教你开发一个H5小游戏，快速上手Vue和React框架的使用。
项目截图

在线体验
在线体验
游戏介绍
幸运水果机是一款街机游戏，游戏界面由24个方格拼接成一个正方形，每个方格中都有一个不同的水果图形，方格下都有一个小灯。玩家使用游戏币选择希望押注的目标，按下开始后，小灯开始绕着正方形中每个格子转。当小灯停下时，如果停在玩家押注的目标上则可赢取相应的游戏币。
物品：游戏中的物品有八种，分别为：苹果、西瓜、木瓜、橙子、铃铛、77、双星，这些物品又分为大小两种。还有BAR图标，分为2种。
赔率：以下为所有固定赔率物品的赔率。·所有其他小的物品（小77、小星星、小西瓜、小铃铛、小木瓜、小橙子） 1：2

苹果 1：5·橙子 1：10·木瓜 1：15·铃铛 1：20·西瓜 1：20·双星 1：30·77 1：40·小BAR 1：25·中BAR 1：50·大BAR 1：100
当玩家中奖之后，玩家点击“开始”按钮为收分，再次点击“开始”按钮为按照上一次押注再次进行游戏。如果玩家要重新押注，在押注物品上直接押注即可。在押注的同时会将中奖的金额收入“当前余额”区中。
如果玩家没有中奖，则玩家点击“开始”按钮为按照上一次押注再次进行游戏。
课程目标
我们使用原生JS，Vue和React三种开发方法，来开发一个集趣味性与技术性于一体的H5小游戏，通过这个小游戏的开发，我们在巩固常用的CSS和JS知识的同时，可以深刻地体会到Vue和React这种MVVM模式的框架的开发思想以及优于传统DOM操作的地方，并且可以快速上手Vue和React这两种当前最火热的前端框架的使用。

实践CSS的常用技术：盒子模型，定位，浮动，CSS3的Flex弹性盒模型，图片背景，CSS3选择器…
实践JS常用开发技巧：json，map，定时器，随机数，dom操作，模板字符串…
快速入门vue框架的应用
快速入门react框架的应用
对比原生js，vue框架和react框架开发的优缺点。

读者对象
学习本课程的同学，了解一点HTML/CSS/JS基础知识即可，我们会就地讲解项目中用到的css，js基础知识点，先举一些小的示例，来阐明知识点的用法，再说明如何在本项目中应用，应用在哪块功能的实现上。比如标准文档流，定位，浮动，盒子模型，CSS3弹性盒子，CSS3高级选择器，背景图片，json，map，定时器，随机数，dom操作，模板字符串，react程序框架搭建，react组件划分思想，vue程序框架搭建，计算属性，生命周期…，是消化所学前端基础知识的当前互联网上少见优秀综合案例。