Résumé des méthodes couramment utilisées pour développer des mini-programmes WeChat (code)-Développement de mini-programmes-php.cn

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

不言

Libérer： 2018-09-07 17:41:34

original

4205 Les gens l'ont consulté

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: &#39;../bookdetail/detail&#39;
  });
 }

Copier après la connexion

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>

Copier après la connexion

js:data: {
   // tab切换 
    currentSwiper: 0
    },swiperChange: function (e) {
 this.setData({
  currentSwiper: e.detail.current
 })
},

Copier après la connexion

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;
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

//拼接url的参数
var urlWithArgs = url + &#39;?&#39;
for(var key in options){
    var value = options[key]
    urlWithArgs += key + &#39;=&#39; + value + &#39;&&#39;
}
urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length-1)

return urlWithArgs

Copier après la connexion

}
module.exports = { 
    getCurrentPageUrl: getCurrentPageUrl, 
    getCurrentPageUrlWithArgs: getCurrentPageUrlWithArgs }

Copier après la connexion

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 
    }) 
  }

Copier après la connexion

6 Le composant de défilement

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

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

Copier après la connexion

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!