微信小程序开发常用的方法有哪些

这篇文章主要介绍了微信小程序开发常用的方法有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

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; } 来去除边框

感谢你能够认真阅读完这篇文章，希望小编分享的“微信小程序开发常用的方法有哪些”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!