13518219792
H5页面简单的说就是利用html5制作出来的页面，利用图片、文字、动画、音乐等方式融合在一起来表达某种艺术效果或者推广效果。
网站的建设成都创新互联专注网站定制,经验丰富,不做模板,主营网站定制开发.小程序定制开发,H5页面制作!给你焕然一新的设计体验!已为成都柔性防护网等企业提供专业服务。
工具/原料
电脑
图形处理软件（PS/AI/美图等）
H5制作工具（以易企秀为例）
1
打开易企秀官网，注册一个账户既可使用。
2
点击加号按钮，开始制作H5页面。
3
可以选择新建一个空白页面自己添加内容，也可以选用模板来制作，（我们这里选择来用一个模板制作H5页面）选择一个符合自己要求的模板。
4
通过上方工具栏来添加或者修改页面中的文字、图片、背景等。
5
也可以自己制作素材（利用PS/AI/美图等工具）或是上传自己的照片。
6
为图片、文字添加动画效果。选择图片或文字在动画窗口选择动画效果——设置参数——预览——调整参数——到达想要的效果。
7
添加背景音乐。点击上方工具栏的音乐符号，在乐库里选择自己喜欢的音乐，或者上传自己的音乐作为背景音乐。
8
设置标题栏、封面以及播放效果。点击设置修改标题和封面，设置播放效果左侧可预览，完成设置保存。
9
发布H5页面。点击发布出现二维码，通过微信扫描二维码既可分享到微信好友及朋友圈。也可下载二维码通过别的途径发布分享。
接收可以用POST传递后，用REQUEST接收
获取内容一般要用表单FOTM来实现参数传递，接收可以用POST传递后，用REQUEST接收。HTML5是构建Web内容的一种语言描述方式。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。
直接用参数方法去获取。
希望我的回答可以帮到你，有什么不懂可以追问。
PAY页面往 js_api_call.php 传值 获取不到的问题
echo 是可以echo出来的 但是
这里不写死就会报错 $key0$
?php
/**
* JS_API支付demo
* ====================================================
* 在微信浏览器里面打开H5网页中执行JS调起支付。接口输入输出数据格式为JSON。
* 成功调起支付需要三个步骤：
* 步骤1：网页授权获取用户openid
* 步骤2：使用统一支付接口，获取prepay_id
* 步骤3：使用jsapi调起支付
*/
//获取信息
@$name="支付测试-包包";
@$price=0.01*100;
@$hyid=$_GET['hyid'];
@$out_trade_no=$_GET['num'];//订单号
include_once("../WxPayPubHelper/WxPayPubHelper.php");
//使用jsapi接口
$jsApi = new JsApi_pub();
//=========步骤1：网页授权获取用户openid============
//通过code获得openid
if (!isset($_GET['code']))
{
//触发微信返回code码
$url = $jsApi-createOauthUrlForCode(WxPayConf_pub::JS_API_CALL_URL);
Header("Location: $url");
}else
{
//获取code码，以获取openid
$code = $_GET['code'];
$jsApi-setCode($code);
$openid = $jsApi-getOpenId();
}
//=========步骤2：使用统一支付接口，获取prepay_id============
//使用统一支付接口
$unifiedOrder = new UnifiedOrder_pub();
//设置统一支付接口参数
//设置必填参数
//appid已填,商户无需重复填写
//mch_id已填,商户无需重复填写
//noncestr已填,商户无需重复填写
//spbill_create_ip已填,商户无需重复填写
//sign已填,商户无需重复填写
$unifiedOrder-setParameter("openid","$openid");//商品描述
$unifiedOrder-setParameter("body","$name");//商品描述
//自定义订单号，此处仅作举例
$timeStamp = time();
$out_trade_no = WxPayConf_pub::APPID."$timeStamp";
$unifiedOrder-setParameter("out_trade_no","$out_trade_no");//商户订单号
$unifiedOrder-setParameter("total_fee","$price");//总金额
$unifiedOrder-setParameter("notify_url","");//通知地址
$unifiedOrder-setParameter("trade_type","JSAPI");//交易类型
//非必填参数，商户可根据实际情况选填
//$unifiedOrder-setParameter("sub_mch_id","XXXX");//子商户号
//$unifiedOrder-setParameter("device_info","XXXX");//设备号
//$unifiedOrder-setParameter("attach","XXXX");//附加数据
//$unifiedOrder-setParameter("time_start","XXXX");//交易起始时间
//$unifiedOrder-setParameter("time_expire","XXXX");//交易结束时间
//$unifiedOrder-setParameter("goods_tag","XXXX");//商品标记
$unifiedOrder-setParameter("attach","2");//会员ID
$prepay_id = $unifiedOrder-getPrepayId();
//=========步骤3：使用jsapi调起支付============
$jsApi-setPrepayId($prepay_id);
$jsApiParameters = $jsApi-getParameters();
//echo $jsApiParameters;
?
html
head
meta charset="utf-8"
title支付页面/title
script type="text/javascript"
//调用微信JS api 支付
function jsApiCall()
{
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
?php echo $jsApiParameters; ?,
function(res){
WeixinJSBridge.log(res.err_msg);
if(res.err_msg == "get_brand_wcpay_requestk"){
window.location.href='/shop/successful.php?spmc=?php echo $name; ?price=?php echo $price; ?';
//history.go(-1);
}else{
window.location.href='/shop/pay.php';
}
}
);
}
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', jsApiCall);
document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
}
}else{
jsApiCall();
}
/script
/head
/html
功能已通过原生+vue混合开发的方式实现了，现需要将这个功能原封不动的搬到微信小程序。综合各方面评估，选择了微信小程序套webview的方式实现（若时间允许，建议还是通过小程序实现）。
采用小程序webview的方式，可以复用大部分H5页面，但H5调用的原生方法还是需要重新实现。实现方式主要分以下几种情况（当然也可以通过jssdk的方式去实现 ，但不在本文讨论范围内）：
(1) 获取照片，可通过html的input标签实现；
(2) 获取经纬度，可通过webview的url拼接参数实现；
(3) 人脸识别，可通过H5调起刷脸小程序的方式实现。
下面主要描述下第3种情况的实现方式。
H5与小程序交互所涉及的数据部分主要包括两块：
(1)H5如何将数据传给小程序？
url参数拼接。
(2)小程序如何将数据传给H5？
wx.setStorage及wx.getStorage。
详细流程如图所示。
webview小程序pageA调起人脸小程序pageB，pageB回退到pageA。因为pageA重新设置了webview的url，其所嵌套的H5与历史H5页面无法进行数据共享，导致业务功能无法继续。解决办法就是调起人脸小程序之前，在H5页面先将必要的信息通过 localStorage.setItem 保存，人脸识别结束回到H5页面时，再通过 localStorage. getItem 获取所需要的业务数据。
