混合开发与移动端--H5混合开发、H5页面的开发布局、开发注意事项、H5与原生(安卓)交互、webpack打包优化解决方案、H5调试工具、webview
H5混合开发
混合开发、原生开发、H5开发的区别:
简述:主流APP:原生APP、H5(webapp)、混合APP,相对应的定制研发即原生开发、H5开发、混合开发
原生APP开发优缺点:
- 可以访问手机的所有功能,可实现功能最齐全
- 运行速度快、性能高、用户体验较好
- 兼容性高
- 比较快速的使用设备端提供的接口,处理速度上有优势
- 开发周期长、成本较高,可移植性较差
- 内容有限制
- 获得新版本必须要用户重新手动下载更新
WEB APP开发:
简述:HTML5开发,利用WEB技术进行的APP开发。可以在手机浏览器上打开的网站
优缺点:
- 支持的设备范围广,一套代码可以同时在安卓、IOS、Windows上运行
- 开发成本低
- 无内容限制
- 适合展示大量的文字信息,且样式比较丰富的页面
- 用户可以直接使用最新版本(自动更新),而无需手动下载更新
- 不能直接访问手机硬件和连线缓存
- 对连网要求较高,离线不能做任何操作
- 功能有限
混合开发(原生+H5):
简述:将原生的代码利用WebView插件或者其他框架为H5提供容器,程序主要的业务实现、界面展示都是由H5完成
优缺点:
- 开发效率高、统一套代码安卓、IOS基本上都可以使用
- 更新和部署都比较方便,每次升级版本只需在服务器端升级即可,不需上传到APP Store进行审核
- 代码维护方便,版本更新快
- 比Web版实现的功能多
- 可以离线缓存
- 加载缓慢,网络要求高:混合APP数据需要全部从后台服务器获取,每个页面都需要重新加载,因此打开速度慢,用户体验不是很好
- 既懂原生又懂H5开发的工程师较少
目前或者开发的两种模式:
1、原生主导开发模式:需要安卓和IOS开发人员,整个APP既有原生开发又有H5开发,在需要H5页面时由原生开发人员实现内联
2、H5主导的开发:只需H5开发工程师,借助一些封装好的工具实现应用的打包和调用原生设备的功能,比如Builder的云端打包功能
如何区分H5开发和原生开发:
页面下拉刷新时,如果没有明显的刷新现象,则是原生开发;H5会闪一下屏
下拉页面的时候显示网址就是H5开发
H5页面的开发布局
必不可少的meta
`<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">`
flex布局(推荐)
语法:
伸缩容器 display:flex
伸缩流方向 flex-direction : row | row-reverse | column | column-reverse解释:reverse反向
伸缩换行flex-wrap:适用于伸缩容器,也就是伸缩项目的父元素,主要用来定义伸缩容器里是单行还是多行显示。语法:flex-wrap:nowrap | wrap | wrap-reverse
主轴对齐justify-content:flex-start | flex-end | center | space-between | space-around解释:主轴对齐适用于伸缩容器,主要用来定义伸缩项目沿着主轴线的对齐方式。其中:flex-start:伸缩项目向一行的起始位置靠齐
space-between:伸缩项目会平均分布在行里。第一个伸缩项目在一行中的最开始位置,最后一个伸缩项目在一行中的终点位置。space-around:伸缩项目会平均分布在行里,两端保留一半的空间。
侧轴对齐align-items和align-self
伸缩项目在侧轴的对齐方式,主要由属性align-items控制
语法:align-items:flex-start | flex-end | center | baseline | stretch解释:baseline:根据伸缩项目的基线对齐,基线根据伸缩项目的内容计算得到。stretch:默认值,伸缩项目拉伸填充整个伸缩容器
伸缩项目自身在侧轴的对齐方式,主要由属性align-self控制属性值同align-items,实际上相当于特殊给自己定义对齐方式
堆栈伸缩行align-content
语法:align-content : flex-start | flex-end | center | space-between | space-around | stetch解释:stetch:默认值,各行将会伸展以占用额外的空间这个属性只有伸缩项目有多行时才生效,这种情况只有flex-wrap为wrap时,并且没有足够的空间把伸缩项目行放在同一行中。也就是这个属性将对每一行起作用而不是每个伸缩项目。
伸缩性flex
语法:flex : none | flex-grow
显示顺序order
语法:order : number
解释:改变伸缩项目出现在源文档的次序。eg:order:1 ; order : 2伸缩容器会以序号最小的组开始布局,在同一个组里的伸缩项目依据源文档里的次序布局
百分比布局
rem布局(px转rem插件)
px2rem 结合lib-flexible1、安装:npm i lib-flexible --savenpm i px2rem-loader --save-dev2、引入在main.js中引入import 'lib-flexible'3、配置vue.config.js中// css:module.exports = {chainWebpack: config => {config.module.rule('css').test(/\.css$/).oneOf('vue').resourceQuery(/\?vue/).use('px2rem').loader('px2rem-loader').options({remUnit: 75})}// less:.rule('less').test(/\.less$/).oneOf('vue').resourceQuery(/\?vue/).use('px2rem').loader('px2rem-loader').before('postcss-loader').options({remUnit: 75}).end()4、使用:750px的设计图量多少px就直接写多少px即可5、补充:(1)按照px来编写都会转化成rem的形式,但是有些地方我们不想转换,可以用下面两种方法。a.在px后面添加/*no*/或者单位写成大写的PX,不会转化px,会原样输出。 — 一般border需用这个b.在px后面添加/*px*/,会根据dpr的不同,生成三套代码。---- 一般字体需用这个* postcss-pxtorem 结合lib-flexible(推荐) 1、安装:npm install postcss-pxtorem -D2、vue.config.js中配置
css: {loaderOptions: {postcss: {plugins: [require('postcss-pxtorem')({rootValue : 75, // 换算的基数selectorBlackList : ['weui','mu'], // 忽略转换正则匹配项propList : ['*'],}),]}}}
3、rem函数:结合lib-flexible(推荐)
// 设置 rem 函数function setRem () {// 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;//得到html的Dom元素let htmlDom = document.getElementsByTagName('html')[0];//设置根元素字体大小htmlDom.style.fontSize= htmlWidth/10 + 'px';}// 初始化setRem();// 改变窗口大小时重新设置 remwindow.onresize = function () {setRem()}
px布局
只要结合百分比布局和弹性盒布局使用。手机端视觉体验上差别不大,根据项目具体情况选择技术方案,一般border边框和字体大小可以使用px
开发注意事项、H5与原生(安卓)交互
开发注意事项
1、H5开发兼容性
transition 谨慎使用
一定要遵守url传参规范url标准形式:特殊字符:,"" {} {name:xxx} ## 空格 等等问题:IOS有可能h会出现白屏
2、与原生App"互斥"的功能
下拉刷新(推荐由H5的开发工程师实现)
overflow-y
H5与原生(安卓)交互:
android和h5交互
window.control.callHandler("事件名","参数")
1.打开带小程序标题新页面
事件名js_wx 参数是JSON.stringify({"url": path})
例子:打开百度网址的新页面window.control.callHandler("js_wx", JSON.stringify({
"url": "https://www.baidu.com/"}))
2.打开本地h5页面(主要针对需要打开word\pdf文件)
事件名js_native 参数是JSON.stringify({"name": name})例子:打开日报window.control.callHandler("js_native", JSON.stringify({
"name": "dailyReport"}))
3.token失效退出登录事件名token_invalid 参数是""window.control.callHandler("token_invalid","")
4.控制首页隐藏、显示底部栏window.control.callHandler("bottom_title","show") 显示window.control.callHandler("bottom_title","invisible") 隐藏
5.h5透明标题 结合1方法url参数带transparentTitle=1
IOS与H5交互window.webkit.messageHandlers.js_wx.postMessage(JSON.stringify({
'url': url
}))
webpack打包优化解决方案
1、根据插件查看包的大小和体检,进行针对性分析--方式一
安装:npm install webpack-bundle-analyzer --save-dev
配置:
vue.config.js
module.exports = {chainWebpack: config => {if (process.env.use_analyzer) {config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)}}
}
package.json
{ "scripts”: { ... "analyzer": "use_analyzer=true npm run serve” }
2、CDN引入--方式二
index.html cdn引入
vue.config.js
configureWebpack: config => {// devtool: 'source-map'// 优化,采用外部CDNconfig.externals = {'vue':'Vue','element-ui':'ELEMENT','echarts':'echarts'}},
3、Gzip压缩--方式三
1、安装依赖:npm install --save-dev compression-webpack-plugin
2、vue.config.js进行配置
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'// 需要gzip压缩的文件后缀
const productionGzipExtensions = ['js', 'css']configureWebpack: config => {// devtool: 'source-map'if (isProduction) {config.plugins.push(new CompressionWebpackPlugin({algorithm: 'gzip',test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),threshold: 10240,minRatio: 0.8}))}}
H5调试工具、webview
H5调试工具:
- vConsole安装:npm install vconsole
在mian.js文件里引入: import Vconsole from 'vconsole'
const vconsole = new Vconsole Vue.use(vconsole)
- eruda
参考网址:GitHub - liriliri/eruda: Console for mobile browsers
npm install eruda
在 main.js里引入:
- import erdua from 'eruda'
- import erudaDom from 'eruda-dom'
erdua.init()
Vue.prototype.$echarts = echarts
webview:
概念:其实webview就是用来展示的view组件,他是使用webkit引擎来进行展示,它具有前进后退放大缩小等功能,简单来说,webview就相当于在你的手机中安装一个高性能的webkit浏览器。
webview的初始化浏览器:网络请求耗时->服务端处理->渲染耗时->完成webview:webview初始化->网络请求耗时->服务端处理->渲染耗时->完成
混合开发与移动端--H5混合开发、H5页面的开发布局、开发注意事项、H5与原生(安卓)交互、webpack打包优化解决方案、H5调试工具、webview相关推荐
- 基于nodejs实现本地网页服务器-实现手机测试电脑开发的移动端网页
相信很多前端开发者都有开发过移动端web,那么我们如何用手机测试开发的网页? 以下介绍两种方法: 方法一:利用nodejs搭建一个服务器 编码本人已经实现,有兴趣可以看看,把需要测试的网页放到node ...
- 直播商城搭建与开发(微信端)
直播商城搭建与开发(微信端)[何经理 188-2646-6502]直播商城开发.直播分销商城软件开发.直播微商城平台开发系统等. 跨境电商第一大阵营以京东国际.天猫国际.网易考拉等巨头为代表;其次是蜜 ...
- 移动端H5混合开发设置复盘与总结
此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...
- 客户端相关知识学习(一)之混合开发,为什么要在App中使用H5页面以及应用场景、注意事项...
混合开发 随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求.原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝.美团等.下面,结合我本人的开发经验,简单谈一 ...
- androidh5混合开发_Android H5混合开发(3):原生Android项目里嵌入Cordova
前言 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平 ...
- Meetup 回顾 | 多场景下的 H5 混合开发与 Flutter 多平台应用开发
9 月 7 日,RTC 开发者社区与北京 GDG 联合主办的「前端技术专场」在北京中关村圆满结束啦.周末北京的天气再热,也比不上社区小伙伴们的学习心气更热,现场 100 多位开发者在 3 位演讲人的分 ...
- 招募技术合伙人(H5混合开发+秒开流应用)
本司因技术开发的需要,特向社会.高校招募技术合伙人,希望不甘于工薪收入,有志创业的人士踊跃报名,无需投资.无需离开原单位. 要求:擅长H5混合开发,会秒开(流应用)的优先 邮箱:Mr.liao@ali ...
- ioswebview混编_iOS 原生和H5混合开发总结
最近一段时间开发一个App,由于时间紧采用原生+H5混合开发,这里记录一下开发过程中遇到的问题. 之前在项目中使用过WebViewJavascriptBridge,使用起来很简单,但是这次项目中没有使 ...
- H5混合开发二维码扫描教程之大圣众娱十人牛牛源码搭建架设
今天用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底,于是晚上回家开始网上各处找方案. ...
最新文章
- springboot打成jar后获取classpath下的文件
- PHP 批量生成静态html
- mysql -d_mysqld
- VC++ 开发pop3收邮件程序的相关问题
- java 气泡 提示插件_Java气泡提示功能实现
- Mysql8- Public Key Retrieval is not allowed
- 两个相邻盒子的边框怎么只显示一个_一篇文章带你快速理解盒子模型「经典案例」...
- 三相同步电机怎么接线图_三相电度表怎么看倍数
- Facebook 开启元宇宙模式!豪砸百亿是为什么?
- 全排列及相关扩展算法(六)——全排列最蛋疼的算法:邻位对换法
- discuz 环境安装
- 输入框回车多个文本_输入框测试用例,你真的了解输入框测试嘛!
- 逆天的GPT-2居然还能写代码(但OpenAI却被无情吐槽)
- (转)MFC消息机制
- 航空三字代码表_航空公司三字代码表
- 计算机歌曲带歌词,mp3上怎么看歌词?我的机子说是可以显示的啊
- 新益华基层医疗系统使用方法_MongoDB for VS Code:使用Mongo的新方法
- BT宝塔面板关闭强制绑定手机注册
- 什么是域名系统或 DNS?
- # 二阶混合偏导(Second-order mixed derivatives)