H5开发问题总结

你的星辰大海

已于 2022-03-11 17:37:59 修改

阅读量439

点赞数

分类专栏： H5开发中问题文章标签： javascript 前端

于 2022-03-08 15:08:17 首次发布

本文链接：https://blog.csdn.net/MMryyy/article/details/123353964

版权

H5开发中问题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、fixed定位（滑动置顶）窗口出现抖动的情况

问题原因：不能在设置fixed属性的元素上，计算距离顶部的高度

<div class="hz_container">
      <div class="hz_tab"></div>
</div>
//js
$(window).scroll(function (){
//这里设置计算父元素的距离顶部top，在子元素中设置fixed（$('.hz_tab').offset().top; ）会导致页面窗口发生抖动
var top = $('.hz_container').offset().top; 
var scrollTop = $('html').scrollTop() || $('body').scrollTop()
if (scrollTop > top) {
	$('.hz_container').addClass('fixed')
	}else{
		$('.hz_container').removeClass('fixed')
	}
}

2 、h5跳转小程序

借鉴：https://segmentfault.com/a/1190000038343604

1、Html 文件引入<wx-open-launch-weapp>标签
2、引入weixin.js 目前是1.6.0版本
3.调用wx.config 在openTagList中加入要使用的开放标签
4具体实例见个人页面:跳转小程序标签
<wx-open-launch-weapp  username="gh_341f787177a5"
                path="/pages/activity/index.html" class="lajiweixin">
                <template class="lajiweixin">
                    <style>
                        .lbtn {
                          display: block;
                          width: 10rem;
                          height: 23.0667rem;
                          color: #fff;
                          opacity: 0;
                          -webkit-tap-highlight-color: transparent;
                        }
                      </style>
                    <button class="lbtn">打开小程序</button>
</template>
</wx-open-launch-weapp>

3、收藏网址

1、git第一次提交代码到码云：https://blog.csdn.net/weixin_33737134/article/details/93831113

2、Nunjucks模板语法：

http://mozilla.github.io/nunjucks/cn/templating.html#global-functions
Template模板：https://aui.github.io/art-template/zh-cn/docs/syntax.html

3Charles抓包工具安装教程

https://blog.csdn.net/u011578734/article/details/108055765?utm_term=%E6%8A%93%E5%8C%85%E5%B7%A5%E5%85%B7charles%E5%AE%89%E8%A3%85%E6%AD%A5%E9%AA%A4&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allsobaiduweb~default-1-108055765&spm=3001.4430