Zusammenfassung häufig verwendeter Methoden zur Entwicklung von WeChat-Miniprogrammen (Code)

Der Inhalt dieses Artikels ist eine Zusammenfassung (Code) häufig verwendeter Methoden zur Entwicklung von WeChat-Miniprogrammen. Ich hoffe, dass er für Freunde in Not hilfreich ist.

1: Fügen Sie beim Durchlaufen von wx:for="{{}} wx:key="" hinzu, andernfalls wird eine Warnung VM120:3 angezeigt. Jetzt können Sie attr „wx:key“ angeben. für ein „wx:for“, um die Leistung zu verbessern., aber die Seite meldet keinen Fehler

2: So schreiben Sie Parameter in die Ereignismethode: bindtap="toDetail" data-data=" {{item.url }}“

js:

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

3.swiper benutzerdefinierter Punktstil

<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 zum Abrufen der URL der aktuellen Seite

Mit getCurrentPages kann ein Array aller aktuell geladenen Seitenobjekte abgerufen werden. Das letzte im Array ist die aktuelle Seite.

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

kann als Tool-Funktion geschrieben und in den Dienstprogrammen platziert werden

/获取当前页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 Seite Springe zu Seite B und aktualisiere den Titel

Lege Parameter in der globalen app.js fest, um den Titel zu speichern

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

6 Bildlaufkomponente

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

Die Scroll-Komponente ist an die bindscroll="scroll"-Methode gebunden. Wenn diese Methode nicht definiert ist, wird eine Fehlermeldung wie diese angezeigt, die jedoch keine Auswirkungen hat Der Effekt. Das Scrollen ist normal und kann entfernt werden.

7. WeChat Mini-Programm – Schaltfläche entfernt Rand

Bei der Entwicklung des WeChat-Applet-Komponenten-Frameworks ist ein Problem aufgetreten Im WeChat-Applet gibt es ein spezielles CSS. Der Hintergrund kann mit „background: none“ entfernt werden, der Rand kann jedoch nicht mit „border: none“ entfernt werden. Dies ist auch der Unterschied zwischen WeChat-Applet und h5.

Aber diese Funktion kann durch die Verwendung des :after-Selektors im WeChat-Applet erreicht werden.

Verwenden Sie button::after{ border: none; }, um den Rand zu entfernen

Verwandte Empfehlungen:

So erhalten Sie den Benutzer session_key, openid, unioni in WeChat Applet (Code)

Wie das Applet die Funktion des Sendens von Vorlagennachrichten (Bilder und Texte) implementiert

Das obige ist der detaillierte Inhalt vonZusammenfassung häufig verwendeter Methoden zur Entwicklung von WeChat-Miniprogrammen (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!