1. 创建Vue项目并测试可正常运行
- 创建：可使用vue脚手架工具vue-cli创建vue项目，并安装依赖
- 测试：输入启动命令
npm run dev，测试项目是否能正常启动
2. 项目打包
使用npm run build打包命令生成dist文件夹
在vue打包成dist文件前，需修改config目录下的index.js配置文件，将打包文件的资源文件路径更改为当前目录下的绝对路径，否则将导致打包的app在真机运行时出现界面白屏的问题。
解决项目文件路径引用错误导致文件加载为404(界面白屏)的问题.png
3. 使用HBuilderX新建5+App项目
菜单栏->文件->新建->项目
新建5+App项目.png
4. 将vue项目整合到新建的5+App项目
将dist文件夹下的static文件夹和index.html文件复制到新建的5+App项目。
static文件夹和index.html文件.png
5. 在manifest.json中配置移动APP所需的配置项
- 基础配置（应用名称、版本号、页面入口、应用描述等）
- 图标配置
- 启动图配置
- SDK配置
- 模块权限配置
- App常用其他设置等
配置项.png
6. 云打包生成app
菜单栏->发行->原生app原打包->使用公用测试证书->打包，最后将apk安装包安装到手机上就可以正常使用了。
云打包.png
拓展：当然在HBuilderX中也可以采用更简单的方式来将Vue项目打包为手机APP，并且所有的网站都可以采用这种方式打包为APP。如： ① 在uniapp项目中使用 web 浏览器组件web-view（web-view作为用来承载网页的容器，会自动铺满整个页面）②在5+App项目中直接把域名放进去，APP只做页面跳转。
- uniapp项目：使用web-view组件承载网页
<template>
<view>
<web-view :src="url" @message="getMessage"></web-view>
</view>
</template>
<script>
var wv;//计划创建的webview
export default {
data() {
return {
url: 'https://www.jianshu.com/u/4da122c54fa1'
}
},
onLoad() {
},
onReady() {
},
methods: {
getMessage(event) {
uni.showModal({
content: JSON.stringify(event.detail),
showCancel: false
});
}
}
}
</script>
<style>
</style>
- 5+App项目：页面跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script type="text/javascript">
document.addEventListener('plusready', function(){
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
window.location.href = "https://www.jianshu.com/u/4da122c54fa1"
});
</script>
</head>
<body>
</body>
</html>
网友评论