uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
下载开发工具HBuilder X
HBuilderX版本
根据操作系统选择相应的版本，app开发版功能会完善一些。
下载一个uni-app Demo来做转h5的测试开源项目，中可以找一个下载到本地，然后解压。
使用安装好的HBuilderX导入下载的Demo
从本地目录导入
接下来，先识别一下项目类型，有些类型开发工具是不支持一些项目的运行的。识别的结果会在HBuilderX右下角展示。
识别项目类型
HBuilderX支持运行的项目
显示的是uni-app的话，再来接着开发。运行这个项目，可以选择浏览器或者模拟器或者真机。其中安卓手机需要开发者模式是打开的并且USB切换到传输文件的类型。
运行Demo
我选择的浏览器中运行，因为是为手机设置的，所以浏览器中页面被拉伸的很丑。
Demo网页运行效果
接下来开始转H5，在HBuilderX中，发行-》网站-h5手机版
uni-app 转 h5
如果是第一次会要求安装微信开发者工具并输入安装的路径，根据相应的操作系统，安装好微信开发者工具，输入路径就好了。
如果安装过了会直接显示下面的内容，有需要特殊配置的可以点击高级。没有特殊需求使用默认的就好。参考文章
网站域名可以填写h5存放的服务器IP
mac版本HBuilderX 高级内容
查看控制台获取编译路径，双击路径会打开一个h5文件夹，包含index.html文件和static文件夹
编译成功，控制台会输出路径
编译后的h5文件内容
将获取到的这个h5文件夹放到之前配置IP的那台服务器上就可以了，centos服务器如果使用的Nginx作为web服务，先去服务器控制台安全组增加9001端口。然后在Nginx路径下找到conf目录下的nginx.conf
加入下面这段内容。
server{
listen 9001;
server_name 域名.com www.域名;
location / {
try_files $uri $uri/ /index.html;
index index.html;
root /h5;
}
然后将上面获得的h5文件夹放到服务器根目录下面,重启Nginx服务器，然后浏览器输入ip:9001就能得到一开始的那个拉伸的很丑的内容了。
网友评论