衡阳派盒市场营销有限公司

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

小程序開發如何跳轉頁面和實現參數的傳遞與視圖層顯示

Wildesbeast ? 來源:今日頭條 ? 作者:IT小超 ? 2020-02-18 12:15 ? 次閱讀

最近在研究小程序開發,看了一些官網文檔,我們今天就來學習一下如何跳轉,順便把跳轉過程中的參數傳遞,以及接收賦值到模板中顯示學習了。

首先我們創建一個小程序,填寫項目名稱,以及路徑,這里AppID我用的測試賬號。

我們進入到開發頁面顯示的默認代碼中Pages目錄中只有index和logs,小程序頁面一般都包裹.js文件主要是邏輯層的一些內容,.json文件主要作用是頁面的獨立配置文件,wxml文件主要是我們直觀顯示的頁面相當于html,wxss文件主要是用于頁面的樣式相當于css,不對贅述詳細可以看官方文檔,這里主要講頁面跳轉以及傳參。

我們首先增加一個新的頁面test,創建的時候,系統會自動在app.json中創建一條路由,還有更簡單的辦法,直接在app.json中添加一條路由,系統就會幫你直接創建相對應的內容,這里要注意的是,如果刪除頁面,路由是不會自動刪除的,需要手動刪除一下,路由也是一樣。

接下來我們改造一下首頁的內容,index文件夾中的index.wxml,增加跳轉,小程序中是沒有a標簽的,跳轉的標簽是,這樣就可以正常跳轉到設置好的頁面了。

除了這種類似于a標簽的跳轉,小程序還集成api按鈕跳轉,只需要在button中設置bindtap參數即可,bindtap這個是小程序的事件綁定,寫法,同樣是在index.wxml中寫,這里js中事件沒有寫報錯,和回調等。關于跳轉有多種api,根據官方文檔,我們文中使用的是navigateTo會保留當前頁面,跳轉到應用內的某個頁面,另外還有redirectTo是會關閉當前頁面,跳轉到應用內的某個頁面,以及navigateBack關閉當前頁面,返回上一頁面或多級頁面等,具體可以查詢一下官網文檔,或者在文章下方回復。

接下來我們講怎么傳遞參數以及接收參數,傳遞很簡單沒什么可說的,直接上代碼了

接下來我們說一下如何接收傳遞過來的參數,接收過來的數據是放在options中的,我們直接用console.log打印一下。

我們在onLoad中可以直接打印出來了,onLoad會在創建頁面的時候執行,所以跳轉之后會直接打印出來。

接下來我們講怎么把傳遞過來的數據顯示出來,需要對js以及wxml文件進行一定的改造,我先改造一下test.wxml

既然要獲取數據就要在js文件中操作,這里要提到setData, 這個函數用于將數據從邏輯層發送到視圖層(異步),同時改變對應的 this.data 的值(同步),看到網上有說用this.data的,官網文檔特別說明了一下,是不行的,原文在這里:直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的,還會造成數據不一致。

最后上一張效果圖:

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • APP
    APP
    +關注

    關注

    33

    文章

    1577

    瀏覽量

    72787
  • 程序
    +關注

    關注

    117

    文章

    3796

    瀏覽量

    81419
收藏 人收藏

    評論

    相關推薦

    鴻蒙原生頁面高性能解決方案上線OpenHarmony社區 助力打造高性能原生應用

    Nodepool、HMrouter和DataCache 三大解決方案,并上架OpenHarmony開源社區分,分別針對應用頁面滑動、跳轉、首頁冷啟動等關鍵性能場景提供高效易用的工具,助力伙伴和開發者打造
    發表于 01-02 18:00

    基于ArkTS語言的OpenHarmony APP應用開發:圖片處理

    (),rotate()接口實現對圖片的縮放,裁剪,旋轉功能。案例說明:發表評價頁面點擊添加圖片/照片,頁面跳轉到圖片選擇頁面。進入圖片選擇
    的頭像 發表于 09-20 08:07 ?712次閱讀
    基于ArkTS語言的OpenHarmony APP應用<b class='flag-5'>開發</b>:圖片處理

    根據router事件卡片跳轉

    一、介紹 基于鴻蒙Next實現由router事件,卡片熱區跳轉指定頁面。二、場景需求 電商購物卡片: 新聞或內容聚合平臺: 個人資料頁面: 項目管理工具: 在線教育平臺: 候選人篩選
    發表于 09-02 14:40

    鴻蒙開發:【頁面棧及任務鏈】

    單個UIAbility組件可以實現多個頁面,并在多個頁面之間跳轉,這種UIAbility組件內部的頁面
    的頭像 發表于 06-14 10:10 ?499次閱讀
    鴻蒙<b class='flag-5'>開發</b>:【<b class='flag-5'>頁面</b>棧及任務鏈】

    鴻蒙Ability Kit(程序框架服務)【Ability內頁面間的跳轉

    基于Stage模型下的Ability開發實現Ability內頁面間的跳轉和數據傳遞
    的頭像 發表于 06-03 20:43 ?339次閱讀
    鴻蒙Ability Kit(<b class='flag-5'>程序</b>框架服務)【Ability內<b class='flag-5'>頁面</b>間的<b class='flag-5'>跳轉</b>】

    鴻蒙Ability Kit(程序框架服務)【UIAbility內和UIAbility間頁面跳轉

    基于Stage模型下的UIAbility開發實現UIAbility內和UIAbility間頁面跳轉
    的頭像 發表于 06-03 14:13 ?821次閱讀
    鴻蒙Ability Kit(<b class='flag-5'>程序</b>框架服務)【UIAbility內和UIAbility間<b class='flag-5'>頁面</b>的<b class='flag-5'>跳轉</b>】

    鴻蒙原生應用元服務開發-WEB跨應用跳轉

    Web組件可以實現點擊前端頁面超鏈接跳轉到其他應用。 在下面的示例中,點擊call.html前端頁面中的超連接,跳轉到電話應用的撥號界面。
    發表于 05-27 15:06

    鴻蒙OS開發:典型頁面場景【一次開發,多端部署】實戰(設置典型頁面

    本示例展示了設置應用的典型頁面,其在小窗口和大窗口有不同的顯示效果,體現一次開發、多端部署的能力。
    的頭像 發表于 05-27 09:36 ?1245次閱讀
    鴻蒙OS<b class='flag-5'>開發</b>:典型<b class='flag-5'>頁面</b>場景【一次<b class='flag-5'>開發</b>,多端部署】實戰(設置典型<b class='flag-5'>頁面</b>)

    HarmonyOS開發案例:【UIAbility內和UIAbility間頁面跳轉

    基于Stage模型下的UIAbility開發實現UIAbility內和UIAbility間頁面跳轉
    的頭像 發表于 05-09 15:06 ?1686次閱讀
    HarmonyOS<b class='flag-5'>開發</b>案例:【UIAbility內和UIAbility間<b class='flag-5'>頁面</b>的<b class='flag-5'>跳轉</b>】

    HarmonyOS開發案例:【Ability內頁面間的跳轉

    基于Stage模型下的Ability開發實現Ability內頁面間的跳轉和數據傳遞
    的頭像 發表于 05-09 10:39 ?632次閱讀
    HarmonyOS<b class='flag-5'>開發</b>案例:【Ability內<b class='flag-5'>頁面</b>間的<b class='flag-5'>跳轉</b>】

    HarmonyOS實戰開發-如何使用全局狀態保留能力彈窗來實現評論組件。

    數據 |---view ||---ShortVideo.ets// 視圖層-主頁 ||---Side.ets// 視圖層-視頻右側頁面操作欄與左側信息欄 ||---VideoSwiper.ets //
    發表于 05-07 15:06

    HarmonyOS實戰開發-如何通過BlendMode屬性來實現掛件和圖片的混合

    ||---BlendModeView.ets // 視圖層-應用主頁面 模塊依賴 本實例依賴common模塊來實現日志的打印、資源 的調用、依賴動態路由模塊來實現
    發表于 05-07 14:45

    鴻蒙OS開發實例:【頁面傳值跳轉

    本篇主要介紹如何在HarmonyOS中,在頁面跳轉之間如何傳值 HarmonyOS 的頁面指的是帶有@Entry裝飾器的文件,其不能獨自存在,必須依賴UIAbility這樣的組件容器 如下是官方關于State模型
    的頭像 發表于 03-29 20:16 ?2342次閱讀
    鴻蒙OS<b class='flag-5'>開發</b>實例:【<b class='flag-5'>頁面</b>傳值<b class='flag-5'>跳轉</b>】

    鴻蒙OS開發實例:【工具類封裝-頁面路由】

    import common from '@ohos.app.ability.common'; import router from '@ohos.router'封裝app內的頁面之間跳轉、app與app之間的
    的頭像 發表于 03-28 16:16 ?972次閱讀
    鴻蒙OS<b class='flag-5'>開發</b>實例:【工具類封裝-<b class='flag-5'>頁面</b>路由】

    C語言實現Web參數傳遞

    電子發燒友網站提供《C語言實現Web參數傳遞.docx》資料免費下載
    發表于 03-24 09:14 ?2次下載
    赌博百家乐秘籍| gt百家乐官网平台| 大发888娱乐场1888| 永利高百家乐网址| 百家乐官网平点| 百家乐官网软件辅助| 三易博娱乐城| 大发888娱乐城攻略| 百家乐开户导航| 澳门百家乐官网必胜看| 百家乐官网投注心得和技巧| 皇冠网最新网址| 大发888爱好| 丽都百家乐的玩法技巧和规则 | 百家乐官网那个娱乐城信誉好| 乐九百家乐官网娱乐城| 丹凤县| 江西老虎机遥控器| 香港百家乐的玩法技巧和规则 | 太阳百家乐娱乐| 赌场百家乐的玩法技巧和规则| 百家乐免费赌博软件| 广州百家乐赌场| 八运24山阴阳| 真人百家乐官网送钱| 真人百家乐官网策略| 法库县| 线上娱乐城| 伽师县| 尊龙国际在线娱乐场| 大发888娱乐城dmwd| 大发888娱乐场是真是假| 大发888真人存款| 太阳城雨伞| 大发888娱乐场下载 zhldu| 大发888手机登录平台| 在线棋牌游戏平台| 新濠天地娱乐城| 庆安县| 百家乐官网平注法攻略| 伯爵百家乐官网娱乐网|