微信小程式開發常用的方法總結（程式碼）

這篇文章帶給大家的內容是關於微信小程式開發常用的方法總結（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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 ? &#39; active&#39; : &#39;&#39;}}" 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」去掉就不行了，這也是微信小程式與h5的不同之處。
但是在微信小程式中使用:after選擇器就可以實現這項功能。

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

相關推薦：

微信小程式如何取得使用者session_key,openid,unioni（程式碼） 

小程式如何實作範本訊息傳送的功能（圖文）

以上是微信小程式開發常用的方法總結（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！