微信小程序開發小技巧——單擊事件傳參、動態修改樣式、輪播樣式修改等

一. 腳本部分：

1. 表達式無效的處理：

若是你發現本身編寫的表達式無效或者數據不展現，那麼請先檢查你的表達式是否有添加{{}}，小程序中所有都要添加的，只要是在模板中調用js中的數據

2. 獲取元素位置問題：

微信小程序是基於數據的，不支持DOM和BOM，因此沒有提供獲取元素位置的方法。

雖然有提供滾動事件、觸摸事件，也只能獲取觸摸點相關的位置，並不能直接獲取元素的位置，暫時還沒摸索到合適替代方案。

3. 單擊事件傳值：

在小程序中，你沒法再像h5那種直接在單擊事件方法中傳參了，它只提供了bingtap事件來綁定事件函數，參數須要由data-開頭的自定義屬性來傳遞：

官方的內容就不貼了，直接提供怎麼使用：

wxml:

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

js:

bindViewTap:function(event){ event.currentTarget.dataset.alphaBeta === 1 // - 會轉爲駝峯寫法
    event.currentTarget.dataset.alphabeta === 2 // 大寫會轉爲小寫
}

二. 樣式部分：

1. 微信小程序動態修改類樣式：

<view data-num="1" class="list-menu list-menu1 {{_num==1?'cur':''}}" bindtap="menuClick">頭條</view>

2. 輪播指示點樣式修改：

swiper .wx-swiper-dot{ width:10rpx; height:10rpx;
}

3. css樣式實現向右箭頭導航符號：

wxml:

<view class='arrow'/>

wxss:

.arrow{ width: 10rpx; height: 10px; border-top: 2px solid #999; border-right: 2px solid #999; transform: rotate(45deg);
}

 

三. 組件部分：

1. 自定義組件的使用容易出現的誤區：

Component構造器並無onLoad事件，因此就須要使用attached了，這個最容易忽略

 2. navigator導航組件無效：

有的時候你會發現，把另外一個寫好的已經能夠正常跳轉的導航複製過來改url，url拼寫也沒有問題，導航就是沒法跳轉嗎，這個時候第一個應該考慮的就是你這個導航已經被用在底部菜單欄中了，這是小程序的一個限制，沒辦法，只能用單擊事件作跳轉。

 

四. 框架部分：

1. 設置啓動頁面——方便調試當前編輯頁面：

app.json文件中，pages數組，把要設置爲啓動頁面的頁面路由放在數組第一位就行了。須要注意的是，這個數組中不能夠有任何註釋（會報錯）。