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

百变鹏仔 6天前 #前端问答

文章标签程序开发

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

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>        <swiper>          <block>            <swiper-item>              <image></image>            </swiper-item>          </block>        </swiper>         <!--重置小圆点的样式 -->         <view>           <block>            <view></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    //当前页面urlvar 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-view>

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

7.微信小程序 —— button按钮去除border边框

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

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

文章推荐

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

2：事件方法传参的写法：bindtap=”toDetail” data-data=”{{item.url}}”

3.swiper自定义圆点样式

4.微信小程序获取当前页面的url

5.A页面跳转到B页面 标题更新

6 scroll组件

7.微信小程序 —— button按钮去除border边框

揭秘：魏则西离去真正的原因（派代网）

拒绝做微商被屏蔽拉黑，方法我有！（派代网）

【派代&amp;生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）

寻洲：微商警戒线，你知道几个？

拒绝做微商被屏蔽拉黑，方法我有！（）

5.A页面跳转到B页面标题更新

【派代&生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）