公众号开发之-201903月项目总结

最新推荐文章于 2019-04-20 16:10:38 发布

godferyZhu

最新推荐文章于 2019-04-20 16:10:38 发布

阅读量222

点赞数 1

分类专栏：工作总结

本文链接：https://blog.csdn.net/qq_42514643/article/details/89312236

版权

工作总结专栏收录该内容

21 篇文章 1 订阅

订阅专栏

在此立一个flag，每月15日之前发布上一个月的项目总结，以此督促自己坚持

本月总共两个项目上线：1、现有公众号页面优化；2、新需求一键匹配开发。

公众号获取用户信息有两种方式：
1，snsapi_base静默授权（是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面））；
2，snsapi_userinfo（是用来获取用户的基本信息的，但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息）

//snsapi_base静默授权
	var wxHead = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号appid&redirect_uri=http://";
  var url = "跳回的网页路径.html";
  var wxFoot = "&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
  var host = window.location.host;
  var wxCode = getURLParameter('code');
  if (wxCode != '' && wxCode != null) { //如果wxCode存在并且不为空
    getUserWechatInfo(wxCode);
  } else {
    window.location.href = wxHead + host + url + wxFoot; //获取wxcode并调回制定的url页面
  }

/**
 * 获取URL中的参数值，用于页面传参
 * @name 参数的key
 */
function getURLParameter(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
}

// 通过code像自己的服务器发送请求去交换获取微信信息
function getUserWechatInfo(code) { //通过code获取openid
  doGet('自己公司后台的接口?code=' + code, '', function (json) {
    if (json.code == 0) {
      localStorage.setItem('avatar', json.data.headimgurl)
    }
  });
};

1，安卓系统部分机型背景色问题
如下是对比（通过对比可以发现同一个页面在不同系统下的显示差异）
原因：部分安卓机型上页面的背景色不是白色，需要手动设置。
解决方案：最后的解决结果是在body上加上样式背景白色，解决）
2，input输入框，软键盘弹起影响页面布局
上图的输入框在安卓系统下，软件盘弹出框会把底部的“图标顶上去（下面图标是定位布局）”，在ios下表现正常。
原因：安卓系统下，软件盘弹出会压缩页面，也就相当于把页面高度缩小了，如果底部定位布局，则也会相应变化。
解决办法：页面进入时就给body设置固定高度，来避免body的高度缩放问题

   var hrt = $(window).height();//当前可视区域高度
      $('body').height(hrt + 'px');//ba可视区域高度赋值给body

3，input输入框，在软件盘输入完之后，点击键盘上面的完成，实现搜索功能
需求：当我们输入完密码直接点击弹出来的软键盘的完成的时候，我们可以进行登录
// input框软键盘搜索

 // input框软键盘搜索 
  $("#filterName").on('keypress', function (e) {
        var keycode = e.keyCode;
        if (keycode == '13') {
          e.preventDefault();
          var params = {};
          params = getNameCondition(params); // 获取姓名
          $("#informationList").html('');
          $('.dropload-down').remove();
          filterList(params);
        }
      });`

4，本月难点，标签渲染（先上效果图样式未贴）
难点：所有标签都通过后台数据获取，后台返回的数据结构是一个二维数组，分为1级数据和2级数据，但是有些2级数据中还有可能触发显示隐藏2级关联的数据，数据怎么渲染到页面中是一个难点
这是数据结构（比如在职业类别中有一个上班 tagId：456 那么对应的二级数据中的parentTagId：456就需要在它下面）
渲染出来的html结构比如我们选择的上班他的id 456 对应关联的二级的parentId 也是456

// html结构
!-- 基本信息 -->
    <ul class="contents">
      <!-- 模板 -->
      <li class="item type flags" style="display: none">
        <div class="title">年龄</div>
        <div class="typeGroup group0 ">
          <input type="hidden" class="param " data-required="false" name="age" data-name=''>
          <!-- 拼接 -->
        </div>
      </li>
    </ul>


// 过滤标签渲染到页面 想了很久才想出来 循环两次（第一个难点）
// tagGroupList 就是后台返回的数据列表
function fillMatchTag(tagGroupList) {
  tagGroupList.forEach(function (item, i) {
    var box = $('.item').clone();
    $(box).addClass('item_' + i);
    $(box).css({
      "display": "block"
    })
    $(box).find('.title').text(item.groupName)
    // $(box).find('input').attr('name', item.groupEname).addClass('checked')
    // $(box).find('input').attr('data-name', item.groupName)
    $(box).find('input').attr({
      'name': item.groupEname + item.id,
      'data-name': item.groupName,
      'data-required': 'true'
    }).addClass('checked');
 	// 1级数据和2级数据都有tagList
    var tagList = item.tagList
    if (tagList.length > 0) {
    // 1级标签下面的子标签渲染
      tagList.forEach(function (item, i) {
        var html = "<span class='selects' id=tag_" + item.tagId + "   data-tagId='" + item.tagId + "'>" +
          item.tagName + "</span>" 
        $(box).find('.typeGroup').append(html)
      })
    // 如果数据item中有parentTagId （1级中的是没有的，只有2级中有）且通过parentTagId 可以查到标签的话那就创建一个ul标签来装二级标签
      if (item.parentTagId && $("#tag_" + item.parentTagId).length > 0) {
      
      // 创建ul标签来装2级标签渲染的数据
        var $ul = $("<ul></ul>")
        
      // 获取父级tagId
        var tagGroupid = $("#tag_" + item.parentTagId).attr('data-tagid');
        
      // 获取父级tagName
        var tagName = $("#tag_" + item.parentTagId).text();
        
      // 由于box是克隆的，且上面已经循环过了，所以在克隆中找input设置名字便于提交根据名字获取值
        $(box).find('input').attr({
          'name': item.groupEname + tagGroupid
        })
      // 给创建的ul设置自定义属性
        $ul.attr({
          'data-tagGroupid': tagGroupid,
          'data-tagName': tagName,
        })
      // 给创建的ul设置隐藏，在点击时才显示
        $ul.css("display", "none")
        // $(box).attr('data-tagGroupid', tagGroupid)
        // $(box).attr('data-tagName', tagName)
      // 移除克隆盒子的flags，flags是用来在元素中区分1级和2级的，1级盒子都有flags 2级盒子没有
        $(box).removeClass('flags')
        // $(box).css("display", "none")
     // 把克隆盒子添加到创建的ul中
        $ul.append(box[0]);
     // 在找到父级标签的父盒子添加到父盒子中
        $("#tag_" + item.parentTagId).parent().append($ul[0])
      } else {
      // 如果数据item中没有parentTagId 也就是1级标签 添加到盒子中 
        $('.contents').append(box[0])
      }
    }
  })
}


// 标签点击事件（第二个难点）
function selectsClick(el) {
  var tagid = $(this).data('tagid'); //->记录当前点击元素的tagid
  $(this).siblings('.selects').removeClass('active'); //->当前元素的兄弟元素移除active样式
  // $(this).addClass('active');
  $(this).toggleClass('active'); //->当前元素切换active样式
  $(this).siblings('.checked').val(tagid); //—>找到隐藏的input框，把tagid赋值给value
  // 如果当前元素的父元素下面有ul且当前元素有active样式
  if ($(this).parent().find("ul").length != 0 && $(this).hasClass('active')) {
    $(this).parent().parent().css({
      "border-bottom": "0px"
    }); //->当前元素的父元素的父元素底边框设置为0px
    $(this).parent().find("ul[data-taggroupid=" + tagid + "]").eq(0).css({
      "border-top": "1px solid #eee"
    }); //->当前元素的父元素的第一个ul的上边框设置为1px
    $(this).parent().find("ul[data-taggroupid=" + tagid + "]").stop(true, true).slideDown().find('.checked').attr('data-required', 'true');

    $(this).parent().find("ul[data-taggroupid!=" + tagid + "]").stop(true, true).slideUp().find('.checked').val('').attr('data-required', 'false')
    $(this).parent().find("ul[data-taggroupid!=" + tagid + "]").find('.selects').removeClass('active')

  } else if (!$(this).hasClass('active')) {
    $(this).parent().parent().css({
      "border-bottom": "1px solid #eee"
    })
    $(this).siblings('.checked').val('')
    $(this).parent().find("ul").stop(true, true).slideUp().find('.checked').val('').attr('data-required', 'false')
    $(this).parent().find("ul").find('.selects').removeClass('active')
  }
  // 判断按钮是否激活
  btnIsActive(el);
}




// 判断按钮是否激活
function btnIsActive(el) {
  var isActive = true;
  $('.btn').removeClass('active');
  $("#" + el).find("input[data-required='true']").each(function (index, item) {
    if (!$(item).parents('.item').is(':hidden')) {
      var inputVal = $(item).val();
      if (isEmpty(inputVal)) {
        isActive = false;
        return false;
      }
    } else {
      isActive = true;
    }

  })

  if (isActive) {
    $('.btn').addClass('active');
  }
}

// 数据从localstorage中回显到页面
function backShow(pageData) {
  $('.param.checked').each(function (index) {
    var key = $(this).attr('name')
    var val = pageData[key];
    //  选择样式增加
    if ($(this).hasClass('checked')) {
      // console.log($('.group' + index).find(".selects[data-group" + index + "='" + val + "']")[0])
      // $('.group' + index).find(".selects[data-group" + index + "='" + val + "']").addClass('active').siblings().removeClass('active');
      $(this).siblings('.selects,.sex').each(function (indexs, item) {
        if ($(item).data('tagid') == val) {
          $(item).addClass('active')

        }
      })

      // $(".selects[data-" + key + "='" + val + "']").addClass('active').siblings().removeClass('active');

      // 性别
      // $(".sex[data-" + key + "='" + val + "']").addClass('active').siblings().removeClass('active');

    }

    // 值填充
    if (val) {
      $(this).val(val);
      $(this).parent().parent().parent('ul').show();
    }
  })
}

// 页面暂存功能
function tempstorage(el) {
  $('.tempstorage-tip').show();
  $('.sure').on('click', function () {

    var params = collectParamsFromTrue();
    localStorage.setItem(el, JSON.stringify(params))
    $('.tempstorage-tip').hide();
  });
  $('.cancel').on('click', function () {
    $('.tempstorage-tip').hide();
  })

}
// 查询参数是data-required=true的值
function collectParamsFromTrue() {
  var params = {};
  $(".param[data-required='true']").each(function () {
    params[$(this).attr('name')] = filterBlank($(this).val());
  });
  return params;
}







// 下一步时必选的未选中提示
function checkInput(el) {
  $("#" + el).find("input[data-required='true']").each(function (index, item) {
    if (!$(item).parents('.item').is(':hidden')) {
      var inputVal = $(item).val();
      if (isEmpty(inputVal)) {
        if ($(item).attr('name') == 'username') {
          $('.tips-changename').text('请输入')
        } else {
          $('.tips-changename').text('请选择')
        };
        $('.check-tips').text($(item).data('name'));
        $('.check-tips-box').show();
        setTimeout(function () {
          $('.check-tips-box').hide();
        }, 1500);
        return false;
      }
    }
  })
}


// 去除数组空置
function ClearNullArr(arr) {
  for (var i = 0, len = arr.length; i < len; i++) {
    if (!arr[i] || arr[i] == '' || arr[i] === undefined) {
      arr.splice(i, 1);
      len--;
      i--;
    }
  }
  return arr;
}

// 过滤时间
function filterTime(time) {
  timeStr = new Date(time.replace(/-/g, '/'))
  var month = (timeStr.getMonth() + 1) < 10 ? '0' + (timeStr.getMonth() + 1) : (timeStr.getMonth() + 1)
  var day = timeStr.getDate() < 10 ? '0' + timeStr.getDate() : timeStr.getDate()
  var hours = timeStr.getHours() < 10 ? '0' + timeStr.getHours() : timeStr.getHours()
  var minutes = timeStr.getMinutes() < 10 ? '0' + timeStr.getMinutes() : timeStr.getMinutes()
  return {
    m: month + '月' + day + '日',
    h: hours + ':' + minutes
  }
}

godferyZhu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
公众号开发之-201903月项目总结

在此立一个flag，每月15日之前发布上一个月的项目总结，以此督促自己坚持本月总共两个项目上线：1、现有公众号页面优化；2、新需求一键匹配开发。1，安卓系统部分机型背景色问题如下是对比（通过对比可以发现同一个页面在不同系统下的显示差异）原因：部分安卓机型上页面的背景色不是白色，需要手动设置。解决方案：最后的解决结果是在body上加上样式背景白色，解决）2，inp...
复制链接

扫一扫

专栏目录