久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

        手機(jī)站
        千鋒教育

        千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

        千鋒教育

        掃一掃進(jìn)入千鋒手機(jī)站

        領(lǐng)取全套視頻
        千鋒教育

        關(guān)注千鋒學(xué)習(xí)站小程序
        隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

        當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > 小程序頁(yè)面?zhèn)鲄⒅录鲄?

        小程序頁(yè)面?zhèn)鲄⒅录鲄?/h1>
        來(lái)源:千鋒教育
        發(fā)布人:wjy
        時(shí)間: 2022-06-06 13:40:00 1654494000

        當(dāng)我們?cè)陂_(kāi)發(fā)小程序的時(shí)候,經(jīng)常會(huì)遇到此類要求:點(diǎn)擊一個(gè)內(nèi)容跳轉(zhuǎn)到一個(gè)新的頁(yè)面,并且新頁(yè)面的內(nèi)容是由點(diǎn)擊的內(nèi)容決定的。

        小程序頁(yè)面?zhèn)鲄⒅录鲄? /></a></p>
<p> <span style=比如用戶在美團(tuán)上瀏覽商品,通常情況下我們?nèi)ゲ榭丛斍轫?yè)面,會(huì)發(fā)現(xiàn)它的結(jié)構(gòu)都是相同或者類似的,但是內(nèi)容是由用戶點(diǎn)擊的內(nèi)容決定的。

        比如點(diǎn)擊黃燜雞,進(jìn)到詳情頁(yè)就會(huì)發(fā)現(xiàn)封面是黃燜雞,這和我們點(diǎn)擊的內(nèi)容是一一對(duì)應(yīng)的。

        這種效果在小程序開(kāi)發(fā)過(guò)程中十分常見(jiàn)。今天我們拿一個(gè)音樂(lè)類的小程序舉例子,看看頁(yè)面之間的數(shù)據(jù)是如何進(jìn)行關(guān)聯(lián)的。

        **需求:**

        用戶點(diǎn)擊圖1中的播放按鈕時(shí),跳轉(zhuǎn)到圖2,然后播放圖1中對(duì)應(yīng)列表的歌曲。

        小程序頁(yè)面?zhèn)鲄⒅录鲄?

        (圖1) (圖2)

        在本例中,如果點(diǎn)擊圖1“孤勇者”后面的播放按鈕,跳轉(zhuǎn)到圖2,則播放“孤勇者”,且圖2中的歌曲名字顯示為“孤勇者”這首音樂(lè)。

        如果點(diǎn)擊圖1“太陽(yáng)”后面的播放按鈕,跳轉(zhuǎn)到圖2,則播放“太陽(yáng)”,且圖2中的歌曲名字顯示為“太陽(yáng)”這首音樂(lè)。

        **思考幾個(gè)問(wèn)題:**

        1.如何點(diǎn)擊后跳轉(zhuǎn)到新頁(yè)面?

        2.如何將圖1中的信息傳遞到圖2中?

        3.圖2中的歌曲名字如何做到和圖1中一致?

        **簡(jiǎn)單分析下過(guò)程:**

        **1.如何跳轉(zhuǎn)?**

        給圖1中的播放按鈕綁定一個(gè)事件,在事件中使用wx.navigateTo({ url: url }) 跳轉(zhuǎn)到新頁(yè)面。

        **2.頁(yè)面中參數(shù)如何傳遞給js?**

        微信小程序提供自定義屬性,即data-*,若組件上觸發(fā)的事件,會(huì)發(fā)送給事件處理函數(shù)。

        也就是說(shuō)data-*自定義的內(nèi)容可以在事件執(zhí)行的時(shí)候獲取出來(lái)。然后用一個(gè)變量接收,并與需要跳轉(zhuǎn)的地址進(jìn)行拼接,實(shí)現(xiàn)明文傳參。

        **3.當(dāng)前Js中的參數(shù)如何傳給另一個(gè)頁(yè)面的js?**

        當(dāng)前js使用wx.navigateTo({ url: url?Key=value})明文傳參,下個(gè)頁(yè)面在頁(yè)面一加載時(shí)就執(zhí)行onload:function(options){}函數(shù),此函數(shù)中的參數(shù)options就是用來(lái)接收所有信息的,它里面包含了傳遞過(guò)來(lái)的參數(shù)。

        **4.得到前一個(gè)頁(yè)面?zhèn)鬟f的參數(shù)后,如何調(diào)用后端接口并渲染到前端頁(yè)面上?**

        構(gòu)建一個(gè)歌曲詳情渲染的方法,方法中包含請(qǐng)求后端數(shù)據(jù)的過(guò)程,請(qǐng)求成功后重置data中的變量。然后在onload中調(diào)用此方法。前端頁(yè)面通過(guò){{}}綁定data中定義的數(shù)據(jù)內(nèi)容。

        代碼過(guò)程:

        **1、歌曲詳情頁(yè)面:**

        給播放按鈕綁定一個(gè)點(diǎn)擊事件,綁定的事件中需要具備兩個(gè)作用。一是接收事件傳遞的參數(shù),二是攜帶接收到的參數(shù)跳轉(zhuǎn)到新的頁(yè)面。

        ```text
        Songlist.Wxml

        <!-- 歌曲列表 -->
        <view class="musicContainer" wx:for="{{songlist}}" wx:key="songlist">
            <!-- 左邊封面 -->
            <view class="left">
                <image src="{{item.songImg}}"></image>
            </view>
            <!-- 中間歌曲信息 -->
            <view class="center">
                <view class="songName">{{item.songName}}</view>
                <view class="singerName">{{item.singerName}} · {{item.songName}}</view>
            </view>
            <!-- 右邊播放按鈕 -->
        <view class="right">
         <!-- bindtap綁定點(diǎn)擊事件,點(diǎn)擊事件的名稱為gotoPlay -->
         <!-- data-id自定義一個(gè)屬性,可以跟隨事件傳遞 -->
                <image bindtap="gotoPlay" data-id="{{item.id}}" src="/images/playIcon.png"></image>
            </view>
        </view>
        ```

        **songlist.js中的初始數(shù)據(jù)**

        ```text
        data: {
                songlist:[
                 
                    {
                        "id":"1901371647",
                        "songImg":"
                        "songName":"孤勇者",
                        "singerName":"陳奕迅"
                    }
        ]
        }
        ```

        **songlist.js中定義gotoPlay方法, 用于攜帶參數(shù)跳轉(zhuǎn)**

        ```text
        // 監(jiān)聽(tīng)播放圖標(biāo)的點(diǎn)擊
        gotoPlay:function(even){
          // even代表執(zhí)行這個(gè)點(diǎn)擊事件時(shí)傳遞過(guò)來(lái)的所有信息
                var mid=even.currentTarget.dataset.id;
                // 用mid來(lái)接收data-id傳遞過(guò)來(lái)的id值;
                wx.navigateTo({
        // 跳轉(zhuǎn)到新頁(yè)面。同時(shí)攜帶參數(shù)id=mid
                    url: '/pages/play/play?id='+mid
                })    
            }
        ```

        **2.播放頁(yè)面:**

        **Play.wxml**

        ```text
        <!-- 歌曲名字 -->
            <view class="songName">{{musicName}}</view>
        ```

        **Play.js**

        ```text
        Page({
        /**
             * 頁(yè)面的初始數(shù)據(jù)
             */
            data: {
                id:"",
                musicName:"",
                musicPic:"",
            },

            /**
             * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
             */
            onLoad: function (options) {
                var mid =options.id
                var index1=options.index
                // this指的是當(dāng)前對(duì)象,這里指的是play
                // console.log(options)
                this.setData({
                    id:mid
                })
                // 歌曲詳情的渲染
                this.musicShow()
            },

            // 歌曲詳情渲染的方法
            musicShow(){
                var id=this.data.id
                // console.log(id)
                var that=this
                // 用that存儲(chǔ)當(dāng)前對(duì)象,網(wǎng)絡(luò)請(qǐng)求時(shí),this指的是當(dāng)前網(wǎng)絡(luò)對(duì)象,不是當(dāng)前的play對(duì)象
                // 通過(guò)歌曲id來(lái)進(jìn)行接口的數(shù)據(jù)拼接
                var url="https://music.163.com/api/song/detail/?ids=["+id+"]"
                // 網(wǎng)絡(luò)請(qǐng)求
                wx.request({
                  url: url,
                  success (res) {
                    //   console.log(res)
                    var name=res.data.songs[0].name
                    // console.log(res.data.songs[0].id)
                    var pic=res.data.songs[0].album.picUrl
                    that.setData({
                        "musicPic":pic,
                        "musicName":name
                    })
                  }
                })
            }

        })
        ```

        **最終結(jié)果:**

        點(diǎn)擊圖1中播放按鈕,跳轉(zhuǎn)到圖2播放頁(yè),且圖2中的歌曲名稱就是圖1中的歌曲名字。

        小程序頁(yè)面?zhèn)鲄⒅录鲄?

        **- End -**

        更多關(guān)于web培訓(xùn)的問(wèn)題,歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗(yàn),采用全程面授高品質(zhì)、高體驗(yàn)培養(yǎng)模式,擁有國(guó)內(nèi)一體化教學(xué)管理及學(xué)員服務(wù),助力更多學(xué)員實(shí)現(xiàn)高薪夢(mèng)想。

        tags:
        聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
        10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
        請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
        免費(fèi)領(lǐng)取
        今日已有369人領(lǐng)取成功
        劉同學(xué) 138****2860 剛剛成功領(lǐng)取
        王同學(xué) 131****2015 剛剛成功領(lǐng)取
        張同學(xué) 133****4652 剛剛成功領(lǐng)取
        李同學(xué) 135****8607 剛剛成功領(lǐng)取
        楊同學(xué) 132****5667 剛剛成功領(lǐng)取
        岳同學(xué) 134****6652 剛剛成功領(lǐng)取
        梁同學(xué) 157****2950 剛剛成功領(lǐng)取
        劉同學(xué) 189****1015 剛剛成功領(lǐng)取
        張同學(xué) 155****4678 剛剛成功領(lǐng)取
        鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
        董同學(xué) 138****2867 剛剛成功領(lǐng)取
        周同學(xué) 136****3602 剛剛成功領(lǐng)取
        相關(guān)推薦HOT
        抖音小店照片要求尺寸多大

        在抖音平臺(tái)開(kāi)設(shè)小店已經(jīng)成為了越來(lái)越多人的選擇,相信大家已經(jīng)在各大社交平臺(tái)上看到有不少小店的推廣。在抖音上,照片是展示產(chǎn)品的重要手段,因...詳情>>

        2023-10-08 16:14:25
        抖音招商團(tuán)長(zhǎng)托管服務(wù)費(fèi)怎么退回來(lái)

        抖音招商團(tuán)長(zhǎng)托管服務(wù)是抖音為有意愿創(chuàng)作內(nèi)容并帶動(dòng)其他創(chuàng)作者成為團(tuán)隊(duì)成員的用戶提供的一種服務(wù)。通過(guò)該服務(wù),招商團(tuán)長(zhǎng)可以自主組建團(tuán)隊(duì)并得到...詳情>>

        2023-10-08 16:08:53
        抖音小店怎么做代銷

        抖音已經(jīng)成為了一個(gè)非常受歡迎的短視頻應(yīng)用程序,在其中許多用戶都精心打造了自己的小店,用于銷售各種各樣的商品,獲取額外的收入。然而,要想...詳情>>

        2023-10-08 15:28:41
        怎樣開(kāi)抖音小店帶貨賺錢

        隨著直播帶貨的火熱,越來(lái)越多的人開(kāi)始嘗試通過(guò)抖音小店來(lái)開(kāi)展帶貨業(yè)務(wù)。抖音小店是抖音直播帶貨的配套,可以讓用戶在購(gòu)買直播中產(chǎn)品時(shí)就實(shí)現(xiàn)購(gòu)...詳情>>

        2023-10-08 15:06:36
        能不能幫我打開(kāi)抖音小店店鋪呢怎么弄

        抖音小店是近年來(lái)非?;鸨囊粋€(gè)網(wǎng)絡(luò)業(yè)務(wù),也是提供了很多商業(yè)機(jī)會(huì)的平臺(tái)。對(duì)于一個(gè)創(chuàng)業(yè)者而言,開(kāi)設(shè)抖音小店是一個(gè)不錯(cuò)的選擇。但是,許多小店...詳情>>

        2023-10-08 15:01:21
        阳新县| 郎溪县| 景泰县| 平舆县| 台南县| 安龙县| 丰顺县| 洛浦县| 南京市| 邵东县| 通河县| 镇江市| 永仁县| 株洲市| 双江| 衡山县| 县级市| 高淳县| 东乌珠穆沁旗| 竹溪县| 芦山县| 海林市| 隆回县| 通许县| 宜黄县| 邮箱| 漳州市| 兴业县| 丹巴县| 方正县| 张北县| 西充县| 泸定县| 辽中县| 巴林右旗| 清水河县| 方城县| 嵊州市| 老河口市| 东源县| 博客|