如何将html+css+js打包成apk或者ipa文件?

html-css017

如何将html+css+js打包成apk或者ipa文件?,第1张

想要把网页装进Android或者IOS手机里本事对于H5开发的技术而言难度不小,不仅要懂安卓和苹果的操作机制,还要确保封装打包后的网页内的功能是否可以正常使用

不过现在的前端技术打包APP基本都不会使用创建一个Android项目,在布局文件中加入WebView组件这种传统且繁琐的方式,主流的操作都是选择开发者服务平台。

目前开发者服务平台基本已经非常低成本的解决了网址封装打包APP的需求,以亥著开发者服务平台为例

用户只需要提供网址、logo、开屏图、应用名,然后选择需要的插件服务,即可在两分钟内生成IPA或者APK文件。

如图所示

Gulp解决发布线上文件(CSS和JS)缓存问题

本文的缘由:目前经常线上发布文件后要不断的刷新页面及过很长时间,页面上的CSS和JS文件才能生效,特别对于目前做微信商城的时候,微信内置的浏览器缓存非常的严重,之前我们经常是在文件后面加上时间戳的方式来解决线上发布后的缓存问题,但是在微信浏览器内并不生效;因此我们需要改变文件名的方式来解决缓存的问题,因此使用后缀名加上MD5一连串的字符串来解决缓存的问题;

我们先可以考虑这么一个功能,我在页面上引用css文件如下:

./css/xx.css

./js/xx.js

我现在想通过使用MD5重新命名css文件,在页面上自动变为如下文件

./css/xx-34f3902a35.css

webpack把各个模块的css打包成一个方法:

webpack.config.js配置如下

var ExtractTextPlugin = require("extract-text-webpack-plugin")//extract-text-webpack-plugin安装此插件

module:{

loaders:[

{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}

]

},

plugins:[

new ExtractTextPlugin("css/[name].css")//则会生成一个css文件

]

比如你的js文件中这样引入即可:

import './css/lib/bootstrap.min.css'

import './css/test.css'