WeChat ミニ プログラム (コード) を開発するためによく使用される方法のまとめ

この記事は、WeChat ミニプログラムを開発するためによく使用される方法の概要 (コード) を提供します。必要な友人が参考になれば幸いです。

1: wx:for="{{}}" をトラバースするときは、wx:key="" を追加してください。それ以外の場合は、警告が表示されます VM120:3 これで、「wx:for」に属性「wx:key」を指定できるようになりました。 」を使用してパフォーマンスを向上させますが、ページはエラーを報告しません

2: イベントメソッドパラメータの書き方:bindtap="toDetail" data-data="{{item.url}}"

js:

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

3. スワイパーカスタムドットスタイル

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

rreerree

4. WeChat アプレットは現在のページの URL を取得します

getCurrentPages を使用して、現在読み込まれているすべてのページオブジェクトの配列を取得します。配列の最後のオブジェクトが現在のページです

utils でツール関数として記述することができます:

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

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

5. ページ A がページ B のタイトル更新にジャンプします

タイトルを保存するためにグローバル app.js にパラメータを設定します

/获取当前页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

6 スクロールコンポーネント

//拼接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

スクロールコンポーネントはbindscroll =”scroll”メソッドにバインドされています。このメソッドが定義されていない場合、このようなエラーメッセージが表示されますが、スクロールは正常に行われるため、削除するだけです

7。境界線を削除するためのボタン ボタン

WeChat アプレットの開発において、プログラム コンポーネント フレームワークを構築するときに、問題が発生しました。WeChat アプレットのボタン コンポーネントには、「background: none」を使用して背景を削除できます。ただし、「border: none」を使用して境界線を削除することはできません。これも WeChat アプレットと h5 の違いです。

ただし、この機能は、WeChat アプレットの :after セレクターを使用することで実現できます。

button::after{ border: none; } を使用して境界線を削除します

関連する推奨事項:

WeChat アプレットがユーザー session_key、openid、unioni (コード) を取得する方法

アプレットがテンプレート メッセージ送信を実装する方法機能 (写真とテキスト)

以上がWeChat ミニ プログラム (コード) を開発するためによく使用される方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。