H5网站接入支付宝的支付接口
时间： 16:01:10
&&&& 阅读：614
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&写本文章的目的是为了记录工作中遇到的问题，方便以后遇到可以迅速解决问题
H5手机网站接入支付宝的支付接口，推荐使用支付宝提供的SDK来快速开发
我使用的是SDK开发
引用命名空间
using Aop.A
using Aop.Api.R
using Aop.Api.R
using Aop.Api.U
首页需要定义一些常量
static string serverUrl = "https://openapi.alipaydev.com/gateway.do";
static string app_id = "**";
//开发者的应用ID
static string format = "JSON";
static string charset = "utf-8";
static string sign_type = "RSA2";
//签名格式
static string version = "<span style="color: #.0";
string UID = "<span style="color: #16";//卖家支付宝账户号
//商户私钥
static string merchant_private_key = "***";
//支付宝公钥
static string alipay_public_key = "***";
这里的app_id,merchant_private_key,alipay_public_key 我就没有列出来了，获取的方法需要自己去支付宝平台完成一些操作进行获取
在用户点击网站付款时，我们需要唤醒支付宝，来进行支付
public string H5RequestPayWay(OrderPO order)
IAopClient client = new DefaultAopClient(serverUrl, app_id, merchant_private_key, format, version, sign_type, alipay_public_key, charset, false);
AlipayTradeWapPayRequest request = new AlipayTradeWapPayRequest();
string address= "http://m." + PathLogic1.RootD
request.SetReturnUrl(address+ "/WebPay/AlipayPayResult");//同步请求
request.SetNotifyUrl(address + "/WebPay/AsyncPay");//异步请求
var lstDetail = Context.Data.OrderDetail.Where(x =& x.OrderNo == order.OrderNo).ToSelectList(x=&new { x.SkuName});
StringBuilder sb = new StringBuilder();
for (int i = <span style="color: #; i & lstDetail.Count(); i++)
sb.Append(lstDetail[i].SkuName + ",");
request.BizContent = "{" +
"\"body\":\""+sb.ToString().Substring(<span style="color: #,sb.Length-<span style="color: #)+"\"," +
"\"subject\":\"袋鼠巴巴商品支付\"," +
"\"out_trade_no\":\""+order.OrderNo+"\"," +
"\"timeout_express\":\"90m\"," +
"\"total_amount\":"+(order.TotalAmount.Value+order.TotalFreight.Value)+"," +
"\"product_code\":\"QUICK_WAP_PAY\"" +
AlipayTradeWapPayResponse response = client.pageExecute(request);
return response.B
具体发送给支付宝的参数，自行去查看
执行方法后，买家输入自己的支付宝账号密码进行支付，支付成功的结果，支付宝会以post的方式异步请求你的SetNotifyUrl的地址
这个SetNotifyUrl的地址必须要外网可以访问，支付宝的请求才能进来
买家支付成功，商家修改订单状态和数据库的操作，都在异步请求中执行
public ActionResult AlipayPayResult()
ViewBag.result = "success";
return View("PayResult");
&/// &summary&&&&&&&& /// 验证通知数据的正确性&&&&&&& /// &/summary&&&&&&&& /// &param name="out_trade_no"&&/param&&&&&&&& /// &param name="total_amount"&&/param&&&&&&&& /// &param name="seller_id"&&/param&&&&&&&& /// &returns&&/returns& private SortedDictionary&string, string& GetRequestPost()
int i = <span style="color: #;
SortedDictionary&string, string& sArray = new SortedDictionary&string, string&();
NameValueC
//Load Form variables into NameValueCollection variable.
coll = Request.F
// Get names of all forms into a string array.
String[] requestItem = coll.AllK
for (i = <span style="color: #; i & requestItem.L i++)
sArray.Add(requestItem[i], Request.Form[requestItem[i]]);
/// &summary&
/// &/summary&
/// &param name="inputPara"&&/param&
/// &returns&&/returns&
public Boolean
Verify(SortedDictionary&string, string& inputPara)
Dictionary&string, string& sPara = new Dictionary&string, string&();
Boolean verifyResult = AlipaySignature.RSACheckV1(inputPara, alipay_public_key, charset,sign_type,false);
return verifyR
异步请求：
[HttpPost]
public void AsyncPay()
SortedDictionary&string, string& sPara = GetRequestPost();//将post请求过来的参数传化为SortedDictionary
if (sPara.Count & <span style="color: #)
AlipayTradeWayPayServer pay = new AlipayTradeWayPayServer();
Boolean VerifyResult = pay.Verify(sPara);//验签if (VerifyResult)
//商户订单号
string out_trade_no = Request.Form["out_trade_no"];
//支付宝交易号
string trade_no = Request.Form["trade_no"];
//支付金额
decimal total_amount = Request.Form["total_amount"].ConvertType(Decimal.Zero);
//实收金额
//decimal receipt_amount = Request.Form["receipt_amount"].ConvertType(Decimal.Zero);
//交易状态
string trade_status = Request.Form["trade_status"];
//卖家支付宝账号
string seller_id = Request.Form["seller_id"];
//商品描述
string body = Request.Form["body"];
//交易创建时间
DateTime gmt_create = DateTime.Parse(Request.Form["gmt_create"]);
//交易付款时间
DateTime gmt_payment = DateTime.Parse(Request.Form["gmt_payment"]);
string appid = Request.Form["app_id"];
WriteError("验证参数开始");
Boolean DataValidity = pay.CheckInform(out_trade_no, total_amount, seller_id, appid);//商家判断参数时候是否匹配if (DataValidity)
if (Request.Form["trade_status"] == "TRADE_FINISHED")
AlipayWayPayPO model = CreateAlipayWayPay(out_trade_no, trade_no, trade_status, gmt_create, gmt_payment);
pay.PaySuccess(out_trade_no, model, Server.MapPath("~/" + DateTime.Today.ToString("yyMMdd") + ".txt"));//修改订单
//退款日期超过可退款期限后（如三个月可退款），支付宝系统发送该交易状态通知
else if (Request.Form["trade_status"] == "TRADE_SUCCESS")
AlipayWayPayPO model = CreateAlipayWayPay(out_trade_no, trade_no, trade_status, gmt_create, gmt_payment);
pay.PaySuccess(out_trade_no, model, Server.MapPath("~/" + DateTime.Today.ToString("yyMMdd") + ".txt"));//修改订单
//付款完成后，支付宝系统发送该交易状态通知
//——请根据您的业务逻辑来编写程序（以上代码仅作参考）——
Response.Write("success");
//请不要修改或删除
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
catch (Exception ex)
else//验证失败
Response.Write("fail");
Response.Write("无通知参数");
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：http://www.cnblogs.com/yuanxinSix/p/6845873.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！微信支付开发h5调用 - 午夜钟魂 - 博客园
随笔 - 8, 文章 - 0, 评论 - 12, 引用 - 0
这两天做微信支付开发。碰到大坑。纠结死我了。好不容做完。
后台java：直接上代码：注意区分前后端的变量大小写。。。
@RequestMapping(value = "/index")
public Model
index(@RequestParam(value = "openid", required = true) String openid ,Model model,HttpServletRequest request) throws Exception{
logger.info("************openid***********为："+openid);
//获取prepayid
Map&String ,String & map=new HashMap&String,String&();
WeiXinConfig wcf=weiXinBaseService.getWeiXinConfig();
String nonceStr=UUID.randomUUID().toString().substring(0, 32);
oauthService.shareFactory(request);
String appid=wcf.getAppid();
long timestamp = System.currentTimeMillis() / 1000;
map.put("appid", appid );
map.put("mch_id", WebConfig.get("pay.mch_id"));
map.put("nonce_str",nonceStr);
map.put("body",
WebConfig.get("pay.body"));
map.put("out_trade_no", payWxUtil.orderNum());
map.put("total_fee", WebConfig.get("pay.price"));
map.put("spbill_create_ip",request.getRemoteAddr());
map.put("notify_url", WebConfig.get("hostAddress")+request.getContextPath()+"/babyShow/payInfo/info");
map.put("trade_type", "JSAPI");
map.put("openid", openid);
String paySign=SignUtil.getPayCustomSign(map,WebConfig.get("pay.key"));
map.put("sign",paySign);
String xml=
CommonUtil.ArrayToXml(map);
String prepayid=
payWxUtil.getPrepayid(xml);
logger.info("prepareid*****************************="+prepayid);
//封装h5页面调用参数
Map&String ,String & signMap=new HashMap&String ,String &();
signMap.put("appId", appid);
logger.info("appId="+appid);
signMap.put("timeStamp", timestamp+"");
logger.info("timeStamp="+timestamp);
signMap.put("package", "prepay_id="+prepayid);
logger.info("package="+"prepay_id="+prepayid);
signMap.put("signType", "MD5");
logger.info("singType="+"MD5");
signMap.put("nonceStr", nonceStr);
logger.info("nonceStr="+nonceStr);
model.addAttribute("paytimestamp", timestamp);
model.addAttribute("paypackage", "prepay_id="+prepayid);
model.addAttribute("paynonceStr", nonceStr);
model.addAttribute("paysignType", "MD5");
String paySign2=SignUtil.getPayCustomSign(signMap,WebConfig.get("pay.key"));
model.addAttribute("paySign",paySign2 );
logger.info("paySign="+paySign2);
以上代码获取openid需要根据网页授权来获取。这里就不多讲了。主要讲讲获取prepayid和生成h5页面所需参数，
这里面比较麻烦的就是签名的获取
查看方法SignUtil.getPayCustomSign(signMap,WebConfig.get("pay.key"))
* 获取支付所需签名
* @param ticket
* @param timeStamp
* @param card_id
* @param code
* @throws Exception
public static String getPayCustomSign(Map&String, String& bizObj,String key) throws Exception {
String bizString = CommonUtil.FormatBizQueryParaMap(bizObj,
logger.info(bizString);
return MD5SignUtil.sign(bizString, key);
其中CommonUtil.FormatBizQueryParaMap是用来做字典排序的。有参考了网上的例子。就没单独做。
public static String FormatBizQueryParaMap(Map&String, String& paraMap,
boolean urlencode) throws Exception {
String buff = "";
List&Map.Entry&String, String&& infoIds = new ArrayList&Map.Entry&String, String&&(
paraMap.entrySet());
Collections.sort(infoIds,
new Comparator&Map.Entry&String, String&&() {
public int compare(Map.Entry&String, String& o1,
Map.Entry&String, String& o2) {
return (o1.getKey()).toString().compareTo(
o2.getKey());
for (int i = 0; i & infoIds.size(); i++) {
Map.Entry&String, String& item = infoIds.get(i);
//System.out.println(item.getKey());
if (item.getKey() != "") {
String key = item.getKey();
String val = item.getValue();
if (urlencode) {
val = URLEncoder.encode(val, "utf-8");
buff += key + "=" + val + "&";
if (buff.isEmpty() == false) {
buff = buff.substring(0, buff.length() - 1);
} catch (Exception e) {
throw new Exception(e.getMessage());
其中MD5SignUtil.sign(bizString, key)方法如下
public static String sign(String content, String key)
throws Exception{
String signStr = "";
signStr = content + "&key=" +
return MD5Util.MD5(signStr).toUpperCase();
其中MD5Util.MD5(signStr)方法如下
public final static String MD5(String s) {
char hexDigits[]={'0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'};
byte[] btInput = s.getBytes();
MessageDigest mdInst = MessageDigest.getInstance("MD5");
mdInst.update(btInput);
byte[] md = mdInst.digest();
int j = md.
char str[] = new char[j * 2];
int k = 0;
for (int i = 0; i & i++) {
byte byte0 = md[i];
str[k++] = hexDigits[byte0 &&& 4 & 0xf];
str[k++] = hexDigits[byte0 & 0xf];
return new String(str);
} catch (Exception e) {
e.printStackTrace();
return null;
CommonUtil.ArrayToXml(map)方法如下
public static String ArrayToXml(Map&String, String& arr) {
String xml = "&xml&";
Iterator&Entry&String, String&& iter = arr.entrySet().iterator();
while (iter.hasNext()) {
Entry&String, String& entry = iter.next();
String key = entry.getKey();
String val = entry.getValue();
if (IsNumeric(val)) {
xml += "&" + key + "&" + val + "&/" + key + "&";
xml += "&" + key + "&&![CDATA[" + val + "]]&&/" + key + "&";
xml += "&/xml&";
public static boolean IsNumeric(String str) {
if (str.matches("\\d *")) {
return true;
return false;
发送请求到微信获取prepayid代码如下
public static String URL="https://api.mch.weixin.qq.com/pay/unifiedorder";
@SuppressWarnings("deprecation")
JSONObject getPrepayJson(String xml){
HttpClient httpClient = new HttpClient(new HttpClientParams(),new SimpleHttpConnectionManager(true) );
InputStream is = null;
PostMethod method=null;
String url =URL;
method = HttpClientUtils.postMethod(url);
method.setRequestBody(xml);
httpClient.executeMethod(method);
//读取响应
is = method.getResponseBodyAsStream();
JSONObject o =Xml2JsonUtil.xml2JSON(is);
} catch (Exception e) {
e.printStackTrace();
if(method!=null){
method.releaseConnection();
if(is!=null){
is.close();
} catch (IOException e1) {
e1.printStackTrace();
return null;
String getPrepayid(String xml){
JSONObject jo=getPrepayJson(xml);
JSONObject element=jo.getJSONObject("xml");
String prepayid=((JSONArray)element.get("prepay_id")).get(0).toString();
} catch (Exception e) {
e.printStackTrace();
return null;
String orderNum(){
String chars = "";
String order = System.currentTimeMillis()+"";
String res = "";
for (int i = 0; i & 19; i++) {
Random rd = new Random();
res += chars.charAt(rd.nextInt(chars.length() - 1));
xml转json方法Xml2JsonUtil.xml2JSON(is);。摘自网络
* 转换一个xml格式的字符串到json格式
* @param xml
xml格式的字符串
* @return 成功返回json 格式的字符串;失败反回null
@SuppressWarnings("unchecked")
public static
JSONObject xml2JSON(InputStream is) {
JSONObject obj = new JSONObject();
SAXReader sb = new SAXReader();
Document doc = sb.read(is);
Element root = doc.getRootElement();
obj.put(root.getName(), iterateElement(root));
} catch (Exception e) {
log.error("传入XML后转换JSON出现错误===== Xml2JsonUtil--&xml2JSON============&&",e);
return null;
* 一个迭代方法
* @param element
: org.jdom.Element
* @return java.util.Map 实例
@SuppressWarnings("unchecked")
private static Map
iterateElement(Element element) {
List jiedian = element.elements() ;
Element et = null;
Map obj = new HashMap();
List list = null;
for (int i = 0; i & jiedian.size(); i++) {
list = new LinkedList();
et = (Element) jiedian.get(i);
if (et.getTextTrim().equals("")) {
if (et.elements().size() == 0)
if (obj.containsKey(et.getName())) {
list = (List) obj.get(et.getName());
list.add(iterateElement(et));
obj.put(et.getName(), list);
if (obj.containsKey(et.getName())) {
list = (List) obj.get(et.getName());
list.add(et.getTextTrim());
obj.put(et.getName(), list);
服务端基本这么多
前端被微信和我自己挖了大坑，整整搞了两天，擦
先是看的微信文档jssdk文档（开始埋坑。。）
页面引入js
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '${appid}', // 必填，公众号的唯一标识
timestamp: '${timestamp}', // 必填，生成签名的时间戳
nonceStr: '${nonceStr}', // 必填，生成签名的随机串
signature: '${signature}',// 必填，签名，见附录1
jsApiList: [
'chooseWXPay'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
嗯。配置好了。如果传入jsconfig的参数。。。
然后看到jssdk里面有发送一个微信支付请求？
function pay(){
wx.chooseWXPay({
timestamp: ${paytimestamp}, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: '${paynonceStr}', // 支付签名随机串，不长于 32 位
package: '${paypackage}', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
signType: '${paysignType}', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: '${paySign}', // 支付签名
success: function (res) {
alert("支付成功");
// 支付成功后的回调函数
然后发布，执行调试。。尼玛。怎么样都支付不了。一会儿报订单信息错误、一会儿报签名错误。。。找了N多资料均不对
后来想啊。大不了用商户平台提供的文档写接口什么的。于是加入了代码
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId" : "${appid}",
//公众号名称，由商户传入
"timeStamp":"${paytimestamp}",
//时间戳，自1970年以来的秒数
"nonceStr" : "${paynonceStr}", //随机串
"package" : "${paypackage}",
"signType" : "${paysignType}",
//微信签名方式:
"paySign" : "${paySign}" //微信签名
function(res){
alert(res.err_msg);
// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返
function pay2(){
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
onBridgeReady();
发布调试。。。还是不对。。两个按钮pay（）和pay2（）均不对。pay方法还是一会儿订单信息错误一会儿签名错误。pay2（）方法则一直报签名错误。。。尼玛。吧经历放后台签名。。怎么改都不行。签名明明对的啊。可以获取prepayid的。为毛封装h5参数时就出错了呢。。。折腾啊。。。搞了N久。。就尼玛不对。。。后来一个小错误pay方法js报错了。。结果pay2方法确可以执行了。。。吧pay的js报错去了之后pay2又不能用了。。我擦。。哥有预感。。难道两种方式冲突了？？于是我把config和pay方法删除了再试试。。。尼玛果然可以了。不能加入config和pay。。。果然可以了。。。我擦。折腾的。。微信啃爹啊。第一种方式无法用有没有，误导人啊。。。正确结果就是商品平台的文档使用方法js如下：
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId" : "${appid}",
//公众号名称，由商户传入
"timeStamp":"${paytimestamp}",
//时间戳，自1970年以来的秒数
"nonceStr" : "${paynonceStr}", //随机串
"package" : "${paypackage}",
"signType" : "${paysignType}",
//微信签名方式:
"paySign" : "${paySign}" //微信签名
function(res){
alert(res.err_msg);
// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返
function pay(){
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
onBridgeReady();
至此。终于把微信支付搞定了。留着博客。防止后人走弯路（config里面不能加入chooseWXPay方法。。切记）H5 pc端，移动端自定义弹窗模块思路
再一次项目中要求 在提交时 要让客户核对下信息 并且要去输入密码
然而再用模块时发现没有合适的 安卓的我们可以写 可是没人写ios
最后只有走H5 JS这条路线 因为这个不论是安卓还是ios都可用 当时我就想如果我弄一个模块 以后想用时直接引入文件就行了 不用每次都去写弹窗 那么就模块化 而且这个应该很简单 用不到什么高科技 咱们就用js就能写吧编写前先想一想 自己需要什么 需要怎么做 首先做什么 然后怎么做 因为我只是个小码农 一个代码的搬运工第一步： 我需要有个参考 我要做成什么样子 我得有一个静态页面 好的 那就先写个静态的弹窗样式 以下是css 和html
html部分&!DOCTYPE html&
&meta charset="utf-8" /&
&meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /&
&meta name="format-detection" content="telephone=no"&
&title&&/title&
&div class="alert_box"&
&div class="small_win"&
&div class="alert_box_title"&
&p class="alert_title_text"&title&/p&
&div class="alert_box_content"&
&ul class="alert_box_content_ul"&
&li&信息1:1&/li&
&li&信息2:2&/li&
&div class="alert_box_input"&&input type="text" placeholder="请输入密码" class="alert_input" /&&/div&
&div class="alert_box_sure"&
&button class="alert_box_btn"&btn1&/button&
&button class="alert_box_btn"&btn2&/button&
css部分* {
padding: 0;
margin: 0;
list-style:
.alert_box {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
.alert_box .small_win {
background: #
width: 80%;
left: 50%;
padding-bottom: 15
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 10
.alert_box .small_win .alert_box_title {
background: #ff0000;
padding: 10px 0;
text-align:
font-size: 16
.alert_box .small_win .alert_box_content {
width: 90%;
margin-top: 10
.alert_box .small_win .alert_box_content ul li {
padding: 5px 0;
.alert_box_input input {
width: 100%;
font-size: 16
border-bottom: 1px solid #
padding: 10px 0;
.alert_box_sure {
text-align:
margin-top: 15
.alert_box_sure .alert_box_btn {
width: 40%;
padding: 6
margin-right: 5
}静态页面完成 pc上看着有点丑 在移动端还可以 这个可以根据自己需求调整 第二步 ：看一下都有什么是需要动态写入的然后找对象
1.顶部提示信息也就是（.alert_title_text）这里面的内容
2.需要确认的信息（.alert_box_content_ul）在这里面
3.如果不用输入内容 我们的input就可以不要了 说以input也是可选的
4.按钮的话有时候一个就够了 所以这个也是可选的
5.开始找对象（比说的多了一点 因为后面要用到 一会再解释）
var alertBox = document.getElementsByClassName('alert_box')[0];
var smallWin = document.getElementsByClassName('small_win')[0];
var titleBox = document.getElementsByClassName("alert_box_title")[0];
var title = titleBox.getElementsByClassName("alert_title_text")[0];
var cUl = document.getElementsByClassName("alert_box_content_ul")[0];
var putBox = document.getElementsByClassName("alert_box_input")[0];
var put = putBox.getElementsByClassName("alert_input")[0];
var btnBox = document.getElementsByClassName("alert_box_sure")[0];第三步：写一个方法把 需要的数据动态写进去
因为我们需要一些数据来写入（json格式）var msg = {
title: 提示, //这里是title需要显示的信息
content: [{ // 设置提示内容不传 则不显示 写个数组比较好调用
text: "提示1"
text: "提示2"
text: "提示3"
btn: ["确认", "取消"], //
设置button按钮 最多传两个 一样是数组 方便写入
现在开始写一个方法并且把数据放进去
因为我们有点事件 所以我们这里需要两个参数 一个是配置的信息 一个是回调函数
pushSmgInit(msg)
function pushSmgInit(msg,fn) {
var titleBox = document.getElementsByClassName("alert_box_title")[0];
var title = titleBox.getElementsByClassName("alert_title_text")[0];
var cUl = document.getElementsByClassName("alert_box_content_ul")[0];
var putBox = document.getElementsByClassName("alert_box_input")[0];
var put = putBox.getElementsByClassName("alert_input")[0];
var btnBox = document.getElementsByClassName("alert_box_sure")[0];
if(msg.title) { //title这里加一些判断 万一要是不传的话 让他有个默认的
title.innerHTML = msg.
title.innerHTML = "标题";
if(msg.content) { //内容这里也加一些判断
如果不传如何显示
var liStr = ""
for(var i in msg.content) {
liStr += '&li&&span class="key"&' + msg.content[i].text + '&/span&&/li&'
cUl.innerHTML = liStr
if(!msg.isInput) { //这里获取input是否显示
默认是隐藏的
putBox.style.display = "none"
put.setAttribute("type", "type") //设置一下input的type值
if(msg.inputType) { //这里判断一下有没有设置input的type值 type值只能为type和password 如果不传默认为type
if(msg.inputType != "type") {
if(msg.inputType != "password") {
putBox.style.display = "none"
put.setAttribute("type", msg.inputType)
if(msg.inputVal) {
//设置input的placeholder 不传则默认为"请输入点什么"
put.setAttribute("placeholder", msg.inputVal)
put.setAttribute("placeholder", "请输入点什么")
if(msg.btn) {
//设置按钮信息 不传则不显示按钮
var btnStr = ""
if(msg.btn.length & 1) {
btnStr += '&button class="alert_box_btn"&确认&/button&'
for(var i in msg.btn) {
if(i &= 2) {
//这里判断一下如果超过两个参数 则最多显示两个
btnStr += '&button class="alert_box_btn"&' + msg.btn[i] + '&/button&'
btnBox.innerHTML = btnStr
}到这里 已经差不多了 但是不怎么好看第四步
美化一下这个弹窗 让我们可以调用时自己修改一下样式 我们可以用js来设置元素的属性 那么我也可以把想要的样式放在
上面的假数据里面 像动态添加数据一样 用js获取并添加样式 下面是修改后的数据var msg = {
title: { //设置顶部提示信息
bg: '#ff0000', //设置顶部提示信息背景
context: "确认信息", //设置顶部提示信息内容
不传默认提示 "标题"
color: "#fff" //设置顶部提示信息的文字颜色
context: [{ // 设置提示内容不传 则不显示 写个数组比较好调用
text: "提示1"
text: "提示2"
text: "提示3"
isInput: true, // 设置是否显示input框
inputType: "type", //
设置input框的type值 只能为password或type
inputVal: "请输入点什么", //设置input的value值
btn: ["确认", "取消"], //
设置button按钮 最多传两个
btnLeft: { // 设置左边按钮样式 若按钮只有一个则取这里面的样式
bg: "#ddd", //设置设置左边按钮背景
color: "#000", //设置设置左边按钮文字颜色
fontSize: 16 //设置设置左边按钮字体大小
btnRight: { // 设置右边按钮样式 若按钮只有一个则忽略此配置
bg: "#ff0000", //设置设置右边按钮背景
color: "#fff", //设置设置右边按钮背景
fontSize: 16 //设置设置右边按钮字体大小
下面我们就要在我们上面的方法里添加一些东西 获取样式 并添加进去
function pushSmgInit(msg,fn) { //title
var titleBox = document.getElementsByClassName("alert_box_title")[0];
var title = titleBox.getElementsByClassName("alert_title_text")[0];
var cUl = document.getElementsByClassName("alert_box_content_ul")[0];
var putBox = document.getElementsByClassName("alert_box_input")[0];
var put = putBox.getElementsByClassName("alert_input")[0];
var btnBox = document.getElementsByClassName("alert_box_sure")[0];
if(msg.title) { //title这里加一些判断 万一要是不传的话 让他有个默认的
if(msg.title.context) {
title.innerHTML = msg.title.
title.innerHTML = "标题";
if(msg.title.bg) {
//设置背景
titleBox.style.background = msg.title.
if(msg.title.color) {
//设置颜色
title.style.color = msg.title.
title.innerHTML = "标题";
if(msg.content) { //内容这里也加一些判断
如果不传如何显示
var liStr = ""
for(var i in msg.content) {
liStr += '&li&&span class="key"&' + msg.content[i].text + '&/span&&/li&'
cUl.innerHTML = liStr
if(!msg.isInput) { //这里获取input是否显示
默认是隐藏的
putBox.style.display = "none"
put.setAttribute("type", "type") //设置一下input的type值
if(msg.inputType) { //这里判断一下有没有设置input的type值 type值只能为type和password 如果不传默认为type
if(msg.inputType != "type") {
if(msg.inputType != "password") {
putBox.style.display = "none"
put.setAttribute("type", msg.inputType)
if(msg.inputVal) { //设置input的placeholder 不传则默认为"请输入点什么"
put.setAttribute("placeholder", msg.inputVal)
put.setAttribute("placeholder", "请输入点什么")
if(msg.btn) { //设置按钮信息 不传则不显示按钮
var btnStr = ""
if(msg.btn.length & 1) {
btnStr += '&button class="alert_box_btn"&确认&/button&'
for(var i in msg.btn) {
if(i &= 2) { //这里判断一下如果超过两个参数 则最多显示两个
btnStr += '&button class="alert_box_btn"&' + msg.btn[i] + '&/button&'
btnBox.innerHTML = btnStr
var alertBtn = document.getElementsByClassName("alert_box_btn")
//找到所有的btn
if(msg.btn.length &= 1 && msg.btnLeft) {
//判断有几个按钮 应该获取哪个配置 不多解释
var btnL = alertBtn[0]
btnL.setAttribute("style", "background:" + msg.btnLeft.bg + ";color:" + msg.btnLeft.color + ";font-size:" + msg.btnLeft.fontSize + "px")
if(msg.btn.length &= 2 && msg.btnRight) {
var btnR = alertBtn[1];
btnR.setAttribute("style", "background:" + msg.btnRight.bg + ";color:" + msg.btnRight.color + ";font-size:" + msg.btnRight.fontSize + "px")
好了现在应该能看到效果了 当然我们还可配置更多属性比如 弹窗的圆角 内容的行高等等 因为就是个思路 就不写这么多了第五步
下面我们就该点击按钮了
for(var a = 0; a & alertBtn. a++) { //这里就是点击按钮 我们要判断点击的是哪个按钮
alertBtn[a].index = a
alertBtn[a].onclick = function() {
var data = {}
if(putBox.style.display === 'none') { //这里判断一下 是否存在输入框 如果不存在我们就把所点击按钮的下标传递出去
fn && fn({
eventType: this.index
fn && fn({ //输入框如果存在 就弹出输入框的的内容 和当前按钮的下标
eventType: this.index,
msg: put.value
这是一个弹窗 所以就需要关闭 关闭方式有很多 这里就写两个 第一关闭周围的遮罩层 第二 点击按钮
我们先说点遮罩层 这个可选项 我们可以在上面json数据里面配置一下
把下面这个放到配置文件里面就好了tapClose: true // （可选项）是否点击遮罩层关闭该对话框
默认为false
关闭的话 我们来写个方法function closeAlert(el) {
//这里传递一个参数 方便扩展
al = newNode
alertBox.style.display=“none”
}下面就是点击遮罩层关闭弹窗了
这里要注意事件冒泡 if(info.tapClose) {
//读取配置文件 判断点击遮罩层是否关闭
alertBox.onclick = function() {
closeAlert()
}smallWin.onclick = function(event) {
//阻止事件冒泡
cancelBubble(event)
}//阻止事件冒泡的方法
function cancelBubble(e) {
var evt = e ? e : window.
if(evt.stopPropagation) {
evt.stopPropagation();
evt.cancelBubble =
} 点击按钮关闭弹窗就是调用这个模块时的事了 只要调用closeAlert(el) 这方法就好了
做到这里基本上就成型了 因为是做个模块 所以就不希望我们再去写html 我们直接用js动态添加html到页面里面 这样就不用在调用时在写很多html标签了var newNode = document.createElement("div");
//这里设置一个全局变量 因为要用到
function addlast() {
newNode.innerHTML = '&div class="alert_box"&&div class="small_win"&&div class="alert_box_title"&&p class="alert_title_text"&&/p&&/div&&div class="alert_box_content"&&ul class="alert_box_content_ul"&&/ul&&div class="alert_box_input"&&input type="text" placeholder="请输入密码" class="alert_input" /&&/div&&div class="alert_box_sure"&&/div&&/div&&/div&&/div&'
document.body.appendChild(newNode)
//上面是动态创建的文件 这里添加进去 pushSmgInit（）这个方法里面调用就行
}当我在使用时发现有问题 当关闭再打开时里面的数据不对了 后来发现我们关闭时 只是让他隐藏了 上次的属性还在 第二次添加就不好使了 所以我们要改一下关闭的方法 我们直接移除他function closeAlert (el) {
al = newNode
document.body.removeChild(newNode)
}ok 现在就可以了
我们来把它封装一下
当然我改了一些命名 把下面这些代码粘贴复制一下就可以用
也可以和上面对照一下 自己去修改 开始已经说明了 我说的是一个思路
以下就是完整代码了
js部分（封装后的）创建一个名为alertBox.js的文件(function(window) {
var u = {}
u.alertBox = function(info, fn) {
u.addlast()
var alertBox = document.getElementsByClassName('alert_box')[0];
var smallWin = document.getElementsByClassName('small_win')[0];
var titleBox = document.getElementsByClassName("alert_box_title")[0];
var title = titleBox.getElementsByClassName("alert_title_text")[0];
var cUl = document.getElementsByClassName("alert_box_content_ul")[0];
var putBox = document.getElementsByClassName("alert_box_input")[0];
var put = putBox.getElementsByClassName("alert_input")[0];
var btnBox = document.getElementsByClassName("alert_box_sure")[0];
if(info.title) {
titleBox.style.background = info.title.
title.innerHTML = info.title.
title.style.color = info.title.
title.innerHTML = "标题";
if(info.context) {
var liStr = ""
for(var i in info.context) {
liStr += '&li&&span class="key"&' + info.context[i].text + '&/span&&/li&'
cUl.innerHTML = liStr
if(!info.isInput) {
putBox.style.display = "none"
put.setAttribute("type", "type")
if(info.inputType) {
if(info.inputType != "type") {
if(info.inputType != "password") {
putBox.style.display = "none"
put.setAttribute("type", info.inputType)
if(info.btn) {
var btnStr = ""
if(info.btn.length & 1) {
btnStr += '&button class="alert_box_btn"&确认&/button&'
for(var i in info.btn) {
if(i &= 2) {
btnStr += '&button class="alert_box_btn"&' + info.btn[i] + '&/button&'
btnBox.innerHTML = btnStr
var alertBtn = document.getElementsByClassName("alert_box_btn")
if(info.btn.length &= 1 && info.btnLeft) {
var btnL = alertBtn[0]
btnL.setAttribute("style", "background:" + info.btnLeft.bg + ";color:" + info.btnLeft.color + ";font-size:" + info.btnLeft.fontSize + "px")
if(info.btn.length &= 2 && info.btnRight) {
var btnR = alertBtn[1];
btnR.setAttribute("style", "background:" + info.btnRight.bg + ";color:" + info.btnRight.color + ";font-size:" + info.btnRight.fontSize + "px")
for(var a = 0; a & alertBtn. a++) {
alertBtn[a].index = a
alertBtn[a].onclick = function() {
var data = {}
if(putBox.style.display === 'none') {
fn && fn({
eventType: this.index
fn && fn({
eventType: this.index,
msg: put.value
if(info.tapClose) {
alertBox.onclick = function() {
u.closeAlert(this)
smallWin.onclick = function(event) {
cancelBubble(event)
//关闭弹窗
u.closeAlert = function(el) {
al = newNode
document.body.removeChild(newNode)
//阻止事件冒泡
function cancelBubble(e) {
var evt = e ? e : window.
if(evt.stopPropagation) {
evt.stopPropagation();
evt.cancelBubble =
var newNode = document.createElement("div");
u.addlast = function() {
newNode.innerHTML = '&div class="alert_box"&&div class="small_win"&&div class="alert_box_title"&&p class="alert_title_text"&&/p&&/div&&div class="alert_box_content"&&ul class="alert_box_content_ul"&&/ul&&div class="alert_box_input"&&input type="text" placeholder="请输入密码" class="alert_input" /&&/div&&div class="alert_box_sure"&&/div&&/div&&/div&&/div&'
document.body.appendChild(newNode)
window.$alert =
})(window);css文件（和上面的没有什么变化）创建一个名为alertBox.css的文件
padding: 0;
margin: 0;
list-style:
.alert_box {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
.alert_box .small_win {
background: #
width: 80%;
left: 50%;
padding-bottom: 15
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 10
.alert_box .small_win .alert_box_title {
background: #
padding: 10px 0;
text-align:
font-size: 16
.alert_box .small_win .alert_box_content {
width: 90%;
margin-top: 10
.alert_box .small_win .alert_box_content ul li {
padding: 5px 0;
.alert_box_input input {
width: 100%;
font-size: 16
border-bottom: 1px solid #
padding: 10px 0;
.alert_box_sure {
text-align:
margin-top: 15
.alert_box_sure .alert_box_btn {
width: 40%;
padding: 6
margin-right: 5
}html文件&!DOCTYPE html&
&meta charset="utf-8" /&
&meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /&
&meta name="format-detection" content="telephone=no"&
&title&&/title&
&link rel="stylesheet" type="text/css" href="alertBox.css" /&&!--css写在这里面--&
&style type="text/css"&
height: 50
margin: 40
background:
line-height: 50
text-align:
&div class="click"&点击我&/div&
&script type="text/javascript" src="alertBox.js"&&/script&&!--封装好的js写在这里面--&
&script type="text/javascript"&
document.getElementsByClassName("click")[0].onclick = function() {
//代码调用示范
$alert.alertBox({ //调用方法
title: { //设置顶部提示信息
bg: '#ff0000', //设置顶部提示信息背景
context: "确认信息", //设置顶部提示信息内容
不传默认提示 "标题"
color: "#fff" //设置顶部提示信息的文字颜色
context: [{ // 设置提示内容不传 则不显示
text: "提示的内容1:"
text: '提示的内容2'
text: '提示的内容3'
isInput: true, // 设置是否显示input框
inputType: "type", //
设置input框的type值 只能为password或type
btn: ["确认", "取消"], //
设置button按钮 最多传两个
btnLeft: { // 设置左边按钮样式 若按钮只有一个则取这里面的样式
bg: "#ddd", //设置设置左边按钮背景
color: "#000", //设置设置左边按钮文字颜色
fontSize: 16 //设置设置左边按钮字体大小
btnRight: { // 设置右边按钮样式 若按钮只有一个则忽略此配置
bg: "#ff0000", //设置设置右边按钮背景
color: "#fff", //设置设置右边按钮背景
fontSize: 16 //设置设置右边按钮字体大小
tapClose: true // （可选项）是否点击遮罩层关闭该对话框
默认为false
}, function(ret) {
console.log(ret) //回调函数 如果isInput为false 则返回{eventType: 1}
如果isInput为true 则返回{eventType: 1, msg: ""}
if(ret.eventType == 1) {
$alert.closeAlert()
&/html&说明下 这个我是用在移动端的 所以在pc上有点丑 不过用的时候可以自己调节以下 希望对大家有所帮助
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！