一 前言

筆者最近一直在開發(fā)京東app嵌入的h5項(xiàng)目和微信小程序商城項(xiàng)目，在此期間遇到很多坑。這篇文章主要是針對 h5| Hybrid | 微信小程序 三個(gè)方向來講述我遇到的坑，以及詳細(xì)講解我是如何解決問題的。

一直以來，移動(dòng)端適配就是一個(gè)令人頭疼的問題。如果想要吃透移動(dòng)端，還需要不少的實(shí)踐經(jīng)驗(yàn)，有的時(shí)候在pc端調(diào)試沒有問題，但是在m端就會(huì)出現(xiàn)問題。以下這16個(gè)問題是我在實(shí)際工作中遇到的，親自奉上給大家。希望大家收藏一波，以備不時(shí)之需。

喜歡筆者的可以「點(diǎn)贊 + 關(guān)注 」 一波，持續(xù)更新前端硬核文章。

M端h5踩坑總結(jié)

以下是京東嵌入h5，h5落地頁，遇到的問題。我用一個(gè)思維導(dǎo)圖表示出來。

1 ios：:postion:fixed 定位抖動(dòng)跳屏問題

背景

在開發(fā)京東app,Hybrid h5業(yè)務(wù)頁面的時(shí)候，遇到一個(gè)非常棘手的問題，因?yàn)檫@個(gè)頁面類似京東app商品詳情頁面的動(dòng)畫效果。動(dòng)畫效果如下所示。安卓手機(jī)正常，但是ios手機(jī)出現(xiàn)，滑塊抖動(dòng)問題，圖片會(huì)出現(xiàn)閃動(dòng)的效果。這個(gè)問題困擾了很久，網(wǎng)上搜索了大量的解決方案，都沒有實(shí)際解決問題，自己也嘗試了幾種方法，也沒有成功，當(dāng)時(shí)很奔潰??????，最后還是靈光一現(xiàn)，想到了一個(gè)巧妙的解決方案??。

整個(gè)流程就是，當(dāng)視圖容器向上滑動(dòng)的時(shí)候，商品卡片容器需要緩慢移動(dòng)，首先需要將商品卡片需要脫離標(biāo)準(zhǔn)流，設(shè)置定位position:fixed 固定定位。然后控制top值來控制滑塊的緩慢移動(dòng)。但是在容器向上滑動(dòng)的過程中，滑塊會(huì)出現(xiàn)抖動(dòng)，閃動(dòng)的效果。

??分析這個(gè)原因，應(yīng)該是ios對position表現(xiàn)不友好的原因，這種類似的原因在小程序里也很常見。

解決方案

網(wǎng)上搜索和自己探索的失敗解決方案

① 給頂級元素設(shè)置height:100% ( 并沒有奏效 ) 。

② 增加 transform: translate(0) 屬性 （ 并沒有奏效 ）

③ 改變布局由fixed 定位,改成absolute定位，滾動(dòng)條基于自身。（ 能夠從根本上解決偶爾跳屏的問題，但是隨之而來的就是ios 滾動(dòng)條問題，基于document才能有效觸發(fā)，遂放棄此方案）

④ 不改變布局的情況下，由fixed 定位,改成absolute定位，滾動(dòng)條基于document,定位值完全取決于數(shù)據(jù)驅(qū)動(dòng)。（能夠從根本上解決偶爾跳屏的問題，但是隨之而來的就是要不斷改變自身的top值 ，導(dǎo)致更新會(huì)慢的情況 ，用戶體驗(yàn)不好，流暢度欠佳，遂放棄此方案 ）

⑤ -webkit-overflow-scroll:touch解決滑動(dòng)無慣性（ 并沒有奏效 ）

⑥ background-attachment:fixed（ 并沒有奏效 ）

解決方案

試了好久，終于想到了一個(gè)解決方法。繼續(xù)使用 fixed 定位，因?yàn)槲覀冞@里需要通過定位，抖動(dòng)不是單純fixed定位的原因。和頻繁改變top值也有很大關(guān)系。放棄改變top值 ，運(yùn)用transform: translateY來使視圖上下移動(dòng)。

<view class="scroll_box" style={{ transform:`translateY(${ top }px)` }}    >   <!-- 很多東西 --></view>.scroll_box{    position:fixed;}

2 android問題：border-radius：50% 圓角被拉伸問題

背景

當(dāng)我們期望用 border-radius：50%； 來繪制圓點(diǎn)的時(shí)候。如果圓比較大可能不是很明顯，但是如果圓比較小的時(shí)候，會(huì)出現(xiàn)明顯的不圓，圓被拉伸的情況。

大致效果如下所示。

??分析原因， 在移動(dòng)端通常會(huì)適配不同的手機(jī)，所以使用rem布局，，rem 在換算為px時(shí)，會(huì)是一個(gè)帶小數(shù)點(diǎn)的值，安卓對小于1px的做了處理（不同瀏覽器對小于1px的處理方式不同，有的采用四舍五入，有的大于某個(gè)值展示1px否則就舍去），從而導(dǎo)致圓角不圓；在ios下就沒有這個(gè)問題。

解決方案

我們先把已知視圖寬高變成2倍 ,然后用 transform: scale(.5) 讓視圖縮小50% ,就可以在 android得到很圓的效果。親測這個(gè)方法非常奏效，形成的圓非常的圓。

我們舉個(gè)例子??：

<div class="round" ></div>

沒有做兼容之前的樣式，

.round{
    border-radius:50%;
    width:10px;
    heigth:10px;
}

改成

.round{
    border-radius:50%;
    width:20px;
    heigth:20px;
    transform: scale(.5);
}

這里用的taro-h5, px 會(huì)被自動(dòng)轉(zhuǎn)化成rem。

問題演變

有的時(shí)候我們在給元素設(shè)置高度非常小的時(shí)候也會(huì)出現(xiàn)這個(gè)問題。

<view class='box'  /> 

.box{
    width:100px;
    height:1px;
}

因?yàn)槲覀兏叨仍O(shè)置為height:1px,當(dāng)taro給轉(zhuǎn)換成rem的時(shí)候，也會(huì)出現(xiàn)四舍五入的情況，結(jié)果將1px弄沒了，變成了0px，于是乎就造成了1px元素?zé)o法顯示的bug，解決方案和上述的原理一樣。將高度變成原來的2倍，再通過transform: scaleY(.5); y方向變?yōu)樵瓉淼亩种弧?/p>

.box{
    width:100px;
    height:2px;
    transform: scaleY(.5);
}

3 iOS問題 ：最后子元素ios底部設(shè)置margin-bottom無效

背景

這個(gè)問題在ios環(huán)境下，還是很容易發(fā)生的。當(dāng)視圖容器的最后一個(gè)元素設(shè)置 margin-bottom ,期望距離整個(gè)容器視圖有一個(gè)距離的時(shí)候，發(fā)現(xiàn)在安卓手機(jī)正常，但是在ios下，會(huì)出現(xiàn)margin-bottom無效的情況。

解決方案

這個(gè)的解決方案也非常非常的簡單，將margin-bottom改成padding-bottom就能根本的解決問題。

例子??：

<div class="box" ></div>

.box{
   margin-bottom: 148px;
}

改成

.box{
   padding-bottom: 148px;
}

4 ios 屏幕上拉下滑出現(xiàn)空白

背景

手指按住屏幕下拉，屏幕頂部會(huì)多出一塊空白區(qū)域。手指按住屏幕上拉，底部多出一塊空白區(qū)域。空白區(qū)域的顏色，在不同app平臺(tái)打開，顏色會(huì)有差別，嵌入京東app h5中的空白背景色為白色，但是在微信中為灰色。

??分析原因: 在 iOS 中，手指按住屏幕上下拖動(dòng)，會(huì)觸發(fā) touchmove 事件。這個(gè)事件觸發(fā)的對象是整個(gè) webview 容器，容器自然會(huì)被拖動(dòng)，剩下的部分會(huì)成空白。

效果如下：

解決方案

1 障眼法,很管用

比如對于京東app這種白色背景,如果我們background也是白色的，完全可以用整個(gè)頂端容器，定位填充整個(gè)容器來解決這個(gè)問題。這樣視圖不會(huì)跟隨上拉下滑而移動(dòng)。如果空白顏色和背景顏色一致，視覺上就會(huì)抵消滑動(dòng)效果。根本上解決出現(xiàn)空白的問題。

一言不合上代碼??。

<div id="root" >
   <!-- 此處省略很多內(nèi)容  -->
</div>

#root{
    position: fixed;
    left:0;
    top:0;
    bottom: 0;
    right: 0;
}

2 監(jiān)聽事件，禁止上滑下滑

這種方法比較靠譜，俗話說解鈴還須系鈴人,這個(gè)問題根本原因是 touchmove 引起的，那么從根本上解決問題，還是要從touchmove這個(gè)事件入手。我們需要監(jiān)聽移動(dòng)端document 的 touchmove然后通過 preventDefault 方法，阻止同一觸點(diǎn)上所有默認(rèn)行為，比如滾動(dòng)事件。這里要注意的是什么時(shí)候，不讓滑動(dòng)，什么時(shí)候讓滑動(dòng)。

<div  ref="root"  ></div>const box = this.$refs.rootbox.addEventListener('touchmove',function(e){    /* 讓視圖容器正常滾動(dòng) */    e._isScroller = true}) /* 禁止上滑，下滑 */document.body.addEventListener('touchmove', function (e) {    if (e._isScroller) return    /*  阻止默認(rèn)事件 */    e.preventDefault()}, {    passive: false})

5 移動(dòng)端問題：input 的 placeholder 垂直方向不居中問題

背景

在開發(fā)移動(dòng)端的時(shí)候，會(huì)遇到 input 的 placeholder 垂直方向不居中的情況。

解決方案

input的placeholder會(huì)出現(xiàn)文本位置偏上的情況:PC端設(shè)置line-height等于height能夠?qū)R,而移動(dòng)端仍然是偏上,解決方案時(shí)是設(shè)置css line-height:normal;

html:

<input class="input"  />

樣式：

.input{
   line-height:normal;
}

6 IOS 滑動(dòng)問題 -webkit-overflow-scrolling : touch 卡住不動(dòng)問題

背景

在ios頁面向上向下滑動(dòng)的過程中，會(huì)出現(xiàn)卡頓，不流暢的現(xiàn)象,具體問題如下:

1 在safari上，使用了-webkit-overflow-scrolling:touch之后，頁面偶爾會(huì)卡住不動(dòng)。(中招) 2 在safari上，點(diǎn)擊其他區(qū)域，再在滾動(dòng)區(qū)域滑動(dòng)，滾動(dòng)條無法滾動(dòng)的(中招)。

在解決這個(gè)問題之前，我們先理解-webkit-overflow-scrolling的兩個(gè)屬性

1 auto: 使用普通滾動(dòng), 當(dāng)手指從觸摸屏上移開，滾動(dòng)會(huì)立即停止。 2 touch: 使用具有回彈效果的滾動(dòng),當(dāng)手指從觸摸屏上移開，內(nèi)容會(huì)繼續(xù)保持一段時(shí)間的滾動(dòng)效果。繼續(xù)滾動(dòng)的速度和持續(xù)的時(shí)間和滾動(dòng)手勢的強(qiáng)烈程度成正比。同時(shí)也會(huì)創(chuàng)建一個(gè)新的堆棧上下文。

解決方案

<div id="app" style="-webkit-overflow-scrolling: touch; ">    <div style="min-height:101%"></div> </div>

或

方法就是在webkit-overflow-scrolling:touch屬性的下一層子元素上， 將height加1%或1px。從而主動(dòng)觸發(fā)scrollbar。

7 移動(dòng)端適配：頁面放大縮小

背景

如果沒有使用taro等跨平臺(tái)框架構(gòu)建的h5,當(dāng)在M端展示h5的時(shí)候，雙擊或者雙指張開手指頁面元素，頁面會(huì)放大或縮小。

針對這個(gè)情況，實(shí)際不算一個(gè)bug，因?yàn)?code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">html本身就支持縮放。在pc端的時(shí)候，我們可以控制鼠標(biāo)滾輪控制頁面縮放，但是在移動(dòng)端這個(gè)行為也存在。但是對于嵌入的 M端 h5頁面，我們不需要這個(gè)功能。

解決方案

我們可以通過 meta 元標(biāo)簽標(biāo)準(zhǔn)中有一個(gè) viewport 屬性，用來控制頁面的縮放，一般用于移動(dòng)端。

我們先看看taro-h5是怎么適配的.

  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">

核心user-scalable=no ,沒錯(cuò)，就是通過這個(gè)屬性來阻止縮放行為的。

8 taro跨平臺(tái)開發(fā)H5: swiper組件橫向滾動(dòng)平鋪問題

背景

在用taro-vue構(gòu)建 h5應(yīng)用的時(shí)候，對于banner輪播圖部分，出現(xiàn)一個(gè)詭異的問題，就是水平方向輪播的時(shí)候，期望圖片是正常的輪播效果，但是初始化的時(shí)候，圖片垂直方向平鋪。

大致效果如下圖所示：

期望結(jié)果

實(shí)際結(jié)果

解決方案

大致代碼如下：

<swiper  class="swiper-wrap"  >  <swiper-item        v-for="(v,idx) in renderList"        :key="idx"        class="swiper-item"    >        <view class="swiper-wrap-item">            <image            mode="widthFix"            :src="v.path"            class="swiper-image"            />        </view>    </swiper-item></swiper>

這個(gè)棘手的問題在于不是每次都復(fù)現(xiàn)，由于這個(gè)頁面是商品詳情頁，問題會(huì)根據(jù)某一個(gè)商品出現(xiàn)。因?yàn)?nbsp;renderList 是通過后臺(tái)獲取的圖片列表，所以判斷問題是由渲染swiper -> 請求數(shù)據(jù)賦值renderList -> 再到swiper-item渲染圖片列表的過程中，某一個(gè)環(huán)節(jié)出了問題。遂改變了渲染方案， 所以采用 獲取數(shù)據(jù) -> 渲染swiper ->渲染swiperItem的方案。

改進(jìn)后的代碼如下：

<swiper  class="swiper-wrap"  v-if="renderList.length > 0"  >  <swiper-item        v-for="(v,idx) in renderList"        :key="idx"        class="swiper-item"    >        <view class="swiper-wrap-item">            <image            mode="widthFix"            :src="v.path"            class="swiper-image"            />        </view>    </swiper-item></swiper>

當(dāng) renderList獲取到數(shù)據(jù)之后，在依次渲染swiper，swiper-item。根本解決了這個(gè)問題。

微信小程序

以下在開發(fā)小程序的過程中遇到的兼容問題。

1 android問題：打開webview被微信攔截問題

背景

在微信小程序里開發(fā)webview h5的時(shí)候，在配置了合法域名，域名備案的情況下，出現(xiàn)了 ios 上正常打開，但是在 android 手機(jī)上出現(xiàn)了被攔截的情況。而且這些情況都是因?yàn)榇蜷_webview的 url中存在漢字的情況。

效果圖片

分析原因，解決方案

實(shí)際原因很簡單，安卓手機(jī)對于 http / https url如果存在漢字，需要用encodeURI對漢字進(jìn)行編碼處理就可以了。

 <web-view :src="webViewUrl" @message="handerMessage" /> this.webViewUrl  = commonUrl + '/pages/goods/index?name=' + encodeURI('外星人')

如果是接口請求，就這么寫

wx.request({   url: commonUrl + '/pages/goods/index?name=' + encodeURI('外星人'),   method: "GET",})

完美解決了問題。

webview 被微信攔截，詳細(xì)解決方案。

關(guān)于微信小程序中webview被攔截。我總結(jié)了一個(gè)詳細(xì)的方案，供大家參考，也是開發(fā)中踩坑實(shí)錄。

如果在微信小程序開發(fā)webview中 ， 被微信攔截，你需要這樣逐一排查。

① 首先檢查域名是否備案

首先檢查域名是否備案，如果域名沒有備案，是無法正常打開webview的，如果當(dāng)前域名是二級域名，那就看主域名有沒有備案，二級域名無需獨(dú)立備案。

② 配置業(yè)務(wù)域名

配置業(yè)務(wù)域名流程很簡單，首先登陸小程序后臺(tái) -> 開發(fā)，開發(fā)管理 - > 開發(fā)設(shè)置。

然后選擇業(yè)務(wù)域名 -> 點(diǎn)擊修改 -> 添加業(yè)務(wù)域名。

注意上邊這部分，需要按這上面的操作添加。添加成功后，會(huì)自動(dòng)添加到，合法域名列表中。

③ 如果 ① 和 ② 完成后，仍然被攔截

如果走完上邊的兩步，仍然被攔截。在2020年之前的域名，一般不會(huì)被攔截，但是微信對新申請的域名比較嚴(yán)格，需要先點(diǎn)擊申訴試試，如果申訴還不行的話，需要聯(lián)系微信團(tuán)隊(duì)相關(guān)人員解決問題，因?yàn)槲覀児居信c微信團(tuán)隊(duì)聯(lián)系的部門，所以無須我們聯(lián)系。

④ 如果只有安卓手機(jī)被攔截

如果只有安卓手機(jī)被攔截的情況，請按照上面的方法，編碼帶漢字的url。

2 iOS問題：微信小程序1rpx border ios真機(jī)顯示不全問題

背景

微信小程序在iphone低版本手機(jī)(iphone6 ,6p),如果多個(gè)視圖容器排列(水平和豎直方向都會(huì)存在)，可能會(huì)出現(xiàn)個(gè)別邊框顯示不全的問題。

效果如下圖所示：

<view class="father" >
    <view class="item" >商品1</view>
    <view class="item" >商品2</view>
    <view class="item" >商品3</view>
    <view class="item" >商品4</view>
</view>

.father{
    width: 696rpx;
    height: 60rpx; 
    font-size: 28rpx;
    color: #01b5b5;
    margin: 0 auto;  
   }
   .item{
    height: 60rpx;
    line-height: 60rpx;
    border: 1rpx solid #01b5b5;
    float: left;
    border-radius: 10rpx;
    padding: 0 20rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
}

解決方案

經(jīng)過測試得來一組數(shù)據(jù) ,注意步驟1中加粗的文本.label-con類中width:696rpx,將標(biāo)簽的父容器寬度設(shè)置為下面的值都會(huì)出現(xiàn)這個(gè)692 693 696 697 700 701 704 705 708 709。我們把這組數(shù)字除以2。

692/2=346,693/2=346.5,696/2=348,697/2=348.5,700/2=350,701/2=350.5,704/2=352,705/2=352.5,708/2=354,709/2=354.5

**分析結(jié)果:**當(dāng)標(biāo)簽的父容器寬度(單位rpx)÷2的值為偶數(shù)或偶數(shù).5的時(shí)候會(huì)出現(xiàn)該bug,那么我們可以推到出用200.52=401,3022=604等等都會(huì)重現(xiàn)這個(gè)bug。那么解決方案油然而生。

第一種：設(shè)置高度/寬度到安全的值

第一種方式是設(shè)置標(biāo)簽父容器的寬度到無bug值，即(奇數(shù)或奇數(shù).5)2,例如2812rpx,281.5*2rpx可以解決;

第二種：放一個(gè)1rpx的元素占位。(親測有效)

<view class="father" >
    <view class="hold" />
    <view class="item" >商品1</view>
    <view class="item" >商品2</view>
    <view class="item" >商品3</view>
    <view class="item" >商品4</view>
</view>

.hold{
    width: 1rpx;
    height: 100%;
    float: left;
}

效果如下，完美的解決了這個(gè)問題。

3 小程序問題: scroll-view 不滑動(dòng)問題

背景

相信很多同學(xué)在開發(fā)微信小程序的時(shí)候都會(huì)遇到scroll-view不滑動(dòng)的情況，造成scroll-view不滑動(dòng)的原因有會(huì)多，橫向和豎向不滑動(dòng)的原因也不同，接下來我會(huì)分別從橫向和豎向分別介紹造成滑動(dòng)的原因。

橫向：

豎向：

解決方案

1 豎直方向

對于豎直方向的滑動(dòng)，造成原因如下:

① scroll-view 的 scroll-y 是否為 true

<scroll-view :scroll-y="true" >
  <!-- 此處省略很多東西 -->
</scroll-view>

② scroll-view 必須設(shè)置具體的高度，如果沒有設(shè)置高度，或者直接繼承父元素高度100%,那么 scroll-view豎直方向?qū)o效。我們必須動(dòng)態(tài)獲取scroll-height因?yàn)樵诓煌吞柺謾C(jī)，都要達(dá)到完美的效果

如何正確獲取scroll-view高度

情況一 scroll-view 在中間的情況：

const scrollHeight = windowHeight - scrollTop - scrollBottom

情況二 scroll-view 靠底部的情況 ：

const scrollHeight = windowHeight - scrollTop

③ 檢查 scroll-view 是否設(shè)置了 overflow-y: auto; 等滑動(dòng)屬性。

<scroll-view :scroll-y="true" class="scroll_box"  >  <!-- 此處省略很多東西 --></scroll-view>.scroll_box{    height:500px;    overflow-y: auto;}

2 水平方向

對于水平方向的滑動(dòng)，造成原因如下:

① scroll-view 的 scroll-x 是否為 true

<scroll-view :scroll-x="true" >
  <!-- 此處省略很多東西 -->
</scroll-view>

② 不要設(shè)置 display:flex; 等情況 ,讓子元素設(shè)置 display:inline-block

③ scroll-view 設(shè)置樣式 white-space: nowrap;

<scroll-view :scroll-x="true"  style="white-space: nowrap;" ></scroll-view>

4 低版本android手機(jī)：原生組件層級問題

背景

這個(gè)是很久之前做的一個(gè)類似地圖的項(xiàng)目，在地圖組件上，有一個(gè)view,在高版本手機(jī)上，正常顯示，但是在低版本安卓手機(jī)上，會(huì)出現(xiàn)view只有文字能看見，背景完全被原生組件覆蓋，設(shè)置層級也沒有效果。

解決方案

后來查了微信文檔，才明白原生組件和原生組件的限制。

小程序中的部分組件是由客戶端創(chuàng)建的原生組件，這些組件有：

camera canvas input（僅在focus時(shí)表現(xiàn)為原生組件） live-player live-pusher map textarea video

原生組件的使用限制

由于原生組件脫離在 WebView 渲染流程外，因此在使用時(shí)有以下限制：

①原生組件的層級是最高的，所以頁面中的其他組件無論設(shè)置 z-index 為多少，都無法蓋在原生組件上。后插入的原生組件可以覆蓋之前的原生組件。

②原生組件還無法在 picker-view 中使用。基礎(chǔ)庫 2.4.4 以下版本，原生組件不支持在 scroll-view、swiper、movable-view 中使用。

③部分CSS樣式無法應(yīng)用于原生組件，例如：無法對原生組件設(shè)置 CSS 動(dòng)畫，無法定義原生組件為 position: fixed，不能在父級節(jié)點(diǎn)使用 overflow: hidden 來裁剪原生組件的顯示區(qū)域。

④原生組件的事件監(jiān)聽不能使用 bind:eventname 的寫法，只支持 bindeventname。原生組件也不支持 catch 和 capture 的事件綁定方式。原生組件會(huì)遮擋 vConsole 彈出的調(diào)試面板。在工具上，原生組件是用web組件模擬的，因此很多情況并不能很好的還原真機(jī)的表現(xiàn)，建議開發(fā)者在使用到原生組件時(shí)盡量在真機(jī)上進(jìn)行調(diào)試。*

替代方案

cover-view 與 cover-image 為了解決原生組件層級最高的限制。小程序?qū)ｉT提供了 cover-view 和 cover-image 組件，可以覆蓋在部分原生組件上面。這兩個(gè)組件也是原生組件，但是使用限制與其他原生組件有所不同。

5 ios問題: 微信scroll-view內(nèi)部定位元素抖動(dòng)問題

背景

ios環(huán)境下，scroll-view標(biāo)簽里面如果有，position:absolute的元素。當(dāng)scroll-view滑動(dòng)的過程中，定位的元素會(huì)出現(xiàn)抖動(dòng)的情況。

??分析原因，還是 scroll-view 和 ios兼容性的原因造成的。

解決方案

針對這個(gè)抖動(dòng)問題，解決方案也是很簡單，我們把定位的元素從scroll-view拿出來。就能根本解決這個(gè)問題。

<view class="box" >    <scroll-view class="scroll_box"  :scroll-y="true" >        <view class="current" >我是定位元素</view>    </scroll-view></view>.box{  }.scroll_box{    height:500px;    overflow-y: auto;    position:relative;}.current{   position:absolute;   left:0;   top:0;}

改成

<view class="box" >    <scroll-view class="scroll_box"  :scroll-y="true" >    </scroll-view>    <view class="current" >我是定位元素</view></view>.box{    position:relative;}.scroll_box{    height:500px;    overflow-y: auto;}.current{   position:absolute;   left:0;   top:0;}

6 微信小程序跳轉(zhuǎn)微信小程序，第二次跳轉(zhuǎn)無效

背景

在開發(fā)小程序的時(shí)候，有一個(gè)小程序跳轉(zhuǎn)另外一個(gè)小程序的場景，第一次的時(shí)候沒有任何問題，但是當(dāng)從跳轉(zhuǎn)的目標(biāo)小程序，返回到當(dāng)前小程序之后，第二次跳轉(zhuǎn)的時(shí)候，發(fā)現(xiàn)跳轉(zhuǎn)功能失效了，無法再次跳轉(zhuǎn)。我們的跳轉(zhuǎn)邏輯是寫在一個(gè)小程序過渡頁面的生命周期中的。具體流程圖如下所示：

解決方案

先看看跳轉(zhuǎn)小程序方法

wx.navigateToMiniProgram({
    appId:'appId',
    path:'路徑',
    extraData:'需要傳遞給小程序的數(shù)據(jù)',
    success(){}, // 成功回調(diào)
    fail(){}, //失敗回調(diào)
    complete(){} //無論成功/失敗，都會(huì)執(zhí)行完成方法。
})

??這到底是為什么呢，這個(gè)問題困擾我很久，查閱了相關(guān)資料，微信文檔都沒找到相關(guān)的解決方案。但是微信文檔有這么一句話，需要用戶觸發(fā)跳轉(zhuǎn)，從 2.3.0 版本開始，若用戶未點(diǎn)擊小程序頁面任意位置，則開發(fā)者將無法調(diào)用此接口自動(dòng)跳轉(zhuǎn)至其他小程序 最后發(fā)現(xiàn)是第二次跳轉(zhuǎn)的過程中，由于不是用戶主動(dòng)行為(點(diǎn)擊事件等人為主動(dòng)的行為)，而是又過渡頁面的生命周期執(zhí)行的跳轉(zhuǎn)小程序，所以微信被判定無效的跳轉(zhuǎn)，就會(huì)直接走跳轉(zhuǎn)失敗的邏輯,webview里面的點(diǎn)擊跳轉(zhuǎn)事件不算是用戶的主動(dòng)行為????。

所以我們在過渡頁進(jìn)行一判斷，如果是第二次跳轉(zhuǎn)，先彈出彈窗，讓用戶主動(dòng)點(diǎn)擊，觸發(fā)用戶主動(dòng)行為。然后再跳轉(zhuǎn)小程序。

7 taro小程序 scroll-view 下滑，突然置頂問題

背景

在用taro-vue搭建小程序的時(shí)候，在scroll-view向下滑動(dòng)的時(shí)候，會(huì)出現(xiàn)一個(gè)詭異情況，就是scroll-view會(huì)因?yàn)橐粋€(gè)兄弟元素的顯示隱藏，而突然置頂。

結(jié)構(gòu)是這樣的。

<view>    <scroll-view :scroll-y="true" >       <!-- 此處省略很多 -->    </scroll-view>    <view  class="current" v-show="currentShow" > </view></view>

當(dāng)scroll-view滑動(dòng)的時(shí)候，想用變量currentShow控制scroll-view顯示隱藏，但是 currentShow一旦改變，就會(huì)引起 scroll-view 突然置頂。

解決方案

scroll-view的問題還真是多呀，這個(gè)問題曾困擾筆者很久, taro3.0 taro-vue畢竟不夠成熟，會(huì)有很多想象不到的問題，如果想用taro,我這里推薦taro2.0比較成熟。

廢話不多說，這里介紹兩個(gè)解決方案。

1 將當(dāng)前元素節(jié)點(diǎn)放在 scroll-view元素內(nèi)部。

<view>    <scroll-view :scroll-y="true" >       <!-- 此處省略很多 -->        <view  class="current" v-show="currentShow" > </view>    </scroll-view> </view>

2 將v-if 改變成 v-show

<view>    <scroll-view :scroll-y="true" >       <!-- 此處省略很多 -->    </scroll-view>    <view  class="current" v-if="currentShow" > </view></view>

8 小程序cavans問題，生成二維碼問題。

問題匯總

canvas 遇到的坑

① 關(guān)于canvas 寬高以及縮放比問題，繪制的元素變形，畫布的高度真得等于cavans標(biāo)簽設(shè)置的寬高么？

② canvas怎么繪制疊在一起的兩張圖片，并控制層級？

③ 如何用canvas繪制，多行文本？

④ 如何根據(jù)設(shè)計(jì)稿，精確還原海報(bào)各個(gè)元素位置問題。

⑤ canvas怎么繪制base64的圖片？

⑥ 如何繪制網(wǎng)絡(luò)的圖片,兩種canvas畫布api，繪制圖片有什么區(qū)別完成？

生成二維碼遇到的坑

① 如何正確選型生成二維碼工具？

② 生成的二維碼，識別不出來怎么辦？

③ 如何繪制二維碼上的logo？

解決方案

這些問題都會(huì)在筆者的另一篇文章中找到答案，文章的傳送門是：

「強(qiáng)烈建議收藏」小程序canvas繪制帶二維碼海報(bào)全流程(枚舉踩坑，詳解解決方案)

總結(jié)

這些問題都是筆者在實(shí)際工作中遇到的問題，吐血總結(jié)踩坑實(shí)錄，為了讓大家少走彎路。送人玫瑰，手留余香，閱讀的朋友可以給筆者點(diǎn)贊，關(guān)注一波 ，陸續(xù)更新前端超硬核文章。

參考資料

微信小程序1rpx border ios真機(jī)顯示不全問題分析及解決方案

微信官方文檔

如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我三個(gè)小忙：

1. 點(diǎn)個(gè)「在看」，讓更多的人也能看到這篇內(nèi)容（喜歡不點(diǎn)在看，都是耍流氓 -_-）
2. 歡迎加我微信「TH0000666」一起交流學(xué)習(xí)...
3. 關(guān)注公眾號「前端Sharing」，持續(xù)為你推送精選好文。