Summary of commonly used methods for developing WeChat mini programs (code)

The content of this article is a summary (code) of commonly used methods for WeChat applet development. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1: wx:for="{{}}" When traversing, add wx:key="" otherwise there will be a warning VM120:3 Now you can provide attr "wx:key" for a “wx:for” to improve performance., but the page will not report an error

2: How to write parameters in the event method: bindtap="toDetail" data-data="{{item.url }}”

js:

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

3.swiper custom dot style

<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.WeChat applet gets the url of the current page

Use getCurrentPages can get an array of all page objects currently loading. The last one in the array is the current page.

var pages = getCurrentPages()    //获取加载的页面
var currentPage = pages[pages.length-1]    //获取当前页面的对象
var url = currentPage.route    //当前页面url
var options = currentPage.options    //如果要获取url中所带的参数可以查看options

can be written as a tool function and placed in 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 page Jump to page B title update

Set parameters in global app.js to store the title

globalData: { 
    userInfo: null, 
    bookTitle:”” 
  } A页面跳转方法中设置全局的标题参数 app.globalData.bookTitle =”标题”
B页面 onLoad:function(){ 
     wx.setNavigationBarTitle({ 
      title: app.globalData.bookTitle 
    }) 
  }

6 scroll component

<scroll-view scroll-y="true" bindscrolltoupper="refresh" bindscrolltolower="loadMore" lower-threshold="50" bindscroll="scroll">

The scroll component is bound to the bindscroll="scroll" method. When this method is not defined, an error message like this will appear, but it does not affect the effect. The scrolling is normal and can be removed.

7. WeChat Mini Program— —Button button removes border

When developing the WeChat applet component framework, I encountered a problem. The button component in the WeChat applet has specific css. The background can be removed using "background: none", but The border cannot be removed by using "border: none". This is also the difference between WeChat applet and h5.
But this function can be achieved by using the :after selector in the WeChat applet.

Use button::after{ border: none; } to remove the border

Related recommendations:

How to obtain user session_key, openid, uniononi in WeChat applet ( Code)

How the applet implements the function of sending template messages (pictures and texts)

The above is the detailed content of Summary of commonly used methods for developing WeChat mini programs (code). For more information, please follow other related articles on the PHP Chinese website!