微信小程序开发常用的方法总结（代码）

本篇文章给大家带来的内容是关于微信小程序开发常用的方法总结（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1：wx:for=”{{}}”遍历时，要加wx:key=""否则会有警告提示VM120:3 Now you can provide attr “wx:key” for a “wx:for” to improve performance.，但页面不会报错

js:

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

        
          
            
              
            
          
        
     <!--重置小圆点的样式 -->
     <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></pre><pre >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;

}

使用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 }

全局的app.js 中设置参数存放标题

globalData: {

userInfo: null,bookTitle:””

} A页面跳转方法中设置全局的标题参数 app.globalData.bookTitle =”标题”

B页面 onLoad:function(){

wx.setNavigationBarTitle({

title: app.globalData.bookTitle

})

}

<img src="https://www.52php.cn/res/2019/01-08/21/50c1ec825e69dac7dd96dfb76eef7d5f.png"&gt;

scroll组件绑定了 bindscroll=”scroll”方法，没定义这个方法时 ，会出现这样的错误提示，但不影响效果，滚动正常，去掉即可

在开发微信小程序组件框架时，我遇到了一个问题，微信小程序中的button组件有特定的css，背景可以用“background：none”去掉，但是边框再用“border : none”去掉就不可以了，这也是微信小程序与h5的不同之处。
但是在微信小程序中使用:after选择器就可以实现这一功能。

使用 button::after{ border: none; } 来去除边框

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!