注冊(cè)登錄

微信小程序開發(fā)核心之小程序點(diǎn)擊事件

2017-12-05
導(dǎo)讀:2017年6月14日,小程序點(diǎn)擊事件已經(jīng)是當(dāng)下微信小程序開發(fā)最熱門的話題,下面將從多方面來(lái)談?wù)勎⑿判〕绦蜷_發(fā)核心之小程序點(diǎn)擊事件相關(guān)的內(nèi)容。...

小程序點(diǎn)擊事件已經(jīng)是當(dāng)下微信小程序開發(fā)最熱門的話題,下面將從多方面來(lái)談?wù)勎⑿判〕绦蜷_發(fā)核心之小程序點(diǎn)擊事件相關(guān)的內(nèi)容。

 

網(wǎng)絡(luò)請(qǐng)求相關(guān)

bug: http狀態(tài)碼不管是什么,一律被解析成200

微信小程序開發(fā)核心之小程序點(diǎn)擊事件

要真正解決,只能等官方去fix這個(gè)bug了.

發(fā)出請(qǐng)求需要注意的幾個(gè)細(xì)節(jié)

1.header要設(shè)置正確:(為什么header還要我們自己設(shè)?很傻逼)

get請(qǐng)求時(shí)為

 

header:{            "content-type":'application/json'
       },

 

post請(qǐng)求時(shí)為:

 

header:{        "content-type":'application/x-www-form-urlencoded'
   },

 

2.header不要寫成head.(我之前就是這里寫錯(cuò)了,還一直以為是微信的bug....)
3.content-type要小寫.

4.參數(shù)的拼接

 

>get請(qǐng)求時(shí):
參數(shù)要自己變成xx=yyy&hhh=uuu的形式,并自己加問(wèn)號(hào),拼接在路徑后面,然后設(shè)置給url.不能直接將參數(shù)設(shè)置給data.微信是不會(huì)自動(dòng)給你裝拼的.

 

post請(qǐng)求時(shí):分兩種情況,
如果服務(wù)器api需要的是xx=yyy&hhh=uuu形式(key-value)的參數(shù),那么需要自己拼裝成這樣的一個(gè)字符串,然后設(shè)置給data

微信小程序開發(fā)核心之小程序點(diǎn)擊事件

如果服務(wù)器需要的是一個(gè)json,那么要將攜帶參數(shù)的對(duì)象的value進(jìn)行urlencode后,將整個(gè)json設(shè)置給data.

參數(shù)的拼接:

微信小程序開發(fā)核心之小程序點(diǎn)擊事件

公測(cè)開放后,強(qiáng)制要求請(qǐng)求全部為https

配置服務(wù)器的頁(yè)面,https是寫死的,不可更改

如果用了這個(gè)列表以外的域名,直接就被開發(fā)工具攔截,請(qǐng)求無(wú)法發(fā)出去,提示請(qǐng)求不在域名列表中。

解決辦法:服務(wù)器相關(guān)api升級(jí)ssl

可以用這個(gè)免費(fèi)的:Let's Encrypt

圖片

沒(méi)有設(shè)置初始圖的api,也沒(méi)有圖片緩存,于是,網(wǎng)絡(luò)不好時(shí),情況是這樣的:

微信小程序開發(fā)核心之小程序點(diǎn)擊事件

沒(méi)有設(shè)置圖片加載失敗后統(tǒng)一的處理,必須每個(gè)image標(biāo)簽都寫處理方式

下面兩張圖片加載失敗,于是一片空白.充分感受到api設(shè)計(jì)人員的業(yè)余。

微信小程序開發(fā)核心之小程序點(diǎn)擊事件

view標(biāo)簽不識(shí)別'/n'換行符,text組件可以.但是text組件會(huì)不響應(yīng)margin和padding值.

dialog(modal)的content無(wú)法解析換行符:

微信小程序開發(fā)核心之小程序點(diǎn)擊事件

對(duì)話框樣式太少,可修改的樣式太少

要彈出其他樣式,自定義樣式的,怎么辦?自己寫css吧.拿這個(gè)去改改:

 

  .dialogcover {    position: fixed;    font-family: Arial, Helvetica, sans-serif;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: rgba(0,0,0,0.5);    z-index: 9999;


   }    .dialogcover:target {        opacity:1;        pointer-events: auto;
   }    .dialogcontainer {        width: 80%;        position: fixed;        margin-left: 5%;        margin-right: 5%;        margin-top: 40%;        padding: 5px 20px 13px 20px;        border-radius: 10px;        background: #ffffff;        z-index: 99999;        opacity:1;
   }

 

toast有成功和loading狀態(tài),竟然沒(méi)有失敗狀態(tài),are you OK?更奇葩的是,它的寬度居然是寫死的,字一多就丑得要死

不管有沒(méi)有,我們自己直接拿成功的toast包裝好showFailToast()方法,,到處用著先。
最后如果官方真不提供,自己用css寫一個(gè)!

微信小程序開發(fā)核心之小程序點(diǎn)擊事件

點(diǎn)擊事件被上層view消費(fèi),還會(huì)傳遞到下層

點(diǎn)擊了去支付后,不僅會(huì)跳到支付頁(yè)面,還會(huì)調(diào)用后面整個(gè)item的點(diǎn)擊事件,跳到訂單詳情頁(yè)

注: 評(píng)論區(qū)提出來(lái)了,這個(gè)是因?yàn)槲矣胋indtap來(lái)響應(yīng)事件時(shí),事件還會(huì)一層層往下傳,用catchtap就不會(huì)了。

事件分為冒泡事件和非冒泡事件:

1.冒泡事件:當(dāng)一個(gè)組件上的事件被觸發(fā)后,該事件會(huì)向父節(jié)點(diǎn)傳遞

2.非冒泡事件:當(dāng)一個(gè)組件上的事件被觸發(fā)后,該事件不會(huì)向父節(jié)點(diǎn)傳遞。

3.bind事件綁定不會(huì)阻止冒泡事件向上冒泡,catch事件綁定可以阻止冒泡事件向上冒泡。

微信小程序開發(fā)核心之小程序點(diǎn)擊事件

navigateTo無(wú)法封裝到另一個(gè)js方法中,只能直接寫,而且失敗還不走失敗的回調(diào)

 

微信小程序開發(fā)核心之小程序點(diǎn)擊事件

微信小程序開發(fā)核心之小程序點(diǎn)擊事件

解決辦法: 盡量用navigator標(biāo)簽吧.

block的item不能講iteminfo整個(gè)obj傳回來(lái),只能傳基本數(shù)據(jù)類型

微信小程序開發(fā)核心之小程序點(diǎn)擊事件

拿到的是:

微信小程序開發(fā)核心之小程序點(diǎn)擊事件

通過(guò)scrollview來(lái)實(shí)現(xiàn)上拉加載更多,一直沒(méi)有觸發(fā)加載更多的事件

使用豎向滾動(dòng)時(shí),需要給scroll-view一個(gè)固定高度,通過(guò) WXSS 設(shè)置 height。
如果scroll-view高度設(shè)置為100%,則不能觸發(fā)上拉刷新和下拉加載事件......

wxml模板不生效

import 寫法有坑:

1.模板文件名與文件內(nèi)部的模板名必須一致,否則不生效.這是個(gè)大坑,我的之前不顯示就是因?yàn)閜agestate.wxml文件里模板名寫成了name="pageState"

2.路徑(../)代表退出當(dāng)前文件夾,退兩次就到了根目錄,然后進(jìn)入到template/pagestate.wxml這個(gè)路徑不必寫在wxml的最上方,任何地方都可以寫,最好就寫在用之前的一行.方便到處拷貝.

3.模板中數(shù)據(jù)多時(shí),引用時(shí)數(shù)據(jù)應(yīng)該封裝成data中一個(gè)字段,用...bean來(lái)拆解,自動(dòng)分發(fā).尤其是一個(gè)頁(yè)面中多次引用這同一個(gè)模板時(shí),只需要用bean1,bean2來(lái)區(qū)分即可,不需要改模板中的字段.所以,不要在模板文件中直接寫死.

例子:模板文件pagestate.wxml:

 

<template name="pagestate" >

   <view class ="empty_view" wx:if="{{!emptyHidden}}"   >
       <view class="center_wrapper" >
           <view class="center_child" >
               <icon type="info" size="45"/>
               <view class="msg"> {{emptyMsg}}</view>
           </view>
       </view>
   </view>

   <view class ="error_view" wx:if="{{!errorHidden}}"  >
       <view class="center_wrapper">
           <view class="center_child" >
               <icon type="warn" size="45" />
               <view class="msg"> {{errorMsg}}</view>
               <button  class = "retrybtn"  type="warn"  loading="{{btnLoading}}"
                        disabled="{{btnDisabled}}" catchtap="onRetry" hover-class="other-button-hover"> 點(diǎn)擊重試 </button>
           </view>
       </view>
   </view>
</template>

 

例子:模板使用時(shí)的格式:

 

  <import src="../../template/pagestate.wxml"/>
   <view >
       <template is="pagestate" data="{{...netStateBean}}"/>
   </view>

 

開發(fā)工具更新后

原先height:auto失效,必須指定image的高度為具體數(shù)值,不然高度為0.

tab切換

tab切換時(shí),注意wxml里和js里要用同一類型的值來(lái)判斷當(dāng)前,比如wxml里用string,那js里就不能用int

Data里,tabIndex的值只能取字符串(用單引號(hào)或雙引號(hào)),不能取int.

微信小程序開發(fā)核心之小程序點(diǎn)擊事件

iphone6上video標(biāo)簽適配問(wèn)題

設(shè)置fixed固定布局后仍然會(huì)隨著下方內(nèi)容一起向上滾動(dòng):

說(shuō)明:
Android基本上沒(méi)問(wèn)題,因?yàn)锳ndroid 微信會(huì)讓你下載QQ瀏覽器X5內(nèi)核,這個(gè)內(nèi)核是基于Chrome內(nèi)核,與小程序開發(fā)工具編譯運(yùn)行內(nèi)核一致,基本沒(méi)問(wèn)題。好像是Android2.1系統(tǒng)以上就替換成該內(nèi)核了。iOS則使用WKWebView內(nèi)核,存在兼容性問(wèn)題。官方給的調(diào)兼容性地址是http://res.imtt.qq.com/tbs/incoming20160819/home.html 和http://kangax.github.io/compat-table/es6/

有同學(xué)貼上了他的適配代碼:

微信小程序開發(fā)核心之小程序點(diǎn)擊事件

 

想了解更多微信小程序開發(fā)和微信小程序大全都可以進(jìn)入小程序開發(fā)了解。

重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見(jiàn)問(wèn)題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)

電話咨詢 微信咨詢 預(yù)約演示 0元開店