Vue.js项目实战
Javascript前端框架Vue.js的html5项目实战,包括了浏览器端获取经纬度,拍照、录音,以及常用前端组件封装,后续提供和微信等平台对接方案,并全部提供github源码,地址:https://github.com/woollay/JustInSoft
在编攻城狮
在编攻城狮
展开
-
Vue.js实战——开源H5跨移动平台的多媒体API_20
1. 主要功能:获取经纬度、拍照、录音、获取指南针等多媒体功能;2. 支持的平台包括:Mobile Chrome 浏览器、Android App、IOS App(未实现)、微信公众号、微博公众号等平台;原创 2020-01-14 18:03:26 · 566 阅读 · 0 评论 -
Vue.js实战——Vue+ElementUI bug定位及按需引用压缩优化_19
一、问题使用ElementUI后,相关图标出不来;在项目中部分页面的css中使用了backgroud-image:url(xxx/xxx.jpg),在生产环境中不显示;ElementUI体积过大,导致Webpack打包后的js有1M多;二、目标找出原因,解决该bug;找到替代方案,方便兼容几种类型的图片加载;ElementUI改成按需加载;三、方案在DEV模式下,访问项...原创 2019-11-15 08:50:20 · 480 阅读 · 0 评论 -
Vue.js实战——封装Android H5 App的录音组件_15
一、目标 1、把使用原生H5的audio录音功能组件移植到Android平台中; 2、尽量少改动代码。二、思路 录音之所以放在移植的最后一个章节讲,主要是因为需要修改原生H5 录音的JS,并在JS中调用Android,Android处理完成后,还要调用js,过程比较复杂。三、步骤 1、在Android中先实现录音功能,VoiceMgr.java代码如下...原创 2019-04-25 23:58:32 · 2034 阅读 · 0 评论 -
Vue.js实战——封装长按能量条&火箭发射动画组件_17
一、目标 按照项目需求,需要完成如下几部分的功能: 1、长按屏幕时,显示能量条动画(类似环形进度条); 2、当能量条充满时,发射小火箭;二、实现效果三、步骤 按照需求分析,上述目标可以拆解成3个功能: 1)用Vue实现屏幕长按事件; 2)实现能量条动画; 3)实现火箭发射动画; 1、先说下捕捉屏幕长按事件,...原创 2019-04-18 18:09:35 · 1211 阅读 · 0 评论 -
Vue.js实战——H5拍照迁移至Android App_14
一、目标 1、解决从纯H5开发且带拍照功能的App迁移至Android平台时,保证拍照和裁剪功能正常; 2、解析实现过程中碰到的各种问题;二、实现效果 为了达成上述目标,先大体介绍下思路: 1)Android平台下支持h5的input拍照标签,但是需要在Android侧对拍照过程做一些特殊处理才能正常获取到此拍照图片; 2)Android平...原创 2019-04-14 22:05:57 · 646 阅读 · 0 评论 -
Vue.js实战——单独封装echarts时间轴高级篇_16
一、目标 1、需求:项目中会用到纵向时间轴,且有大量数据,支持自动播放和翻页; 2、基于该目标去分析,发现时间轴组件确实不少,但综合考虑稳定性、可扩展性、文档API以及是否开源(涉及版权问题),最后选定综合评价较高的echarts 时间轴组件。二、实现效果三、步骤 1、在刚开始使用echarts时间轴做demo时,错误的选择了2.x稳定版本的时间轴组件,结...原创 2019-04-08 20:03:31 · 3058 阅读 · 1 评论 -
Vue.js实战——开发Android H5 App之Webview高级配置_13
一、目的 1、在H5 Android App开发过程中,尤其是移植来自IOS/微信/纯Web浏览器等平台的H5时,需要解决一些平台特有的特性,比如弹窗、获取经纬度、拍照、录音等API,就不尽相同,现在就想通过纯Web原生实现的方式,通过改变中间的JS或者Android代码,从而保证原生Web页面不用做任何更改; 2、此文采用循序渐进的方式,先讲解下如何实现弹窗和经纬度(下述所有...原创 2019-03-31 10:36:59 · 1949 阅读 · 4 评论 -
Vue.js实战——开发Android Hybird App之Webview基础配置_12
一、目的 1、为了让基于前端框架vue.js的html5代码跨平台运行(此处仅分析Android),就需要搞清楚平台加载html5的机制; 2、Android平台各系统版本对应的SDK各不相同,需要在代码层面做好版本兼容适配。二、步骤 1、先分析下Android平台加载html5的机制。Android平台内置浏览器内核WebKit/Blink,Android在此内...原创 2019-03-24 01:03:40 · 431 阅读 · 0 评论 -
Vue.js实战——开发Android Hybird App之权限设置_11
一、目标 在Html5代码已经移植至Android工程后,完成Android App开发的基本框架之权限设置部分的代码设计与开发;二、步骤 1、在AndroidManifest.xml中定义需要使用到的权限,如本项目中使用的权限如下: <uses-permission android:name="android.permission.INTERNET" /...原创 2019-03-13 22:46:15 · 821 阅读 · 0 评论 -
Vue.js实战——移植Html5 App为Android App_10
一、目标 1、把前面开发的Html5原生获取经纬度、拍照、录音的demo移植至Android平台中,达到Html5可以横跨Web/Android/IOS平台的目标; 2、在Android系统中,把不支持原生Html5的特性,或者使用原生Android效果更佳的特性,使用原生Android代码来替代html5代码,做到更好的适配效果;二、步骤 1、把之前开发的geo...原创 2019-03-12 21:50:12 · 3137 阅读 · 0 评论 -
Vue.js实战——微信拍照时页面会被刷新的BUG定位_9
一、目标 1、这几个月辛辛苦苦做出来,基于Vue.js和html5的项目里面,一直存在一个明显的BUG:在微信公众号拍照后,会出现概率重定向到当前页面(当前页面被刷新,或者叫做重新加载)。这两天的目标就是定位并解决这个bug,提高用户体验。 2、基于之前的承诺,把精简后确实可用的微信公众号的源码放至GIT库(weixin_8),方便大家理解(涉及版权的LOGO和内部URL被屏蔽...原创 2019-02-26 22:26:20 · 4668 阅读 · 0 评论 -
Vue.js实战——ToggleSwitch组件介绍_8
一、背景 1、项目中有个业务诉求:把多个可选项的开关控制放在一个页面中管理,方便用户自由组合选择。Android和IOS中有ToggleSwitch组件,而我们的项目是基于Html5的; 2、查询开源组件的过程中,发现有vonic和vuejs-toggle-switch2个组件基本满足要求,但是前者太大(组件库),后者只支持单个,且二者无法自由定义组件大小、颜色,所以想着自己开...原创 2019-02-27 13:10:11 · 1295 阅读 · 0 评论 -
Vue.js实战——开源ToggleSwitch组件_7
一、目标 1、把以前vue.js项目中用到的功能抽象成独立的vue组件; 2、在github上开源出来,并搞清楚npm发布组件的流程,发布第一款js组件; 注意:如果你还不清楚vue和npm,需要先看下Vue.js实战——框架搭建_2。二、步骤 1、搞清楚github.com开源和npmjs开源的差异。经过一番探索,发现二者的异同点如下: ...原创 2019-02-19 22:32:39 · 489 阅读 · 0 评论 -
Vue.js实战——封装浏览器录音组件_6
一、目标 1、使用vue.js作为前端javascript框架,结合html5+ES6语法,在移动端Chrome浏览器中,完成兼容Android和iOS的录音功能; 2、基于一般项目的诉求,封装成可复用的录音组件;二、步骤 1、基于上篇博文(Vue.js实战——封装浏览器拍照组件_5)搭建的项目框架(geo_location6),复制粘贴生成geo_locatio...原创 2019-02-15 13:14:07 · 3800 阅读 · 12 评论 -
Vue.js实战——封装浏览器拍照组件_5
一、目标使用vue.js作为前端javascript框架,结合html5+ES6语法,在移动端Chrome浏览器中,完成兼容Android和iOS的拍照功能; 预览拍照图片; 基于一般项目的诉求,封装成可复用的拍照组件;二、步骤1、基于上篇博文(Vue.js实战——获取浏览器经纬度的各种坑_4)搭建的项目框架(geo_location4),复制粘贴生成geo_location5项目;...原创 2019-01-24 17:42:38 · 1588 阅读 · 0 评论 -
Vue.js实战——获取浏览器经纬度的各种坑_4
1、目标使用Vue.js框架,实现从浏览器获取经纬度坐标,并在页面显示。注意:个人的地理位置信息为个人的隐私数据,请勿随意传播或者扩散,避免不必要的麻烦。2、步骤1)根据上期搭建好的框架(见Vue.js实战——精简webpack配置_3),复制粘贴为新工程geolocation_3;2)按照上期规划好的工程结构,需要新增4个文件geolocation.html/geolocati...原创 2019-01-18 17:41:04 · 5555 阅读 · 1 评论 -
Vue.js实战——精简webpack配置_3
1、现状 继上次完成Vue.js实战——框架搭建_2,发现自动生成的框架配置(包括编译、打包、调试相关的)文件过多(见下图所示),既分散也不好理解,所以当时也没有去解读各个配置的含义。今天就来精简Vue.js项目使用的webpack配置,使之简单易懂,降低出错的成本。2、目标 把webpack配置文件精简成一个单独的文件,去掉冗余且不太使用的配置,让大伙能够享受...原创 2019-01-07 22:28:10 · 556 阅读 · 1 评论 -
Vue.js实战——框架搭建_2
1、参考网友的经验安装Node.js:https://blog.csdn.net/zhaibingbinglove/article/details/79311673安装好:node(如果部分组件下载timeout时,才需要考虑使用cnpm,建议一开始跳过这步)。本人因几个月前已经做完这些操作,无法一一验证。各位也可以自行通过其他经验进行安装验证。安装完成后的结果如下:2、安装vue-cli...原创 2019-01-01 16:59:33 · 1017 阅读 · 0 评论 -
Vue.js实战——序言_1
时间一晃,搞前端搞了好几个月了,终于迎来了崭新的2019年。新年伊始,公司项目终于有了个雏形。本着反哺精神,本人在此立下Flag:把这段时间的前端经验汇总成一系列实战的小文章,供感兴趣的程序猿朋友参考,也算是给自己一个交代。欢迎批评指正。 思路如下:1、使用Vue.js框架和ES5语法(为主)全面单点实现浏览器原生的地理位置(经纬度)坐标、录音、拍照、DBIndexed等常用...原创 2019-01-01 15:33:21 · 253 阅读 · 0 评论 -
Vue.js 实战——彻底解决跨域问题_18
一. 背景在 Web 应用中,跨域是程序猿绕不过去的坎。什么是跨域:当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域。举例:在自己的应用 html 中,需要访问微信或者新浪接口,这时浏览器就会提示跨域了。如下代码所示:在业务代码中访问网络地址来查询天气信息。let url = 'http://t.weather.sojson.com/api/we...原创 2019-09-15 13:44:50 · 4543 阅读 · 0 评论