最近公司Android项目这边没太多事情,新版本也暂时没需要做开发。然后公司目前要做一个政府通的项目,给政府或者给内部人员使用。之前考虑的是Windows端,采用winform的形式做开发。一直有招人,也没招到合适的。我之前有接触过这块,当时跟领导说可以辅助。再到后来搬了一个新的办公地点,然后又考虑了下Teambition采用的方案,貌似就是Documentation | Electron这个东东。然后前端人员就看了看,说可以搞,说干就干。
1. 目前大概理解就是Documentation | Electron给html页面包了一层Windows的外壳,这个外壳作为主进程运行着,内部维护了一个渲染(render)进程用来渲染页面,然后主进程可以和渲染进程之间可以进行通讯。主进程可以进行一些托盘,电池、任务栏、省电、放大、缩小等一些事件的处理。如果有需要通知到渲染进程,比如某个页面需要收到系统通知消息,然后弹出提示,就可以托盘收到消息,然后通知给渲染进程,进而实现渲染进程的系统级通知。
- Electron又配合起步 · electron-vue来做开发,vue作为比较强大的JavaScript MVVM库,给前端开发带来了简单快速的开发方式。另外还可以配合脚手架快速搭建工程环境,快速进行开发、打包。
至于与其他的对比,网上很多说法,主要看公司如何选型。
https://blog.csdn.net/weixin_41879988/article/details/81638474
React、Angular和Vue三种最流行的前端框架哪一个最好?
3. 界面配合The world's most popular Vue UI framework Element可以满足大部分需求
4. 网络配合 axios中文文档|axios中文网 较容易进行网络请求封装处理
5. 状态存储可以配合开始 | Vuex 进行组件状态的管理(比如:登录后我们进行用户信息的存储,然后同时提供getters来获取用户登录token等信息用于进一步用户相关数据的请求;当然也可以配合localstorage做永久存储)
以上就是上周(2019.05.01之前的那周)跟前端开发人员一起搞了下环境的搭建和安装,基本上参考上面几个官方文档就行。有些问题遇到了就网上查了下,最后基本都解决了。一般搭建环境总会遇到一些问题的。小萌新本来只是打算搞Android以及跨平台方面的,比如react-navtive、weex、flutter其中一个的。但领导安排一起搞,那就一起搞搞,说不定后面做跨平台App有所帮助了。
o_o. 这里还有几篇关于移动跨平台框架对比和感受建议的文章:
https://blog.csdn.net/sl_40/article/details/79637320
https://blog.csdn.net/makercloud/article/details/81560987
国内有哪些用angular做的比较好的移动端webapp_百度知道
html + css麻烦熟悉一下,O(∩_∩)O哈哈~
angular - 适合大型项目/PC,移动端据说性能不是很好,第二个版本好像移动优先。不过案例不太多
Vue相对轻,容易上手,需要配合Cordova来与原生交互打包
Weex,阿里的,基于Vue.js来的,相对来讲还得看发展,目前纳入Apache孵化,期待发展
React-navtive,Facebook据说准备重写,文档社区相对完善活跃,目前也是很多公司采用........需要熟悉Js的一些语法呀!
Flutter,闲鱼代表作,Google发展中,或许Fuchsia就是它了...需要学习Dart语言,上手有难度
个人感受,目前实用的话,React-navtive可能好些。未来趋势可能Flutter比较可以,毕竟有Google支持以及新系统的支持...谁知道呢? Vue目前用来开发桌面,或者一些小型应用貌似也还不错,做了直接转Weex貌似很直接。 angular目前来说移动端暂无考虑!
最后看自己如何考虑....
6. 既然协助前端搞Electron ,就顺便看看Vue如何配合Apache Cordova 进行Android的开发...至于其他细节如果用到该方式就可以抓紧干就完事了!
前面环境都搭建好了,基本上照着如下网友步骤没啥大问题
cordova+vue 项目打包成Android(apk)应用
接下来,就可以尝试进行Vue的开发了哟。html,css要熟悉的呀...不然写页面好慢呀....开发好了就可以打包成Android应用瞅瞅了....
可能路还很长,很长,这里小萌新记录下吧。小萌新也没那么多精力做那么多事情,只是遇到了就留个印象,也对跨平台开发做个了解嘛!
关于Vue小萌新也花了一天做了一个入门练习,html+css相关明天也练习哈吧,(#.#)
vueapp.js
Vue.filter('reverses', function (value) {
return value.split('').reverse().join('')
}),
// 2.0及以后要自己定义过滤器
Vue.filter('uppercase', function (value) {
if (!value) { return ''}
value = value.toString()
return value.toUpperCase()
}),
new Vue({
el: '#app',
data: {
message: '菜鸟呀菜鸟!',
todos: [
{ text: 'Jsa' },
{ text: 'Jsb' },
{ text: 'JSc' }
]
}
}),
new Vue({
el: '#app2',
data: {
todos: [
{ text: 'JS' },
{ text: 'JS2' },
{ text: 'JS3' }
],
bShow: true
}
}),
// 接收保存,之后通过test.的方式操作内部变量等属性
test = new Vue({
el: '#app3',
data: {
message3: 'Hello World!'
}
}),
new Vue({
el: '#appc',
data: {
msg: '你好鸭!',
url: 'https://cn.bing.com'
},
methods: {
say (msg) {
alert(msg)
},
say2 () {
alert(this.msg)
}
}
})
vueapp.html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
<p>{{'www.runoob.com' | reverses}}</p>
<input v-model="message">
<ul>
<li v-for="todo in todos">
{{ todo.text | uppercase }}
</li>
</ul>
</div>
<div id="app3">
<p>{{ message3 }}</p>
<input v-model="message3">
</div>
<div id="app2">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
<p v-if="2 > 1">2货</p>
<h1 v-if="bShow">yes</h1>
<h1 v-else>no</h1>
<template v-if="bShow">
<h1>我靠</h1>
</template>
<h1 v-show="!bShow" style="background:#000; color:#FFF">你看我</h1>
</div>
<div id="appc">
<a v-on:click="say('Hi')">点击say</a>
<a @click="say2">点击say2</a>
<a href="http://www.baidu.com">百度</a>
<a href="url">不用指令怎么解析呢?</a>
<a v-bind:href="url">必应</a>
<a :href="url">必应2</a>
</div>
<!-- JavaScript 外部单独js文件;代码需要放在尾部(指定的HTML元素之后) -->
<script src="vueapp.js">
</script>
<!-- 内置js方式 test接收保存 -->
<!-- <script>
// var exampleData = {
// message3: 'Hello World!'
// }
test = new Vue({
el: '#app3',
data: {
message3: 'Hello World!'
}
})
</script> -->