这是rwx公司前端web项目中的工作小结，以前记在我的记事本里，复制过来的
实习期在做一个小程序，现在叫喜人心健康肽
之后是写wrx自己的app（叫爱车点点）和H5门店系统开发
2019-05-15：
混合开发知识点：
<span class="kaidan1 kaidan_gaoliang"></span>-- 高亮属性类名给第二个
数据提交用form 表单包 属性 method='post' 可提交
input name属性值
-id="jiansuo1" -不生效
2019-05-22：
js封装：
<span class="tab-span AI">车牌号*：</span>
<span class="tab-chepai">
<input type="text" class="tab-put action_chepaihao" placeholder="请输入车牌号" value="" requiredname="plate_number">
</span>
<button class="tab-btn" type="button" -id="jiansuo1" onclick="selectUserListBox('jiansuo1')">检索</button>
</span>
<span class="tab-span AI">手机号*：</span>
<span class="tab-shouji">
<input type="text" class="tab-put5 action_shoujihao" placeholder="请输入手机号" value="" required name="phone">
</span>
<button class="tab-btn2" type="button" onclick="selectUserListBox('jiansuo2')">检索</button>//调用函数
//封装-(车牌号/手机号模糊查询用户信息)
function selectUserListBox(m){
var url_selectUserList = "{:U('Home/Api/selectUserList')}";//请求地址
if(m =='jiansuo1'){//车牌号查询
var keyword=$(".action_chepaihao").val();
if(!keyword){
alert("请输入车牌号");return;
}
}else{//手机号查询
var keyword=$(".action_shoujihao").val();
if(!keyword){
slert("请输入手机号");return;
}
}
}
混合开发：点击项目列表 渲染
<div class="tianjiaNeiR" id="wxxmTypeBox">
<!-- 项目类别-静态样式
<div id="zxm_wxxm_0" class="active">美容</div>
<div id="zxm_wxxm_1">保养</div>
<div>维修</div>
<div>保养</div>
<div>维修</div>
<div>保养</div>
<div>维修</div>
<div>保养</div>
<div>维修</div>
<div>保养</div>
<div>维修1</div>
<div>维修2</div>
-->
</div>
<div id="wxxmDataBox">
<!-- 项目列表-静态样式
<ul class="tianjialist zxm_wxxm_0" -style="display: none">
<li class="list-li list_active" title="10">11111111SUV外观清晰1十大缴费卡死的积分卡圣诞</li>
<li class="list-li list_active" title="30">SUV外观清晰1十大缴费卡死的积分卡圣诞</li>
<li class="list-li list_active">SUV外</li>
<li class="list-li list_active">SUV外观清晰1十</li>
<li class="list-li list_active">SUV外观清晰1十大缴费卡死的积分卡圣诞</li>
<li class="list-li">SUV外观清晰1十大缴费卡死的积分卡圣诞</li>
<li class="list-li list_active">SUV外观清晰1十大缴费卡死的积分卡圣诞</li>
<li class="list-li list_active">SUV外</li>
<li class="list-li list_active">SUV外观清晰1十</li>
<li class="list-li">SUV外观清晰1十大缴费卡死的积分卡圣诞</li>
<li class="list-li list_active">SUV外观清晰1十大缴费卡死的积分卡圣诞</li>
<li class="list-li list_active">SUV外观清晰1十大缴费卡死的积分卡圣诞</li>
<li class="list-li list_active">SUV外观清晰1十大缴费卡死的积分卡圣诞</li>
<li class="list-li list_active">SUV外观清晰1十</li>
</ul>
</div>
2019-05-29：
点击项目列表 --动态渲染：
//$.post("{地址}"，变量【没有可以不写】,function(){})
$.post("{:U('Home/Indent/public_getwxxmList')}",'',function(re){
if(re.code==1) return;//=1直接不返回不执行以下代码
var _data = re.data;//返回一个对象，一个数组，分别循环取值
var mhtml = '';
var mhtml_xm = '';
for(i=0;i<_data.length;i++){
if(i==0){
mhtml+= '<div id="zxm_wxxm_'+i+'" class="active" onclick="action_wxxmDataBox(this)">'+_data[i].title+'</div>';
mhtml_xm += '<ul class="tianjialist zxm_wxxm_'+i+'">';
}else{
mhtml += '<div id="zxm_wxxm_'+i+'" onclick="action_wxxmDataBox(this)">'+_data[i].title+'</div>';
mhtml_xm += '<ul class="tianjialist zxm_wxxm_'+i+'" style="display: none">';
}
var _wxxm_list = _data[i].list;
for(y=0;y<_wxxm_list.length;y++){
if(pub_wxxm_list.indexOf(_wxxm_list[y].k14_002)>-1){
mhtml + ='<li title="'+_wxxm_list[y].k14_003+'" class="list-li list_active">'+_wxxm_list[y].k14_002+'</li>';
}else{
mhtml + ='<li title="'+_wxxm_list[y].k14_003+'" class="list-li">'+_wxxm_list[y].k14_002+'</li>';
}
}
mhtml_xm + ='</ul>'
}
$('#wxxmTypeBox').html(mhtml); //渲染-项目类别
$('#wxxmDataBox').html(mhtml_xm); //渲染-项目
})
2019-06-02：
前后分离：
--确认支付传递过去的参数
静态：
<button type="button" onclick="gobuy('goods_id','shopid','orderson')">去支付</button>--【'goods_id','shopid','orderson'（传递的参数）】
//html += '<span class="f-r ma_buy buy" data-zhifu="' +data[i].orderson+ '" onclick="goonpay('+"'" +data[i].orderson+ " ')"+'">去支付</span>';--完整样式
循环内能拿到的值：
data
data[i].orderson
data[i].goods_id
data[i].shopid
//data[i].uid
//data[i].token --
我们最后需要什么?
uid, token, orderson
uid, token, orderson （我们需要传的参数）
动态写活：
var html = "xxx";
html+ ='<button type="button" onclick="goBuy('goods_id','shopid','orderson')">去支付</button>'; ---原样粘贴静态，静态内是双引外面则单引包
[uid, token, orderson-没有引号是变量；''引号包含则是字符串]
写活字符串拼接：
html+ = '<button type="button" onclick="gobuy('+"'goods_id','shopid','orderson')"+'">去支付</button>';
html+ = '<button type="button" onclick="gobuy('+"'"+ goods_id +"','"+ shopid +"','"+orderson+"')"+'">去支付</button>';
循环赋值：
html+ = '<button type="button" onclick="gobuy('+"'"+data[i].goods_id +"','"+ data[i].shopid +"','"+data[i].orderson+"')"+'">去支付</button>';
嵌入html内：
$(".xxxx").html(html);
2019-06-12：
支付页面：
<div class="shodw-box"></div> //模态框
<div class="pay-box">
<input type="hidden" value="" class="zxm_orderson">---隐藏属性，接受传过来的订单号
<input type="hidden" value="" class="zxm_paytype">
<div class="title">
<h5>支付方式</h5>
<img onclick="closefn()" src="../images/close_icon.png">
</div>
<div class="pay-list">
<img src="../images/zfb_icon.png">
<h5>支付宝</h5>
<div class="select-btn" onclick="selectPay(this, 12)" name="1"></div>
</div>
<div class="pay-list" id="zxm_wxpayBox">
<img src="../images/wx_icon.png">
<h5>微信</h5>
<div class="select-btn" onclick="selectPay(this, 13)" name="2"></div>
</div>
<span class="affirm-btn">确认支付</span>
</div>
点击支付：
var uid = localStorage.getItem('uid');//获取uid
var token = localStorage.getItem('token');//获取token
function goBuy(){
$('.zxm_orderson').val(orderson);//储存的订单号
$(".shodw-box").show();
$(".pay-box").show();
}
确认支付：
$(".affirm-btn").click(function({
if($(".pay-list div").hasClass("active")){//选择哪个div增加一个背景属性
var orderson = $(".orderson").val();//订单号取值
var paytype = $(".paytype").val(); //支付方式值
if(!orderson){alert("请选择订单");return}
if(!paytype){alert("请选择支付方式");return}
//$.post(url,变量，function(){})
//is_url参数要传,告知后台需要返回url唤起完整地址
$.post(getPayAcddIndentUrl,{"uid":uid,"token":token,"orderson":orderson,"paytype":paytype,"is_url":'yes'},function(eve){
if(eve.code==0){
var UA = navigator.userAgent;
var isWeixin = /MicroMessenger/gi.test(UA);
if(isWeixin){
location.href = '../..publicHtml/html/alpay_jixx.html?'+eve.data.url;//h5微信内不能支付，需跳转浏览器唤醒支付宝支付
}else{
location.href = eve.data.url;
}
}else{
alert(eve.msg);
}
})
}else{
alert("请选择支付方式");
}
}))
继续支付 跳支付宝接口alpay_jixx.html 页面：
<html>
...
...
<script>
$(function(){
var UA = navigator.userAgent;
var isWeixin = /MicroMessenger/gi.test(UA);
if(!isWeixin){
var urls = location.href;
var index = urls.indexOf('?')+1; //不包含?号
var urllast = urls.slice(index);
//location.href = "https://openapi.alipay.com/gateway.do?"+urllast;
location.href = urllast; //服务端已返回完整地址,含参数,原样跳转
}
});
</script>
</html>
2019-06-15：
知识点：
<script src="../../../public/api.js?v20190620"></script> --js改动较大缓存严重可添加参数（版本号）清除
js中函数名相同，程序从上到下执行，则第二个函数会覆盖第一个函数。禁止函数名相同。
手机调试本地项目 http://本地ip 119.168.1.119/项目地址/xx/xx/首页地址index.html
浏览器调试本地项目： ↑复制粘贴到手机浏览器打开
先了解什么需求，做个简单页面可以网上找模板借鉴
2019-6-21：
手机适配：
@charset "UTF-8";
/*wap响应,宽(需实际分辨率宽除以3,★即手机屏幕的物理尺寸1厘米=100px):
* 最佳分辨率: 375物理宽度, 即 iPhone6,7,8的手机
* 320, 360, ★375, 411,414..
* */
@media screen and (max- 278px) {
html {
font-size: 66px; } }
@media screen and (min- 279px) and (max- 319px) { /*小米低款手机*/
html {
font-size: 74px; } }
@media screen and (min- 320px) and (max- 359px) {
html {
font-size: 85px; } }
@media screen and (min- 360px) and (max- 374px) {
html {
font-size: 96px; } }
@media screen and (min- 375px) and (max- 410px) {
html {
font-size: 100px; } }
@media screen and (min- 411px) and (max- 767px) {
html {
font-size: 109px; } }
/*ipad响应宽(已除以3):
* 最佳分辨率:
* 768,1024..
* */
@media screen and (min- 768px) and (max- 1023px) {
html {
font-size: 99px; } }
/*pc响应宽(浏览器当前窗口的宽度值):
* 最佳分辨率:
* 800, 1024,1152, 1280, 1360,1366, 1400,1440, 1600,1680, 1920
* */
@media screen and (min- 1024px) and (max- 1279px){
html {
font-size: 100px; } }
@media screen and (min- 1280px) and (max- 1359px){
html {
font-size: 102px; } }
@media screen and (min- 1360px) and (max- 1399px){
html {
font-size: 103px; } }
@media screen and (min- 1400px) and (max- 1599px){
html {
font-size: 104px; } }
@media screen and (min- 1600px) and (max- 1919px) {
html {
font-size: 106px; } }
@media screen and (min- 1920px){
html {
font-size: 109px; } }
2019-07-01
h5门店系统社区-会员卡结算：（扩展会员开卡混合卡/无限卡/有效期）
forEach 循环数组 有多少个循环多少
//会员卡渲染
kaika_data.card_rule_id = ruId;//赋值会员卡序号
VIPdata.data.forEach((res) => {
if (res.card_rule_id == ruId) {
res.card_xm_list.forEach((res) => {
//console.log(res);
var mhtml ='';
// mhtml+=`<p><span class="Time3C">${res.k14_002}</span>`;//写法1，与写法2效果一致
mhtml+='<p><span class="Time3C">'+res.k14_002+'</span>';//写法2 （公共一样的踢出放外面）
if(res.ini_infinitetime==0){
var _yxq ="永久有效";
}else{
var _yxq =""+res.ini_infinitetime+"个月内有效";
}
if(res.is_infinite == 0 ){//is_infinite 判断是否为无限使用，0为不是（默认）1为是（无限）
mhtml+=`<span class="time3F">${res.num}次<span class="ex_color">（${_yxq}）</span></span>`;
}else {
mhtml+= `<span class="time3F">无限使用<span class="ex_color">（${_yxq}）</span></span>`;
}
mhtml+='</p>';
$(".xinxi1").append(mhtml);//公共一样的尾部追加在这个页面内
})
}
})
xx+=`${res.xx}` 会直接解析这个函数方法
xx+='+res.xx+' 写法一致
//会员卡渲染
res.card_xm_list.forEach((res2) => {
var mhtml="";
if(res2.infinitedate==0){ //判断卡的有效期
var _yxq="永久有效";
}else {
var t=res2.infinitedate;//2019-7-3 14:57:23 返回时间
var _t=t.substr(0,10); // 截取返回时间为年月日2019-7-3
var _yxq="截止为"+_t+"";
}
if(res2.is_infinite ==0){ //判断是否为无限次数 不同页面渲染显示不一致
mhtml+=`<div class="huiyuanp22"><span class="huiyuanp1-2" pa="${res2.xm_id}">${res2.k14_002}:<span class="Bcolor">(剩余次数:${res2.num}次)<span class="ex_color">(${_yxq})</span></span></span>`;
}else { //
mhtml+=`<div class="huiyuanp22"><span class="huiyuanp1-2" pa="${res2.xm_id}">${res2.k14_002}:<span class="Bcolor">(无限次数)<span class="ex_color">(${_yxq})</span></span></span>`
}
mhtml+='<div>抵扣<input type="number" min="0" step="0" class="nobalance" placeholder="0">次</div>'; //相同的页面渲染可以写一个丢出来
mhtml+='</div>'; //尾部结束追加div
$(".huiyuanD1").append(mhtml); //嵌入页面当中
})
2019-07-03
app 知识点：
//字符串得到带“元”的钱
var string = $(".YtianjiaZ_z").html().split("：")[1];
//截取标签内冒号：前的内容
var xx=($(".huiyuanp1-2:eq(" + n + ")").html().split(":")[0]);
2019-07-03
app 知识点：
//字符串得到带“元”的钱
var string = $(".YtianjiaZ_z").html().split("：")[1];
//截取标签内冒号：前的内容
var xx=($(".huiyuanp1-2:eq(" + n + ")").html().split(":")[0]);
//在项目循环内加判断
var _card_xm_list = _card_numberData[i].card_xm_list;//得到卡内容
for(var y=0;y<_card_xm_list.length;y++){ //循环输出N次卡的具体项目
//console.log(_card_xm_list[y].infinitedate);
if(_card_xm_list[y].infinitedate == ''){//infinitedate 判断有效期
var _yxq="永久有效"
}else {
var t=_card_xm_list[y].infinitedate;//获取返回的时间2019-07-04 15:21:55
var _t=t.substring(0,10); //原生截取返回时间年月日 2019-07-04
var _yxq="截止为:"+_t+"";
}
z++;
mhtml+=' <span class="huiyuanp22">';
mhtml+=' <span class="huiyuanp1-2">';
if(_card_xm_list[y].is_infinite==0){//is_infinite 判断是否为无限使用，0为不是（默认）1为是（无限）
mhtml+=' <span>'+_card_xm_list[y].k14_002+'</span><span class="Bcolor">( 剩余次数:'+_card_xm_list[y].num+'次 )<span style="color: red">('+_yxq+')</span></span>';
}else {
mhtml+=' <span>'+_card_xm_list[y].k14_002+'</span><span class="Bcolor">(无限次数)<span style="color: red">('+_yxq+')</span></span>';
}
// mhtml+=' <span>'+_card_xm_list[y].k14_002+'</span><span class="Bcolor">( 剩余次数:'+_card_xm_list[y].num+'次 )<span>(_yxq)</span></span>';
mhtml+=' </span>';
mhtml+=' <span style="color: #ff7209">折扣 <input style="90px" type="number" min="0" max="'+_card_xm_list[y].num+'" class="hy_number" value="0" title="'+z+'">次</span>';
mhtml+=' <input type="hidden" class="hy_xm_id_'+z+'" value="'+_card_xm_list[y].xm_id+'">';
mhtml+=' <input type="hidden" class="hy_k14_002_'+z+'" value="'+_card_xm_list[y].k14_002+'">';
mhtml+=' </span>';
}
mhtml+=' </div>';
mhtml+='</div>';
}
$('#card_xm_dataBOX').html(mhtml);
2019-07-19：
RGBA 原理 书写方式
改公共css样式 不涉及任何宽高数值
单独css样式控制宽高 颜色 margin padding
z-inde 层
适配 静态样式
********** color 代码换算公式 *******
#ffffff 即 grb(255,255,255)
#ff ff ff 红 绿 蓝(00~ff,即0~255)
代码 值
01 1
02 2
03 3
04 4
05 5
06 6
07 7
08 8
09 9
0a 10
0b 11
0c 12
0d 13
0e 14
0f 15
10 1*16+0=16
20 2*16+0=32
ef 14*16+15=239
如 #5d5d5c的rgb值为: 5*16+13=93,即 rgb(93,93,92)