如何把h5页面发布到tomcat

一，将项目导出成WAR包，而后将该包直接复制到tomcat的webapp目录下，这样就可以访问了

　　二，配置tomcat

　　修改${tomcathome}\conf\serverxml文件在Host节点下增加如下参考代码:

<Context docBase="D:\pafalearning\userapp\dist\tomcat\userappwar"path="/userapp"reloadable="true"/>

<Context docBase="D:\pafalearning\userapp\dist\tomcat\userappwar" path="/userapp" reloadable="true"/> docBase:指向项目的根目录所在的路径,

　　由于将项目打成了war包,所以直接指向这个war包就可以了(项目名为:userapp)

path:是一个虚拟目录,这里设置成了"userapp",则启动Tomcat后,你将通过http://localhost:8080/userapp/jsp来访问项目的相关页面

reloadable:如果设置为"true",则表示当你修改jsp文件后,不需要重启服务器就可以实现页面显示的同步

可以这样理解:将docBase实际目录下的项目,映射到${tomcathome}\webapps目录下的虚拟项目path(这里的配置指的是userapp项目)

       在客户端项目中，同一个app会开发成两个版本，一个是安卓版本，一个IOS版本，公司必须有两个开发团队（一个安卓团队，一个IOS团队）来进行开发，这样一来，开发成本非常之高。所以，往往在实际项目-中，会嵌套很多H5页面，一个H5页面同时兼容安卓和IOS两个系统 ，这样一来，大大减少了开发成本，前端开发页面就必须和原生进行交互。

1 页面开发      —— 前端开发人员将所有的页面按照移动webappp进行开发，做好不同屏幕的适配（宽度100%,视口为移动端视口 (快捷方式meta:vp  tap），字体适配rem单位，设置html根标签的font-size然后根据媒体查询判断设备屏幕大小进而设置html根标签的不同fontsize，去除移动端高亮显示；小图标要善于使用字体图标（常用的字体图标库有阿里巴巴矢量图），改变input标签的默认样式可以采用隐藏input,然后通过字体图标来控制前面的图标，就可以做成自己想要的图标效果）

2前端页面部署 —— 设置好入口文件（原生一进来就进入的页面，命名为indexhtml），部署到对应的服务器上，通过网址就能够访问到页面，将网址给app客户端开发人员，他们将app配置好环境后讲页面嵌套在app中。

3进行数据对接：两种对接方式（1）前端页面自己通过ajax去后台拉数据，然后自己在页面上使用再提交给后台。前提是原生需要将对应的设备号，加密方式，请求数据所需要的各种参数通过回调函数传递给H5页面，H5页面拿到这些数据后直接调后台的借口、获取到数据。（2）前端页面不用自己去后台拉取数据，而是通过回调函数，获取到原生app拉取的数据，前端页面将这些数据处理后又通过回调函数交给app，再又app发送给后台。两种调用的优劣比较：如果H5页面及数据不是很多，使用第二种方式比较合理，不用H5页面请求数据（不用封装请求，不用加密数据），不使用框架，大大减少了页面的大小，提高性能及用户体验。如果涉及到的前端页面非常多，数据交互比较复杂的话，就必须使用第一种对接方式了，app只需要将设备号，加密规则，参数传递给H5，H5根据页面需求自己向后台拉去和请求数据，直接交互，不再通过app进行转接，减小复杂程度。

因为公司的业务是H5平台的，所以这里只介绍H5方案的接入说明。PayPal提供了丰富的和支付相关的能力，但是我公司的业务仅仅需要普通的一次性消耗付款，所以其它如订阅等功能我也没去了解，就不介绍了。还有注册账号的基本操作这里也不讲了，在PayPal官网按步骤操作即可。我们从创建开发者应用讲起。

点击 https://developerpaypalcom/ 打开PayPal开发者中心，国内环境打开稍微有点满，耐心等待一下。打开后登陆注册好的账号，进入 开发者后台 ，在My apps & credentials页面中选择 sandbox 选项卡创建一个沙箱应用，创建好后可以获得clientID和Secret。记录下这两个值，我们后面要用到。

最后可以给这个应用可以设置webhook，即触发某个事件（如完成付款）后，PayPal服务器通过此地址通知你。

因为我是H5平台接入，所有有两种方案可以选择，一种是REST API，一种是Javascript SDK方案。

REST API方案：从服务端向PayPal服务器下单，下单完成后PayPal返回订单ID和支付链接，将支付链接传递给前端用户，用户跳转到PayPal的支付链接付款完成后，会通过跳转回你下单时设置的目的地址，如果你有在PayPal后台设置对应事件的webhook的话，PayPal服务器也会通知你用户已付款。然后你再去PayPal服务器确认订单，确认完成后即完成了整个流程。

Javascript SDK方案：前端页面加载PayPal JS资源，渲染支付按钮，用户点击按钮PayPal SDK自动下单并打开支付页面，用户支付完成后前端返回支付结果，如果你有在PayPal后台设置对应事件的webhook的话，PayPal服务器也会通知你用户已付款。然后你再去PayPal服务器确认订单，确认完成后即完成了整个流程。

这两种方案各有优缺点。REST API方案会跳出你的页面，支付完成再回来只能重新打开你的页面。Javascript SDK方案下单是由前端完成的，服务端都不知道前端什么时候下单的，上来就被我否定了-_-。不过最终找到了一个结合REST API和 Javascript SDK 的第三种方案，既不用跳出页面，也可以由服务端下单。PayPal示例地址: https://developerpaypalcom/demo/checkout/#/pattern/server

下面就说明第三种方案的具体接入要点。

服务端请求 下单接口 。

请求Header中需要设置 Content-Type: application/json 和 Authorization，Authorization可以使用 Bearer Access-Token or Basic client_id:secret 两种方式。使用Bearer Access-Token方式的话需要通过 授权接口 先获得Access-Token。如果使用 Basic client_id:secret 方式的话直接 Basic Base64Encode(client_id:secret) 即可。

请求参数中需要设置币种和金额，如果是单纯的使用REST API方案的话，还需要再application_context中设置一个return_url。CURL示例如下：

下单完成后，会返回PayPal的订单ID，和PayPal的支付链接（approve url）。将PayPal订单ID返回给前端JS SDK，PayPal会自动打开一个页面让用户付款，付款完SDK会通知你用户付款完成。如果再PayPal后台有配置付费事件（Checkout order approved）的webhook的话，PayPal服务器也会通过webhook通知你用户已付款。

此时订单处于APPROVED状态，需要你请求 Capture payment for order 接口去确认订单。CURL示例如下：

如果确认完成，PayPal会响应订单状态为COMPLETED，此状态表示订单已经完成了。

打开开发者后台，进入沙箱账号列表： https://developerpaypalcom/developer/accounts ，点击Create account按钮创建沙箱付款账号，创建完成后点击账号列表后的View/edit account按钮查看账号邮箱和密码。使用此账号即可在沙箱环境中完成付款。

服务端请求 查询订单详情接口 ，按文档接入即可。

在开发者后台，应用列表页面选择Live选项卡，创建正式应用，获得正式clientID和Secret，替换沙箱密钥，并将沙箱接口替换成功正式接口即可。

如果需要服务端接收事件，也需要给正式应用配置对应的webhook。

沙箱接口地址： https://api-msandboxpaypalcom

正式接口地址： https://api-mpaypalcom

这个没法换服务器，只能换区。

首先，换服务器或主机前要试用，一般的服务器提供商都有试用服务，为了避免以后再次更换，建议先试用，试用没有问题后，再确定是否更换。

当然在试用时，不能把自己的域名解析到试用服务器上，可以解析个二级域名。

其次，要进行步骤规划，这是关键，我们知道，要更换服务器，需要做这些工作，备份程序和数据，上传程序，导入数据库，重新解析域名，域名绑定，配置数据库，原来服务器中内容清理等，这些工作中，有许多步骤需要关闭网站。

虽然看起来很多，但只要规划好顺利和时间，可以使工作有序而且缩短网站关闭时间。

我的做法，先把程序和数据备份出来，然后联系服务商提供新空间的名称和密码，这样，可以先把程序上传并把数据库导入，然后配置好数据库，并把空间中需要的配置一并做好。

这期间，因为原来的服务器还能使用，域名解析也没有改变，所以网站可以正常访问，激光切割机接下来，需要关闭网站来做，解析域名到新的ip地址，域名重新绑定。

这时候网站不能访问了，但重新解析和绑定后，一般经过几分钟最多十几分钟，新服务器就可以访问了，在这等待的时间里，原来服务器的内容可以清理一下，这样整个过程下来，网站就可以只关闭很短的时间。

1、通过H5制作平台先把需要的文件给制作完成，这里用的是WPS 自带的秀堂软件进行编辑的。

2、在秀堂制作完成H5后，点击预览发布，需要把一个确定的H5生成二维码或者链接才能分享。

3、然后保存生成的二维码或者下方的链接，直接复制一下。

4、然后登陆需要借助的微信公众号，在首页点击自动回复或者自定义菜单。

5、回复形式选择图文，或者网页跳转，图文和可以把刚才的二维码上传上去作为。

6、网页跳转可以把发布成功后的链接添加到对话框点击保存就可以了，这样在自定义菜单用户点击的时候就会完成跳转访问H5了。

1、h5页面设计的原理——在代码中实现

设计人员创建了一个很好的层图，包括PSD文件、PNG剪贴图、适当的文件、MP3音频文件、视频文件等等，并将它们与他们的前端工程师同事打包在一起，由他们专门将它们放在服务器上。在代码编辑方面，元素被合并到我们通常看到的H5 web页面中。前端也是H5的最终执行者。它们对恢复设计非常重要。一个好的前端往往决定了一个作品的最终命运。前端工程师可以说是设计师最好的行业导师。我们必须虚心向他们学习网络编码技术。

整个H5页面将被推到互联网后，代码编辑和测试。有时，前端工程师的工作量远远高于设计，这取决于项目的形式和难度。

2、h5页面设计的原理——没有代码实现

没有代码并不意味着你不需要前端工程师，但现在互联网上有很多H5页面生成工具，以网站的形式，命名为第三方平台，由大量的工程师开发，以帮助没有前端资源的设计师。您可以将设计好的数据上传到第三方平台的服务器上，自己编辑发布。这个过程不涉及程序员，可以节省大量的人力成本，而且简单快捷。但缺点是平台功能单一，效果有限。它通常以幻灯片的形式出现。工程师生成的H5页面可以定制。现在市场上有很多这样的平台。

无论是第三方网站设计工具，还是诞生于H5的前端工程师，都需要h5页面设计的原理。与前端工程师的沟通应该从设计开始就开始。尽量避免所有设计都做得好，前端无法实现的尴尬局面。所以设计师和前端工程师之间的沟通是非常重要的。后续将会有更多关于ui设计中各个分类的设计技巧与资讯，可以点击本站的其他文章进行学习。

用H5工具制作的H5页面一般是不能导出源码的，如果您是需要部署到自己的服务器，可以使用我们的 epub360制作，支持导出html网页包，可以离线观看或者单独部署到自己的服务器发布。

第一步需要把页面上传到服务器，这样才可以根据域名来访问

第二步由于你的号是个人类型的订阅号，所以只能够把做好的链接放进去文章底部的阅读原文

只有认证过后的才可以在自定义菜单内直接跳转，个人号暂时不支持认证