WeChat アプレットを学ぶ 04 日目 - ページナビゲーション、パラメータの受け渡し、パラメータの受信、プルダウンの更新

1. ページナビゲーション
2. ページパラメータの転送
- 2.1 宣言型ナビゲーションパラメータの受け渡し
- 2.2 プログラムによるナビゲーションパラメータの転送
3. onLoadでナビゲーションパラメータを受け取る
4. ページイベント
5. 拡張子カスタマイズされたコンパイルモード
6. wxs-handle 携帯電話番号
要約する

1. ページナビゲーション

1. ページナビゲーションを理解する

1.1 ページナビゲーションとは何ですか?

页面导航 は、页面 の間の 相互跳转 を指します。たとえば、ブラウザでページナビゲーションを実装するには 2 つの方法があります。

<a> 链接
location.href

1.2 ミニプログラムでページナビゲーションを実装する 2 つの方法

宣言型ナビゲーション
●<navigator>ページ上で
ナビゲーションコンポーネントを宣言します ● クリックする <navigator>コンポーネントはページジャンプを実装します
プログラムによるナビゲーション
●ミニプログラムのナビゲーション API を呼び出してページジャンプを実現します

2. 宣言型ナビゲーション

2.1 tabBar ページに移動します。

tabBar页面 は、tabBar として設定されたページを指します。

<navigator> コンポーネントを使用して指定した tabBar ページにジャンプする場合は、url 属性とopen-type属性。

url はリダイレクトされるページのアドレスを表します。/ で始まる必要があります。
open-typeジャンプする方法を示します。switchTab

<!--pages/home/home.wxml-->
<button type="primary">
	<navigator url="/pages/contact/contact" open-type="switchTab">
		跳转到我们-tabBar页面
	</navigator>
</button>

ここに画像の説明を挿入します

2.2 非タブバーページに移動する

非tabBar页面tabBar として構成されていないページを指します。

<navigator> コンポーネントを使用して通常の 非tabBar页面 にジャンプする場合は、url 属性と < /a >open-type属性。

url は、ジャンプするページのアドレスを示します。/ で始まる必要があります。
open-type ジャンプする方法を示します。navigate

<!--pages/home/home.wxml-->
<button type="primary">
	<navigator url="/pages/contact/contact" open-type="switchTab">
		跳转到我们-tabBar页面
	</navigator>
</button>
-------------
<button type="primary">
	<navigator url="/pages/info/info" open-type="navigate">
		导航到非tabBar页面
	</navigator>
</button>

ここに画像の説明を挿入します

注: わかりやすくするために、非tabBar页面 に移動するときは、open-type="navigate"プロパティに移動します。可以省略

2.3 戻るナビゲーション

前のページまたは複数レベルのページに戻る場合は、open-type 属性と delta 属性を指定する必要があります。ここで:

open-type の値は navigateBack でなければなりません。これは、戻るナビゲーションが必要であることを示します
delta の値は数字 であり、後退するレベルを示します
。サンプルコードは次のとおりです。

<!--pages/info/info.wxml-->
<text>我是非tabBar页面info</text>
<button type="primary">
	<navigator open-type="navigateBack" delta="1">
		返回上一页
	</navigator>
</button>

ここに画像の説明を挿入します

注: 簡単にするために、前のページに戻ると、可以省略delta 属性が表示されます。これは、その 默认值 が 1

3. プログラムによるナビゲーション

3.1 tabBar ページに移動します。

wx.switchTab(Object object) メソッドを呼び出してtabBar ページにジャンプします。このうち、 Object参数对象 の属性リストは次のとおりです。

1699119392131)

例：

//html模板
<!-- 编程式导航：跳转到tabBar页面 -->
<button type="primary" bindtap="gotoMessage">跳转到消息页面</button>

//js中的事件处理函数
//编程式导航-跳转到tabBar消息页面
gotoMessage(){
    
    
    wx.switchTab({
    
    
      url: '/pages/message/message',
    })
},

ここに画像の説明を挿入します

3.2 非タブバーページに移動する

は wx.navigateTo(Object object) メソッドを呼び出し、非tabBar的页面 にジャンプできます。このうち、 Object参数对象 の属性リストは次のとおりです。
ここに画像の説明を挿入します

   ---------------------编程式导航--------------------
<!-- 编程式导航:跳转到非tabBar页面 -->
<button type="primary" bindtap="gotoInfo">跳转到Info页面</button>

  // 编程式导航-跳转到非tabBar消息页面
    gotoInfo(){
    
    //info页面
        wx.navigateTo({
    
    
          url: '/pages/info/info',
        })
    },

ここに画像の説明を挿入します

3.3 戻るナビゲーション

前のページまたは複数レベルのページに戻るには、呼び出しwx.navigateBack(Object object) メソッド。その中でObject参数对象オプションの属性リストは次のとおりです:

ここに画像の説明を挿入します


<!-- 编程式导航后退 -->
编程式导航后退
<button bindtap="gotoBack" type="primary">后退</button>

// 非tabBar页面后退一页-事件处理函数
gotoBack(){
    
    
    wx.navigateBack()//不使用delta，默认后退一页
    // wx.navigateBack({
    
    
    //     delta:1//指定返回层级数
    // })
}

2. ページパラメータの転送

2.1 宣言型ナビゲーションパラメータの受け渡し

navigator コンポーネントのurl属性 は、ジャンプ先のページへのパスを指定するために使用されます。同時に路径的后面还可以携带参数:

参数与路径之间使用 ?分隔
参数键与参数值用 =相连
不同参数用 &分隔

<!--html模板-->
---------------------声明式导航传参--------------------
<!-- 声明式导航传参 -->

<button type="primary">
	<navigator url="/pages/info/info?name=秦始皇&age=20">
		传参到info页面
	</navigator>
</button>

ターゲットページはまだ受信されていませんが、パラメータは渡されています。
ここに画像の説明を挿入します

2.2 プログラムによるナビゲーションパラメータの転送

がwx.navigateTo(Object object) メソッドを呼び出してページにジャンプするとき、パラメータを渡すこともできます。コード例は次のとおりです:

//html模板
---------------------编程式导航传参--------------------
<!-- 编程式导航传参 -->
<button type="primary" bindtap="gotoInfo2">传参Info页面</button>

//js文件
 // 编程式导航-跳转到非tabBar消息页面-传参
 gotoInfo2(){
    
    //info页面
  wx.navigateTo({
    
    
    url: '/pages/info/info?name=张三&sex=男',
  })
},

ここに画像の説明を挿入します

3. onLoadでナビゲーションパラメータを受け取る

声明式导航传参 または 编程式导航传参 で保持されるパラメータは、onLoad事件 で直接取得できます。サンプルコードは次のとおりです。


<!--html模板-->
---------------------声明式导航传参--------------------
<!-- 声明式导航传参 -->
<button type="primary">
	<navigator url="/pages/info/info?name=秦始皇&age=20">
		传参到info页面
	</navigator>
</button>

---------------------编程式导航传参--------------------
<!-- 编程式导航传参 -->

<button type="primary" bindtap="gotoInfo2">传参Info页面</button>

info.js ファイルの onLoad はパラメータを受け取ります。

 /**
 * 生命周期函数--监听页面加载
 */
onLoad(options) {
    
    
    //options就是导航传递过来的参数对象
    console.log(options);
    this.setData({
    
    
        query:options//赋值给data中的query
    })
},

ここに画像の説明を挿入します

4. ページイベント

4.1 プルダウンして更新します

4.1.1 プルダウンリフレッシュとは

定義:下拉刷新 は、画面上での指のスライド操作を指します。重新加载页面数据的行为;

プルダウン更新はモバイル側の独自用語で、画面上で指を下にスライドさせてページデータを再読み込みする行為を指します。

4.1.2 プルダウン更新を有効にする

ふたつのやり方：

全局开启下拉刷新

在app.jsonのwindow节点中、将enablePullDownRefresh電影true
局部开启下拉刷新

ページの .json配置 ファイルで、enablePullDownRefresh をに設定します。true

実際の開発では、第2种 メソッド、为需要的页面单独开启下拉刷新的效果 を使用することをお勧めします。

4.1.3 ドロップダウン更新ウィンドウスタイルのグローバル構成

グローバルファイルまたはページ.json配置 ファイルで、backgroundColor とbackgroundTextStyle を使用してドロップダウン更新ウィンドウのスタイルを設定します。

●backgroundColor は、プルダウン更新の設定に使用されます窗口的背景颜色。16进制 のカラー値のみをサポートします。 a> と。はプルダウン更新の設定に使用されます
●backgroundTextStyleloading的样式darklight

ここに画像の説明を挿入します

4.1.4 ページのプルダウン更新イベントを監視する

ページの .js ファイルで、現在のページの onPullDownRefresh() 関数 监听 を渡します 下拉刷新事件。

<!--pages/message/message.wxml-->
<text>消息页面</text>
<button type="primary" bindtap="changeAddOne">点击我+1</button>
<text>当前点数：{
   
   {count}}</text>

// pages/message/message.js
    /**
     * 页面的初始数据
     */
    data: {
    
    
        count:0
    },

    // 加1按钮，事件处理函数
    changeAddOne(){
    
    
        this.setData({
    
    
            count:this.data.count+1
        })
    },

      /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
    
    
        console.log("用户下拉刷新了，我要准备刷新页面数据了！");
        this.setData({
    
    
            count:0//下拉刷新重新赋值为0
        })
        wx.stopPullDownRefresh()//当事件处理完成或数据处理完成，自动停止刷新
    },

次のテストケース:

メッセージページで個別にプルダウン更新を有効にします。ボタン +1 をクリックすると、ページカウンタが 1 増加しますが、プルダウン更新では値は変更されません。
count に 0 の値が割り当てられるように、プルダウンリフレッシュイベントリスニング処理関数でデータを処理します。

4.1.5 プルダウン更新の停止

プルダウンの更新が処理された後は、プルダウンの更新の読み込み効果が常に表示されます。不会主动消失そのため、プルダウンの更新機能を手動で非表示にする必要がありますloading效果。この時点では、wx.stopPullDownRefresh()メソッド停止下拉刷新を呼び出すだけです。

   /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
    
    
        console.log("用户下拉刷新了，我要准备刷新页面数据了！");
        this.setData({
    
    
            count:0//下拉刷新重新赋值为0
        })
        wx.stopPullDownRefresh()//当事件处理完成或数据处理完成，自动停止刷新
    }

ここに画像の説明を挿入します

4.2 引き上げてボトムアウトする

1. プルアップボトミングとは何ですか?

上拉触底 はモバイル端末の固有名詞で、画面上で指を上にスライド操作することによる 加载更多数据 の動作です。

2. ページのプルアップイベントとボトムアウトイベントを監視する

ページの .js ファイルでは、onReachBottom() 関数を通じて現在のページの 上拉触底事件 を監視できます。。サンプルコードは次のとおりです。

  /**
   * 页面上拉触底事件的处理函数
    */
   onReachBottom() {
    
    
       console.log('触发了上拉触底的事件函数');
   },

<!--pages/message/message.wxml-->
<text>消息页面</text>
<button type="primary" bindtap="changeAddOne">点击我+1</button>
<text>当前点数：{
   
   {count}}</text>
<view class="box">测试上拉触底</view>

/* pages/message/message.wxss */
.box{
    
    
	height: 600px;
	background-color: bisque;
}

ここに画像の説明を挿入します

3. 構成プルアップボトミング距離

プルアップのボトミング距離は触发上拉触底事件时，滚动条距离页面底部的距离を指します。
グローバルまたはページの .json 設定ファイルの onReachBottomDistance 属性を使用して、プルアップのボトミング距離を設定できます。
ミニプログラムのデフォルトのボトミング距離は 50px です。実際の開発では、必要に応じてこのデフォルト値を変更できます。

{
    
    
    "usingComponents": {
    
    },
    "onReachBottomDistance": 200
}

5. 拡張子カスタマイズされたコンパイルモード

この設定を行うと、コンパイルが完了するたびに、デフォルトでデフォルトのホームページにジャンプしなくなります。

ここに画像の説明を挿入します

6. wxs-handle 携帯電話番号

wxmlテンプレート

<!--pages/message/message.wxml-->

<!-- 联系方式：18898367465 -->
<text>联系方式：{
   
   {phone}}</text>

<view>
	<text>联系方式(分隔测试)：{
   
   {tools.splitPhone(phone)}}</text>
</view>


<!-- 引用外联wxs脚本-->
<wxs src="../../utils/tools.wxs" module="tools"/>

wxsテンプレートファイル

// utils/tools.wxs

// 手机号分隔处理函数
function splitPhone(str) {
    
    
	// 判断手机号是不是11位
	if (str.length!=11) 	return str
	//是11位手机号，则进行分隔
	var arr = str.split('')
	// splice数组方法(索引值，要删除的元素个数，要插入的值)
	arr.splice(3,0,'-')
	arr.splice(8,0,'-')
	console.log(arr);
	// join() 方法用于把数组中的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
	return arr.join('')
}

// 向外暴露共享成员
module.exports = {
    
    
	splitPhone:splitPhone
}

wxデータjsファイル

// pages/message/message.js
Page({
    
    

    /**
     * 页面的初始数据
     */
    data: {
    
    
        phone:'18898367465'

    }


})

効果

ここに画像の説明を挿入します

要約する

ページ間のナビゲーションジャンプを実装する方法を理解する

宣言型ナビゲーション、プログラム型ナビゲーション
プルダウンのリフレッシュ効果を実現する方法を知る

enablePullDownRefresh、 onPullDownRefresh
より多くの効果を得るためにプルアップ負荷を実現する方法を知る

onReachBottomDistance、onReachBottom
小規模なプログラムで一般的に使用されるライフサイクル関数を理解する

アプリケーションライフサイクル関数: onlaunch、onShow、onHide
ページライフサイクル関数: onLoad、onShow、< /span> onReady、onHide、onUnload