亚洲必赢登录 > 亚洲必赢app > 弹性盒子模型使用本事,Wechat小程序支付C

原标题:弹性盒子模型使用本事,Wechat小程序支付C

浏览次数:81 时间:2019-12-01

  很早在此之前就学过了弹性盒子,就认为温馨怎样都学会了,没悟出到了事实上的采纳进程中,其实并非那么贰回事,本人向来想不到会用到哪些属性,该怎么选取。

地址:

自己是一个小白程序猿,筹算开采小程序找了十分久小程序开辟引擎,看见白鹭和LayaAir 。经过生龙活虎番资料搜索后被LayaAir高品质、接口简洁及社区活泼所引发,然后选拔了LayaAir。

2D转换

在二维的平面上做一些变迁,使用transform属性

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Text;
  5 using System.Web;
  6 using System.Web.Mvc;
  7 using System.IO;
  8 using System.Security.Cryptography;
  9 using System.Text;
 10 using System.Xml;
 11 using Newtonsoft.Json;
 12 using Newtonsoft.Json.Linq;
 13 namespace Mvc_vue.Controllers
 14 {
 15     public class wxController : Controller
 16     {
 17         //
 18         // GET: /wx/
 19 
 20         public ActionResult Index()
 21         {
 22             return View();
 23         }
 24         //所需值
 25         public static string _appid = "wxd930ea5d5a258f4f";
 26         public static string _mch_id = "10000100";
 27         public static string _key = "192006250b4c09247ec02edce69f6a2d";
 28 
 29         //模拟wx统一下单 openid(前台获取)
 30         public string getda(string openid)
 31         {
 32             return Getprepay_id(_appid, "shanghaifendian", "monixiaofei", _mch_id, GetRandomString(30), "http://www.weixin.qq.com/wxpay/pay.php", openid, getRandomTime(), 1);
 33 
 34         }
 35 
 36         
 37 
 38         //微信统一下单获取prepay_id & 再次签名返回数据
 39         private static string Getprepay_id(string appid, string attach, string body, string mch_id, string nonce_str, string notify_url, string openid, string bookingNo, int total_fee)
 40         {
 41             var url = "https://api.mch.weixin.qq.com/pay/unifiedorder";//微信统一下单请求地址
 42             string strA = "appid=" + appid + "&attach=" + attach + "&body=" + body + "&mch_id=" + mch_id + "&nonce_str=" + nonce_str + "&notify_url=" + notify_url + "&openid=" + openid + "&out_trade_no=" + bookingNo + "&spbill_create_ip=61.50.221.43&total_fee=" + total_fee + "&trade_type=JSAPI";
 43             string strk = strA + "&key="+_key;  //key为商户平台设置的密钥key(假)
 44             string strMD5 = MD5(strk).ToUpper();//MD5签名
 45 
 46             //string strHash=HmacSHA256("sha256",strmd5).ToUpper();   //签名方式只需一种(MD5 或 HmacSHA256     【支付文档需仔细看】)
 47 
 48             //签名
 49             var formData = "<xml>";
 50             formData += "<appid>" + appid + "</appid>";//appid  
 51             formData += "<attach>" + attach + "</attach>"; //附加数据(描述)
 52             formData += "<body>" + body + "</body>";//商品描述
 53             formData += "<mch_id>" + mch_id + "</mch_id>";//商户号  
 54             formData += "<nonce_str>" + nonce_str + "</nonce_str>";//随机字符串,不长于32位。  
 55             formData += "<notify_url>" + notify_url + "</notify_url>";//通知地址
 56             formData += "<openid>" + openid + "</openid>";//openid
 57             formData += "<out_trade_no>" + bookingNo + "</out_trade_no>";//商户订单号    --待
 58             formData += "<spbill_create_ip>61.50.221.43</spbill_create_ip>";//终端IP  --用户ip
 59             formData += "<total_fee>" + total_fee + "</total_fee>";//支付金额单位为(分)
 60             formData += "<trade_type>JSAPI</trade_type>";//交易类型(JSAPI--公众号支付)
 61             formData += "<sign>" + strMD5 + "</sign>"; //签名
 62             formData += "</xml>";
 63 
 64 
 65 
 66             //请求数据
 67             var getdata = sendPost(url, formData);
 68 
 69             //获取xml数据
 70             XmlDocument doc = new XmlDocument();
 71             doc.LoadXml(getdata);
 72             //xml格式转json
 73             string json = Newtonsoft.Json.JsonConvert.SerializeXmlNode(doc);
 74 
 75 
 76 
 77             JObject jo = (JObject)JsonConvert.DeserializeObject(json);
 78             string prepay_id = jo["xml"]["prepay_id"]["#cdata-section"].ToString();
 79 
 80             //时间戳
 81             string _time = getTime().ToString();
 82 
 83             //再次签名返回数据至小程序
 84             string strB = "appId=" + appid + "&nonceStr=" + nonce_str + "&package=prepay_id=" + prepay_id + "&signType=MD5&timeStamp=" + _time + "&key="_key;
 85 
 86             //wx自己写的一个类
 87             wx w = new wx();
 88             w.timeStamp = _time;
 89             w.nonceStr = nonce_str;
 90             w.package = "prepay_id=" + prepay_id;
 91             w.paySign = MD5(strB).ToUpper(); ;
 92             w.signType = "MD5";
 93 
 94             //向小程序返回json数据
 95              return JsonConvert.SerializeObject(w);
 96         }
 97 
 98         /// <summary>
 99         /// 生成随机串    
100         /// </summary>
101         /// <param name="length">字符串长度</param>
102         /// <returns></returns>
103         private static string GetRandomString(int length)
104         {
105             const string key = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
106             if (length < 1)
107                 return string.Empty;
108 
109             Random rnd = new Random();
110             byte[] buffer = new byte[8];
111 
112             ulong bit = 31;
113             ulong result = 0;
114             int index = 0;
115             StringBuilder sb = new StringBuilder((length / 5 + 1) * 5);
116 
117             while (sb.Length < length)
118             {
119                 rnd.NextBytes(buffer);
120 
121                 buffer[5] = buffer[6] = buffer[7] = 0x00;
122                 result = BitConverter.ToUInt64(buffer, 0);
123 
124                 while (result > 0 && sb.Length < length)
125                 {
126                     index = (int)(bit & result);
127                     sb.Append(key[index]);
128                     result = result >> 5;
129                 }
130             }
131             return sb.ToString();
132         }
133 
134         /// <summary>
135         /// 获取时间戳
136         /// </summary>
137         /// <returns></returns>
138         private static long getTime()
139         {
140             TimeSpan cha = (DateTime.Now - TimeZone.CurrentTimeZone.ToLocalTime(new System.DateTime(1970, 1, 1)));
141             long t = (long)cha.TotalSeconds;
142             return t;
143         }
144 
145 
146         /// <summary>
147         /// MD5签名方法  
148         /// </summary>  
149         /// <param name="inputText">加密参数</param>  
150         /// <returns></returns>  
151         private static string MD5(string inputText)
152         {
153             MD5 md5 = new MD5CryptoServiceProvider();
154             byte[] fromData = System.Text.Encoding.UTF8.GetBytes(inputText);
155             byte[] targetData = md5.ComputeHash(fromData);
156             string byte2String = null;
157 
158             for (int i = 0; i < targetData.Length; i++)
159             {
160                 byte2String += targetData[i].ToString("x2");
161             }
162 
163             return byte2String;
164         }
165         /// <summary>
166         /// HMAC-SHA256签名方式
167         /// </summary>
168         /// <param name="message"></param>
169         /// <param name="secret"></param>
170         /// <returns></returns>
171         private static string HmacSHA256(string message, string secret)
172         {
173             secret = secret ?? "";
174             var encoding = new System.Text.UTF8Encoding();
175             byte[] keyByte = encoding.GetBytes(secret);
176             byte[] messageBytes = encoding.GetBytes(message);
177             using (var hmacsha256 = new HMACSHA256(keyByte))
178             {
179                 byte[] hashmessage = hmacsha256.ComputeHash(messageBytes);
180                 return Convert.ToBase64String(hashmessage);
181             }
182         }
183 
184         /// <summary>
185         /// wx统一下单请求数据
186         /// </summary>
187         /// <param name="URL">请求地址</param>
188         /// <param name="urlArgs">参数</param>
189         /// <returns></returns>
190         private static string sendPost(string URL, string urlArgs)
191         {
192             
193             System.Net.WebClient wCient = new System.Net.WebClient();
194             wCient.Headers.Add("Content-Type", "application/x-www-form-urlencoded");
195             //byte[] postData = System.Text.Encoding.ASCII.GetBytes(urlArgs);  如果微信签名中有中文会签名失败
196         byte[] postData = System.Text.Encoding.UTF8.GetBytes(urlArgs);     
197             byte[] responseData = wCient.UploadData(URL, "POST", postData);
198         
199             string returnStr = System.Text.Encoding.UTF8.GetString(responseData);//返回接受的数据 
200             return returnStr;
201          }
202 
203         /// <summary>
204         /// 生成订单号
205         /// </summary>
206         /// <returns></returns>
207         private static string getRandomTime()
208         {
209             Random rd = new Random();//用于生成随机数
210             string DateStr = DateTime.Now.ToString("yyyyMMddHHmmssMM");//日期
211             string str = DateStr + rd.Next(10000).ToString().PadLeft(4, '0');//带日期的随机数
212             return str;
213         }
214 
215     }
216 }

  这一回就只把自己动用进度中遇到的局地坑来计算一下。

        Location{

付出进度中平时小标题都在说探视官方网址看看文书档案就会一举成功了,然则以后本身遇见了消除不到标题,官方网址又没别的材质的时候,我提了个难题正是小白鹭引擎里决定骨骼运动在LayaAir怎么落到实处时,官方职员却言不尽意。作者想那标题一年前就有人问过了应该有人知道呢,可是作者太天真了,获得的答案只是手艺大佬的嘲笑。

1. 2D转移之移动(translate)

案例:

        div{
            width: 200px;
            height: 200px;
            background-color: #090;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);/*左-上 移动自身50%*/
        }

 

  使用弹性盒子的境况依然必要去看结构的,那天性情使用起来拾叁分爽,不必要考虑那么多,直接几行代码就产生了前目生成构造要成功的情景,何况自适应页面包车型客车力量也要强出无数,无需自身再去调治持久的体裁像素。

            assign:ƒ (卡塔尔国,                                                                            // 加载新的文书档案。

亚洲必赢app 1

 2. 2D转移之旋转(rotate)

私下认可意况下按主题点旋转,我们得以经过transform-origin调大旨点。

        div{
            width: 200px;
            height: 200px;
            background-color: #090;
            margin: 100px auto;
            transform-origin: top left;/*旋转的中心点,默认不写该属性是以矩形中心点旋转*/
        }
        div:hover{
            transform: rotate(45deg)/*deg表示度数*/
        }

应用的是MVC .NET Framework4

弹性盒子模型使用本事,Wechat小程序支付C。  直接上布局的样子吧。

            hash:"#prosper",                                                                        // 设置或再次来到从井号 (#) 开始的 URL(锚)。

说自家态度不佳,不过作者没半点不爱戴,小编感觉LayaAir开垦非常好的,然而让自个儿认错,我不知底怎么认。作者又没骂自身只是提难题而已。免花销外人引擎难道就不能够提难题了吧。
亚洲必赢app 2
本身从不怼引擎,也没说LayaAir倒霉,不然小编也不会用。别人提了自家那几个相同的难题是一年前的,小编不精通她是怎么消除的,官方网站也不曾别的代码提醒,作者非常不得已。

 3. 2D调换之缩放(scale)

        div{
            width: 200px;
            height: 200px;
            background-color: #090;
            margin: 100px auto;
        }
        div:hover{
            /*transform: scale(0.5);*/ /*x轴和Y轴都是缩放0.5倍*/
            /*transform: scaleX(0.5);*/ /*x轴缩放0.5倍*/
            transform: scale(2,3); /*x轴缩放2倍 y轴缩放3倍*/
        }

Wechat小程序支付 小程序端源码

    页面一

  亚洲必赢app 3

  比方说下面的体裁,你们也许有其他更加好的架思虑路,能够享受一下的哈。 作者就说说笔者猜到的坑,因为在此之前根本就从没有过这么去写过,所以有部分细节的部分根本未曾思谋过,后来写过三回今后,在察看这种构培养变得轻松多了。

            host:"127.0.0.1:8082",                                                                  // 设置或回到主机名和前段时间 UPAJEROL 的端口号。

亚洲必赢app 4

 4. 2D更改之斜切(skew)

        div{
            width: 200px;
            height: 200px;
            background-color: #090;
            margin: 100px auto;
        }
        div:hover{
            /*transform: skewX(8deg);*/ /*x方向上斜切8度*/
            transform: skewY(8deg); /*y方向上斜切8度*/
        }
  1. 改变案例:

下箭头制作

亚洲必赢app 5

 1         div{
 2             width: 300px;
 3             height: 40px;
 4             border: #5c5c5c solid 1px;
 5             margin: 100px auto;
 6             position: relative;
 7         }
 8         div::after{
 9             content: '';
10             width: 12px;
11             height: 12px;
12             border-right: #5c5c5c solid 2px;
13             border-bottom: #5c5c5c solid 2px;
14             display: block;
15             position: absolute;
16             top: 50%; /*子盒子左上角相对于有定位的父盒子居中显示*/
17             right: 12px;
18             transform: translateY(-50%) rotate(45deg); /*translateY(-50%)与top:50% 组合使用让子盒子相对父盒子垂直居中*/
19         }
20         div:hover{
21             border: #009 solid 1px;
22         }
23         div:hover::after{
24             border-right: #009 solid 2px;
25             border-bottom: #009 solid 2px;
26         }

MVC项目揭穿前的安插

亚洲必赢app,  布局思路

    平时大家都会把叁个页面分为三有些,大家把最上边的配备监察是底部

    内容部分为中等的那一大堆

    底部就是上面的七个开关的那有个别

  架寻思路差十分的少是底下的代码那多少个样子的,中间的局地确定是要自适应的了,直接把剩余的可观都占满。

  

#box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.header{
    height: 100px;
}
.content{
    flex-grow: 1;   // 这里的这个属性  因为之前用这个用的少,所以没有想到,这个属性是定义项目放大比例,默认是0,将他规定一下,然后就会把剩余的空间都给占掉
}
.footer{
    height: 200px;
}


<div id="box">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

 

  珍贵的是中等的那部分,因为中间有些上边包车型客车报表部分抢先之后要出现滚动条,所以就是表格内容的中度的父成分的莫斯中国科学技术大学学笔者拿不许,最领头一直用的是rem给写死了,后来意识有那一个缺欠,因为是第一回写那样的页面所以讲上面包车型大巴极度未有杜撰到的属性。

  中间的生龙活虎对分成两片段,浅莲灰的后生可畏部分,两个层面,用的弹性盒子,把他们的幅度写成都百货分比平均,多个分后生可畏行,用的33.3%,

  大约代码正是上边的样品的。

  

ul{
    display: flex;
    flex-wrap: wrap;
}
ul li{
    width: 33.3%;
    height: xxx;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

  上边包车型大巴足够表格要超越现身滚动条,刚才说了自家第一回结构的长河中把她父成分的可观给写死了,然后在自适应的经过中冒出了有的主题素材,能够把高级中学级的风姿罗曼蒂克部分也写成叁个弹性盒子,然后下面的相当的多个青灰框框的父元素中度给定住,然后下边包车型地铁有些应用那三个flex-grow属性,直接把上边包车型大巴那某件事物都给占住。

  大约和最早前尾部中间有些后面部分的构造大概。

  亚洲必赢app 6

 

            hostname:"127.0.0.1",                                                                   // 设置或回到当前 U昂科威L 的主机名。

自己是技能新手,改底层作者真做不到。叫作者去重写那,重写那。代码的确开源了,不过小编真看不懂。各位都是技能大佬都能直接改底层,作者敬拜。

 

本文由亚洲必赢登录发布于亚洲必赢app,转载请注明出处:弹性盒子模型使用本事,Wechat小程序支付C

关键词:

上一篇:没有了

下一篇:没有了