微信小程序開發(fā)常用的方法總結(jié)（代碼）

本篇文章給大家?guī)�來的�?nèi)容是關(guān)于微信小程序開發(fā)常用的方法總結(jié)（代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

1：wx:for=”{{}}”遍歷時，要加wx:key=""否則會有警告提示VM120:3 Now you can provide attr “wx:key” for a “wx:for” to improve performance.，但頁面不會報錯

2：事件方法傳參的寫法：bindtap=”toDetail” data-data=”{{item.url}}”

js:

toDetail:function(e){
  let url = e.currentTarget.dataset.data;
   wx.navigateTo({
      url: '../bookdetail/detail'
  });
 }

3.swiper自定義圓點樣式

<view class="wrap">
        <swiper class="swiper_book_img" current="{{currentSwiper}}" bindchange="swiperChange">
          <block wx:for="{{banner}}" wx:key="unique">
            <swiper-item class="slide_img">
              <image src="{{item.picUrl}}" class="slide-image" width="100%" height="110" ></image>
            </swiper-item>
          </block>
        </swiper>

         <!--重置小圓點的樣式 -->
         <view class="dots"> 
          <block wx:for="{{banner}}" wx:key="unique"> 
           <view class="dot{{index == currentSwiper ? ' active' : ''}}" id="{{index}}"></view> 
          </block> 
         </view>
      </view>

js:data: {
   // tab切換 
    currentSwiper: 0
    },swiperChange: function (e) {
 this.setData({
  currentSwiper: e.detail.current
 })
},

wxss:/*用來包裹所有的小圓點 */
.dots { 
display: flex; 
justify-content:center; 
flex-direction: row; 
margin:22rpx auto;
}
/*未選中時的小圓點樣式 */
.dot { 
width: 10rpx; 
height: 10rpx; 
border-radius: 50%;
 margin-right: 18rpx; 
 background-color: #969FA9; 
 opacity: 0.5;
 }
/*選中以后的小圓點樣式 */
.active { 
width: 20rpx; 
height: 10rpx; 
border-radius:20rpx;background-image: linear-gradient(-90deg, rgba(150,159,169,0.50) 24%, #F5F7FA 100%);
border-radius: 100px;
}

4.微信小程序獲取當(dāng)前頁面的url

使用getCurrentPages可以獲取當(dāng)前加載中所有的頁面對象的一個數(shù)組，數(shù)組最后一個就是當(dāng)前頁面

var pages = getCurrentPages()    //獲取加載的頁面
var currentPage = pages[pages.length-1]    //獲取當(dāng)前頁面的對象
var url = currentPage.route    //當(dāng)前頁面url
var options = currentPage.options    //如果要獲取url中所帶的參數(shù)可以查看options

可以寫成工具函數(shù)放到utils中：

/獲取當(dāng)前頁url/ function getCurrentPageUrl(){ 
    var pages = getCurrentPages()    //獲取加載的頁面 
    var currentPage = pages[pages.length-1]    //獲取當(dāng)前頁面的對象 
    var url = currentPage.route    //當(dāng)前頁面url 
    return url }
/獲取當(dāng)前頁帶參數(shù)的url/ function getCurrentPageUrlWithArgs(){ 
    var pages = getCurrentPages()    //獲取加載的頁面 
    var currentPage = pages[pages.length-1]    //獲取當(dāng)前頁面的對象 
    var url = currentPage.route    //當(dāng)前頁面url 
    var options = currentPage.options    //如果要獲取url中所帶的參數(shù)可以查看options

//拼接url的參數(shù)
var urlWithArgs = url + '?'
for(var key in options){
    var value = options[key]
    urlWithArgs += key + '=' + value + '&'
}
urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length-1)

return urlWithArgs

}
module.exports = { 
    getCurrentPageUrl: getCurrentPageUrl, 
    getCurrentPageUrlWithArgs: getCurrentPageUrlWithArgs }

5.A頁面跳轉(zhuǎn)到B頁面 標(biāo)題更新

全局的app.js 中設(shè)置參數(shù)存放標(biāo)題

globalData: { 
    userInfo: null, 
    bookTitle:”” 
  } A頁面跳轉(zhuǎn)方法中設(shè)置全局的標(biāo)題參數(shù) app.globalData.bookTitle =”標(biāo)題”
B頁面 onLoad:function(){ 
     wx.setNavigationBarTitle({ 
      title: app.globalData.bookTitle 
    }) 
  }

6 scroll組件

<scroll-view scroll-y="true" bindscrolltoupper="refresh" bindscrolltolower="loadMore" lower-threshold="50" bindscroll="scroll">

scroll組件綁定了 bindscroll=”scroll”方法，沒定義這個方法時 ，會出現(xiàn)這樣的錯誤提示，但不影響效果，滾動正常，去掉即可

7.微信小程序 —— button按鈕去除border邊框

在開發(fā)微信小程序組件框架時，我遇到了一個問題，微信小程序中的button組件有特定的css，背景可以用“background：none”去掉，但是邊框再用“border : none”去掉就不可以了，這也是微信小程序與h5的不同之處。
但是在微信小程序中使用:after選擇器就可以實現(xiàn)這一功能。

使用 button::after{ border: none; } 來去除邊框

相關(guān)推薦：

微信小程序如何獲取用戶session_key,openid,unioni（代碼）

小程序如何實現(xiàn)模板消息發(fā)送的功能（圖文）

以上就是微信小程序開發(fā)常用的方法總結(jié)（代碼）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！