Résumé des méthodes couramment utilisées pour développer des mini-programmes WeChat (code)

Le contenu de cet article est un résumé (code) des méthodes couramment utilisées pour développer des mini-programmes WeChat. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1 : Lors de la traversée de wx:for="{{}}", ajoutez wx:key="" sinon il y aura un avertissement VM120:3 Vous pouvez maintenant fournir l'attr "wx:key" pour un « wx:for » pour améliorer les performances., mais la page ne signalera pas d'erreur

2 : Comment écrire des paramètres dans la méthode événementielle : bindtap="toDetail" data-data=" {{item.url }}”

js :

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

3.style de point personnalisé 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 ? &#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. obtient l'URL actuelle de la page

peut être utilisée pour obtenir un tableau de tous les objets de page en cours de chargement à l'aide de getCurrentPages. Le dernier du tableau est la page actuelle

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

qui. peut être écrit comme une fonction d'outil et placé dans 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 La page A passe à la page B et le titre est mis à jour

Set. paramètres dans l'app.js global pour stocker le titre

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

6 Le composant de défilement

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

le composant de défilement est lié à la méthode bindscroll="scroll". Lorsque cette méthode n'est pas définie, un message d'erreur comme celui-ci apparaîtra, mais cela n'affecte pas l'effet, le défilement est normal, supprimez-le simplement

7. - bouton bouton pour supprimer la bordure

Lors du développement du framework de composants de l'applet WeChat, j'ai rencontré un problème, le composant bouton dans l'applet WeChat a un CSS spécifique. L'arrière-plan peut être supprimé avec "background: none", mais. la bordure ne peut pas être supprimée avec "border: none". C'est aussi la différence entre l'applet WeChat et h5.
Mais cette fonction peut être obtenue en utilisant le sélecteur :after dans l'applet WeChat.

Utilisez button::after{ border: none; } pour supprimer la bordure

Recommandations associées :

Comment obtenir l'utilisateur session_key, openid, unioni dans WeChat applet ( Code)

Comment l'applet implémente la fonction d'envoi de messages modèles (images et textes)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!