精华内容
下载资源
问答
  • vue中暴露js方法给app(androidios)调用 首先声明以下例子(代码)适用于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的优缺点,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帮你生成的框架代码,其实是不用看的。

     

     

     

     

    展开全文
  • 在使用uniapp开发的时候,uniapp是跨端解决方案,我的项目是开发成web页面,供App端使用,在其中需要和原生之间交换数据,出现了几个问题 iOS WKWebView和js 交互的文档很多,但是写了以后,在js代码里面执行 ...

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

    1. iOS WKWebView和js 交互的文档很多,但是写了以后,在js代码里面执行
      window.webkit.messageHandlers.OnLineCollectionFun.postMessage({ messageId: '2444' });总是提示webkitunderfine的,,我开始的时候,在iOS端增加了webkit.frame这两个框架,运行以后,就不提示错误了,但是我再次去掉这个框架以后,也不报错了,不知道是什么原因, 我建议是可以卸载重装App,清除一些缓存,在调试的过程中,总是发现代码更新不及时,第一次reload没效果,多试几次以后就可以了。
      WKWebView和js 交互
      此外还可以用这个库,实现交互的功能
      WebViewJavascriptBridge
    2. 上面说的是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通信

    展开全文
  • 分别使用原生JSVue和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仍然有一个限制,它还不能像React的React Native,Vue.js目前还没有稳定、广泛采用的方法来开发原生应用程序。不过,这肯定会改变!目前有两个框架正在开发,可以打开用Vue.js框架创建本地应用程序...
  • 系列文章的目录在 ? 这里 (由于 我比较懒 最近一段时间...vue-router 是针对 Vue.js 开发的前端路由工具,可以很方便的开发单页应用。 单页应用 单页应用的概念其实很早就出现了,它是指在同一个页面内包含了应用的...
  • 除了 Vue.js 在 Weex Web 中的差异以外,Vue.js 自身的各种特性都是可以正常使用的。所以,这篇文章其实 Weex 并没多大关系,我就给大家简单罗列几个在 weex-hackernews 项目里用到的特性(这几个特性越来越高...
  • 我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件。我们在引用组件之时只需将组件页面引入,再注册即可使用。那么不用脚手架,如何进行组件开发呢,本文先介绍一下...
  • Weex Vue 已经互相支持,这也不是新闻了(如果你觉得是新闻,自行在网上搜相关信息……),Vue.js 也因此具备了开发原生应用的能力。 Vue 官方仓库中包含了适配 Weex 平台的代码,Weex 也引入了 Vue Runtime 并...
  • 我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件。我们在引用组件之时只需将组件页面引入,再注册即可使用。那么不用脚手架,如何进行组件开发呢,本文先介绍一下...
  • 使用jsx开发native-js程序,每个组件都是一个原始HTMLElment,可以所有原生js库很好的兼容使用。 aoife非常小,gzip 5kb 社区已经有了React / Vue / Ag为什么还需要Aoife? 特性 使用jsx开发native-js程序,每个...
  • 开始之前 ... 每个项目开始之前,都会先讲怎么搭环境,Weex Vue 都讲了。其实一个框架推出之后,“怎么配置开发环境”这类文章会比较多,每个人写的都不一样,最好的方式是去看官方文档。...《Vue.js
  • 系列文章的目录在 ? 这里 weex-hackernews 是一个使用 Weex ...不仅用到了 Weex Vue.js 的各种特性,也用到了 Vuex vue-router ,在 Web 、 Android 、 iOS 上都能正常工作,作为一个范例供大家参考。 项目地...
  • cordova可以把html css js写的代码打包成app,还可以让js调用原生的api,Ionic就是基于cordova可以很好的开发混合app,cordova还可以和vue、react、angular完美结合来开发混合app。下面我们看看Vue cordova开发混合...
  • 小编从业前端开发也有了一年多的时间,刚开始的时候,前端开发展现的技术太多,小编有心无力,兼顾不过来,经过了解之后,还是选择了学原生js基础兼并jquery的学习上路。小编使用vue.js,也是因为业务的需求,为什么...
  • Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 的核心工作是状态管理,主要包含了 State, View ...
  • 实际上uni-app开发的高效性运行性能并不及原生开发,不仅是无法支持的大部分的js插件,同时在web端缺乏渲染能力,使得做内容站seo对搜索引擎并不友好。影响不仅是搜索引擎的收录量,更使得运营困难。利用原生开发...
  • 原生js事件绑定事件委托

    千次阅读 2018-09-17 15:03:00
    最近常在移动端开发,由于不是大型站点,不需要使用vue等库,也不需要引用jqueryzepto等。 写得最多得就是各种元素选择器事件绑定,操作下来也是有点烦人。这时候怀念起jquery的美好来了,但是仅为了这个引用...
  • 在使用直接引入js开发vue的情况下发现,IE对vue并不友好(webpack开发没有使用babel等兼容组件时也没有问题,vueLoad帮我们搞定了这个事情)。 我目前发现的兼容性问题主要有两个方面: 第一:IE浏览器认为 `` ...
  • vue.js高效开发微信小程序

    千人学习 2019-03-27 13:56:13
    setData过程中页面跳闪 强制将WXSS、WXML和JS代码分离到3个不同的文件中 没有状态管理,参考VuexRedux 没有过滤器 不能使用 less、scss 等预编译器 组件化支持能力太弱(几乎没有) 为什么使用第三方框架开发微信小...
  • Vue开发过程中,一些特定的需求会需要和原生js进行交互,在原生操作dom中给input赋值,Vue的双向绑定就失效,此时我们需要使用 dispatchEvent 来触发一下。 ele.dispatchEvent(new Event(‘input’)) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 430
精华内容 172
关键字:

原生js开发和vue

vue 订阅