微信小程序開發常用的方法有哪些

這篇文章主要介紹了微信小程序開發常用的方法有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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.微信小程序獲取當前頁面的url

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

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

可以寫成工具函數放到utils中：

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

//拼接url的參數
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頁面跳轉到B頁面 標題更新

全局的app.js 中設置參數存放標題

globalData: { 
    userInfo: null, 
    bookTitle:”” 
  } A頁面跳轉方法中設置全局的標題參數 app.globalData.bookTitle =”標題”
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”方法，沒定義這個方法時 ，會出現這樣的錯誤提示，但不影響效果，滾動正常，去掉即可

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

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

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序開發常用的方法有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!