-
vue+原生App混合开发(vue中暴露js方法给android和ios调用)
2020-01-08 16:19:45vue中暴露js方法给app(android和ios)调用 首先声明以下例子(代码)适用于h5通过采用自定义Url拦截,JS回传数据的方式调取原生方法(即H5通过window.location=url的方式调用接口)。 话不多说直接上代码: mounted...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);//原生返回的数据 } }
-
vue和原生js的优点分析
2020-12-30 10:38:35我们的这篇文章,帮助大家分析vue相对原生js的优缺点,vue的一些好处如下: 一、控件跟数据自动绑定,可以直接使用data里面的数据值来提交表单,而不需要再使用$("#myid").val()那一套方法来获取控件的值,对控件...很多多年经验的程序,习惯了使用原生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帮你生成的框架代码,其实是不用看的。
-
vue,uiapp 开发中js和iOS原生之间的通信
2020-05-21 15:09:00在使用uniapp开发的时候,uniapp是跨端解决方案,我的项目是开发成web页面,供App端使用,在其中需要和原生之间交换数据,出现了几个问题 iOS WKWebView和js 交互的文档很多,但是写了以后,在js代码里面执行 ...在使用uniapp开发的时候,uniapp是跨端解决方案,我的项目是开发成web页面,供App端使用,在其中需要和原生之间交换数据,出现了几个问题
- iOS WKWebView和js 交互的文档很多,但是写了以后,在js代码里面执行
window.webkit.messageHandlers.OnLineCollectionFun.postMessage({ messageId: '2444' });
总是提示webkit
underfine的,,我开始的时候,在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>
- iOS WKWebView和js 交互的文档很多,但是写了以后,在js代码里面执行
-
手把手教你用原生JS/Vue/React实现水果老虎机(80后情怀之作)
2020-06-08 19:18:01分别使用原生JS,Vue和React,手把手教你开发一个H5小游戏,快速上手Vue和React框架的使用。 项目截图 在线体验 在线体验 游戏介绍 幸运水果机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有...项目体验地址
免费视频教程
分别使用原生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程序框架搭建,计算属性,生命周期…,是消化所学前端基础知识的当前互联网上少见优秀综合案例。
-
用Vue.js开发原生应用选择Weex还是NativeScript?
2018-04-13 12:52:18尽管如此,Vue.js仍然有一个限制,它还不能像React的React Native,Vue.js目前还没有稳定、广泛采用的方法来开发原生应用程序。不过,这肯定会改变!目前有两个框架正在开发,可以打开用Vue.js框架创建本地应用程序... -
[使用 Weex 和 Vue 开发原生应用] 6 使用 vue-router
2017-04-18 08:28:09系列文章的目录在 ? 这里 (由于 我比较懒 最近一段时间...vue-router 是针对 Vue.js 开发的前端路由工具,可以很方便的开发单页应用。 单页应用 单页应用的概念其实很早就出现了,它是指在同一个页面内包含了应用的... -
[使用 Weex 和 Vue 开发原生应用] 3 使用 Vue 框架的特性
2017-02-22 00:01:21除了 Vue.js 在 Weex 和 Web 中的差异以外,Vue.js 自身的各种特性都是可以正常使用的。所以,这篇文章其实和 Weex 并没多大关系,我就给大家简单罗列几个在 weex-hackernews 项目里用到的特性(这几个特性越来越高... -
vue.js原生组件化开发(一)——组件开发基础
2018-10-29 18:58:00我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件。我们在引用组件之时只需将组件页面引入,再注册即可使用。那么不用脚手架,如何进行组件开发呢,本文先介绍一下... -
[使用 Weex 和 Vue 开发原生应用] 0 项目介绍和文章目录
2017-02-14 14:02:33Weex 和 Vue 已经互相支持,这也不是新闻了(如果你觉得是新闻,自行在网上搜相关信息……),Vue.js 也因此具备了开发原生应用的能力。 Vue 官方仓库中包含了适配 Weex 平台的代码,Weex 也引入了 Vue Runtime 并... -
[笔记][转] vue.js原生组件化开发(一)—— 组件开发基础
2019-11-04 00:32:55我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件。我们在引用组件之时只需将组件页面引入,再注册即可使用。那么不用脚手架,如何进行组件开发呢,本文先介绍一下... -
aoife:使用jsx开发native-js程序,每个组建都是一个原始HTMLElment,可以和所有原生js库很好的兼容使用-...
2021-03-16 00:50:20使用jsx开发native-js程序,每个组件都是一个原始HTMLElment,可以和所有原生js库很好的兼容使用。 aoife非常小,gzip 5kb 社区已经有了React / Vue / Ag为什么还需要Aoife? 特性 使用jsx开发native-js程序,每个... -
[使用 Weex 和 Vue 开发原生应用] 1 如何配置开发环境
2017-02-15 09:30:56开始之前 ... 每个项目开始之前,都会先讲怎么搭环境,Weex 和 Vue 都讲了。其实一个框架推出之后,“怎么配置开发环境”这类文章会比较多,每个人写的都不一样,最好的方式是去看官方文档。...《Vue.js -
[使用 Weex 和 Vue 开发原生应用] 7 完整项目目录详解
2017-04-18 15:38:20系列文章的目录在 ? 这里 weex-hackernews 是一个使用 Weex ...不仅用到了 Weex 和 Vue.js 的各种特性,也用到了 Vuex 和 vue-router ,在 Web 、 Android 、 iOS 上都能正常工作,作为一个范例供大家参考。 项目地... -
cordova vue插件开发_Vue cordova混合app开发之Vue调用Cordova插件
2020-12-20 00:51:31cordova可以把html css js写的代码打包成app,还可以让js调用原生的api,Ionic就是基于cordova可以很好的开发混合app,cordova还可以和vue、react、angular完美结合来开发混合app。下面我们看看Vue cordova开发混合... -
Vue.js 父子组件通讯开发实例
2020-11-23 06:58:39小编从业前端开发也有了一年多的时间,刚开始的时候,前端开发展现的技术太多,小编有心无力,兼顾不过来,经过了解之后,还是选择了学原生js基础兼并jquery的学习上路。小编使用vue.js,也是因为业务的需求,为什么... -
[使用 Weex 和 Vue 开发原生应用] 5 使用 Vuex
2017-02-28 12:23:21Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 的核心工作是状态管理,主要包含了 State, View ... -
用vue获取的数据如何在js中使用_vue初学者-用nuxtjs做企业站开发
2020-11-24 17:33:54实际上uni-app开发的高效性和运行性能并不及原生开发,不仅是无法支持的大部分的js插件,同时在web端缺乏渲染能力,使得做内容站seo对搜索引擎并不友好。影响不仅是搜索引擎的收录量,更使得运营困难。利用原生开发... -
原生js事件绑定和事件委托
2018-09-17 15:03:00最近常在移动端开发,由于不是大型站点,不需要使用vue等库,也不需要引用jquery和zepto等。 写得最多得就是各种元素选择器和事件绑定,操作下来也是有点烦人。这时候怀念起jquery的美好来了,但是仅为了这个引用... -
VUE 和IE浏览器的兼容性(不适用webpack等打包工具,原生开发)
2018-09-30 09:16:30在使用直接引入js开发vue的情况下发现,IE对vue并不友好(webpack开发没有使用babel等兼容组件时也没有问题,vueLoad帮我们搞定了这个事情)。 我目前发现的兼容性问题主要有两个方面: 第一:IE浏览器认为 `` ... -
用vue.js高效开发微信小程序
2019-03-27 13:56:13setData过程中页面跳闪 强制将WXSS、WXML和JS代码分离到3个不同的文件中 没有状态管理,参考Vuex和Redux 没有过滤器 不能使用 less、scss 等预编译器 组件化支持能力太弱(几乎没有) 为什么使用第三方框架开发微信小... -
Vue开发与原生交互input的双向绑定问题
2018-09-26 11:00:35在Vue的开发过程中,一些特定的需求会需要和原生的js进行交互,在原生操作dom中给input赋值,Vue的双向绑定就失效,此时我们需要使用 dispatchEvent 来触发一下。 ele.dispatchEvent(new Event(‘input’)) ...