微信H5记录

心已赠人 2023-02-18 10:59 24阅读 0赞

1、cdn引入jq

index.html中：
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    
    vue.config.js中：
    configureWebpack: config => {
        config.externals={
          'jquery' : '$',
        }
    }
    
    需要用到的页面中：
    import $ from 'jquery';

2、拿取baseURL

main.js中：
    const baseUrl = process.env.VUE_APP_BASE_API;
    vue.protype.$baseUrl = baseUrl

3、全局设定api和baseurl

public下新建config.js:
    let config = {
        url:"https://dcl.jnjadc.com",
        apiUrl:"https://campaign.jnjadc.com"
    }
    export default config
    
    main.js中：
    import win from '../public/config.js'
    const baseUrl =  win.apiUrl;
    Vue.prototype.$winbaseUrl = win

3、html5自动伸缩放

(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)
     <meta name="viewport" content="width=device-width,user-scalable=no" />
    
    (设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)
    <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    
    <meta name="apple-mobile-web-app-capable" content="yes">
    //#以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    //禁止手机双击放大页面

4、使用before加图标

.local-icon::before {
    		background: url('~@/static/images/local-pg.png') no-repeat;
    		background-size: 30rpx 30rpx;
    		content: '';
    		display: inline-block;
    		height: 30rpx;
    		line-height: 30rpx;
    		transform: translateY(12%);
    		width: 30rpx;
    	}

5、两列，使用flex布局两边对齐，最后一个左对齐

父添加:after
    .recommend-container-box:after {
    	content: '';
    	width: 48%;
    }
    
    //如果每行是4列
    /* 如果最后一行是3个元素 */
    .list{
          display: flex;
          justify-content: center;
          align-items: center;
          width:25%;
          height: 50px;
    }
    .list:last-child:nth-child(3n - 1) {
         margin-right: calc(25% + 25% / 2);
    }
    /* 如果最后一行是2个元素 */
    .list:last-child:nth-child(3n - 2) {
         margin-right: calc(50% + 25% / 2);
    }

6、弹出窗从底部上滑显示

<view v-if="showpop" :class="{'pop-box': showpop}">
    	<view class="content-box" :class="{'content-box-show': showpop_}">
    		内容
    	</view>
    </view>
    
    .pop-box{
    	position: fixed;
    	top: 0rpx; left: 0rpx; bottom: 0rpx; right: 0rpx;
    	height: 100%;
    	width: 100%;
    	background: rgba(0,0,0,0.50);
    	transition: 0.3s;
    	z-index: 1000;
    }
    .content-box-show{
    	transition: all 0.3s ease !important;
    	transform: translateY(0%) !important;
    }
    .content-box{
    	position: absolute;
    	bottom: 0;
    	width: 100%;
    	height: 570rpx;
    	background: $uni-app-bg-color;
    	border-radius: 30rpx 30rpx 0 0;
    	transition: all 0.3s ease;
    	transform: translateY(100%);
    	z-index: 1999;
    }
    
    
    toShowPop(){
    	this.showpop=true
    	setTimeout(()=>{
    			this.showpop_ = true
    	},20)
    },

移动端滚动不流畅

#app{
        width: 100%;
        height: 100%;
        background: #f9f9f9;
        overflow-y: auto;
        -webkit-overflow-scrolling:touch  //关键这里
    }

解决ios的input、select弹起键盘后，页面不回弹问题

<input class="item-input" type="text" v-model="name" placeholder="请输入你的姓名" @blur="blurIn"/>
    <select v-model="order.award_id" @blur="blurIn">
          <option v-for="item in awards" :value="item.id" :key="item.key">
            {
       { item.title }}
          </option>
    </select>
     
    export default {
        computed: {
            scrollHeight () {
                return document.documentElement.scrollTop || document.body.scrollTop || 0
            }
        }
        methods: {
            blurIn () {
                window.scrollTo(0, Math.max(this.scrollHeight - 1, 0))
            }
        }
    }

h5页面点击关闭时，发送请求

//App.vue页面中
        mounted() {
            let this_ = this
            window.addEventListener("unload", function(event) {//退出时发送使用时间
                let time = new Date().getTime() - this_.actiontime
                $.ajax({  //要发送同步
                    url:this_.$baseUrl+"/track/timeOnPage",
                    data:{"time":time},
                    type:"get",
                    async:false
                });
            });
        }
    
    //2：解决小程序使用web-view内嵌H5时，关闭小程序，h5的视频还在播放
    mounted() {
        document.addEventListener("visibilitychange", ()=> { 
    	    if (document.hidden) {
    		    if(this.$refs.videoPlayer){
    			    const Player = this.$refs.videoPlayer[0].player;
    			    Player.pause();
    		    }
    	    }
        });
    }

禁止移动端选中文字复制：

*{
        -webkit-user-select:none;
        -moz-user-select: none; 
        -ms-user-select: none;     
        user-select:none;/*禁用页面内容选中和复制操作*/        
        -webkit-touch-callout:none;/*禁用长按页面时的弹出菜单(iOS下有效)*/
        -webkit-tap-highlight-color:rgba(0,0,0,0);/*去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)*/         
    }

请求头

post+json：
    'content-type':'application/json;charset=UTF-8'
    
    表单/上传文件：
    'content-type':'application/x-www-form-urlencoded'

h5使用fixed定位盒子到底部时，适配iphonex

height:  calc(100px +  env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);