1. 程式人生 > >微信小程式之二三級選單(navigateTo傳遞資料的應用)

微信小程式之二三級選單(navigateTo傳遞資料的應用)

今早來之後稍微寫了下今天的工作目標然後就是自己犯蠢到現在的過程,所幸最後還是走回了正軌,記錄一下我在過程中的內心彈幕,並把最後結果記錄一下

微信小程式-估價系統-車輛品牌款式等-三級選單
車標
省份-城市-二級選單
(二三級選單首先考慮使用微信小程式的資料快取,但在不重新整理的情況下快取資料永遠是上一次儲存的。
今天更新了微信小程式開發工具版本,發現寫了資料快取的程式碼之後後面的跳轉語句不能執行無法跳轉。
打算放棄資料快取的方式,想到另一種是在陣列中加上跳轉的目標地址然後直接跳過去,這樣的弊端在於需要加上許多的頁面比如一個省下的城市頁面幾十個省要幾十個頁面,忽然靈光一閃,考慮是否可以跳轉中攜帶資料?馬上進行嘗試。
!!!!我的天,我之前看官方文件都是睡覺去了嗎。。。navigateTo的url裡是可以帶引數的,我沒看到!!!
!!!!!!!!!!!!!就算沒看到以前寫過的js都是做夢去了嗎!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
我成功了,喜極而泣。)

最終程式碼:
toCity:function(e){
    var index=e.currentTarget.dataset.hi;
    var arr=this.data.provinceList[index].city;
     wx.navigateTo({
         url:"../city/city?cityList="+arr
     })
   }
跳轉的時候url連結裡把要傳的資料加上就可以,我想傳的資料是陣列arr
在跳轉目標的js檔案裡用以下程式碼獲得資料
Page({
    onLoad:function(options){
        this.setData({
            cityList:options.cityList.split(",")
        })
    }
})
因為直接用options.cityList得到的是字串我用split轉換成了陣列。完美有木有。/(ㄒoㄒ)/~~所以當初為什麼沒有仔細看官方文件


效果圖如下,點山東跳轉到山東的城市


說到底還是自己蠢。。

相關推薦

程式三級選單navigateTo傳遞資料應用

今早來之後稍微寫了下今天的工作目標然後就是自己犯蠢到現在的過程,所幸最後還是走回了正軌,記錄一下我在過程中的內心彈幕,並把最後結果記錄一下 微信小程式-估價系統-車輛品牌款式等-三級選單 車標 省份-

程式實現輪番效果swiper

輪番效果在很多的網站主頁或者手機應用端都能看到,在微信小程式中使用swiper元件來實現圖片輪番,今天的小例子效果如下: 為了方便演示我將動畫切換的間隔調整為3s,現實專案中一般為5s,具體看專案需求而定。 實現圖片輪番使用swiper滑塊檢視容器元件,頁面結構檔案程式碼

程式音樂控制播放audio的API

一.小知識 1.wx.getBackgroundAudioPlayerState(OBJECT):獲取後臺音樂播放狀態。 wx.getBackgroundAudioPlayerState({

程式傳送模板訊息通過openid推送訊息給使用者

一、獲取access_token access_token是介面呼叫的憑證,目前有效期為兩個小時,需要定時重新整理,重複獲取將導致上次獲取的access_token失效。(注:不建議每次呼叫需要acc

程式封裝HTTP請求升級版

// 該函式怎麼寫,需要跟後端人員協商返回的格式 function getErrorMsgByErrorNo(error_no) { let error_msg; switch (err

程式上傳圖片功能附後端程式碼

幾乎每個程式都需要用到圖片,在小程式中我們可以通過image元件顯示圖片。 當然小程式也是可以上傳圖片的,微信小程式文件也寫的很清楚。 上傳圖片 首先選擇圖片 通過wx.chooseImage(OBJECT)實現 官方示例程式碼 ? 1 2

想著手學習程式開發的看過來含本地開發方式

瀏覽部落格,五一發現一片很好的文章,原網址(http://blog.csdn.net/anda0109/article/details/53366804),寫的很不錯,故轉載分享給更多的人。       就像學習一門開發語言首先會寫出“Hello World”一樣,學習

程式與H5相互跳轉和傳遞資料

這是小程式和web-vew的H5相互傳參,H5使用小程式的微信支付的程式碼 H5部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--<meta

程式:支付系列專輯開發指南+精品Demo

微信小程式聯盟出品 微信小程式支付指南:http://www.jianshu.com/p/2b63c81ec7f5 微信小程式與php 實現微信支付 | 連結 微信小程式---設計支付密碼的輸入框| 連結 e玩轉小程式支付之付款(統一下單)| 連結 微信小程式支付詳

程式自定義抽屜選單從下拉出例項 —— 程式實戰系列7

微信提供了動畫api,就是下面這個 通過使用這個建立動畫的api,可以做出很多特效出來 下面介紹一個抽屜選單的案例 實現程式碼: wxml: <!--button--> &l

程式生成自定義引數程式維碼

掃碼已經成為一種常見又方便的進入移動應用的途徑,可以把線上線下的使用者流量帶入你的移動應用中來。微信小程式也提供了掃碼進入的功能,可以通過掃描二維碼或者微信小程式專有的小程式碼,進入到相應的小程式頁面。 微信官方提供了3個不同的REST API用於生成帶引數的小程式

程式物流狀態時間軸

一個月左右沒更新部落格了,最近有點懶了哈(工作上真的忙),很多工作上學習到的東西都沒有及時分享出來,有點愧疚,不過自己最近一直在收集資料和學習一些新技術,最主要是想要構建自己的前端技術體系和自定義一個前端規範文件,哈哈哈。說重點啦,微信小程式裡面開發的商城模組還挺多的,剛好寫了一個物流狀態的時間軸,簡單分享一

程式登陸 —— 程式教程系列20

簡介: 微信登陸,在新建一個微信小程式Hello World專案的時候,就可以看到專案中出現了我們的微信頭像,其實這個Hello World專案,就有一個簡化版的微信登陸。只不過是,還沒有寫入到咱們自家的後臺中而已。 新建一個Hello World專案,找到a

程式swiper限制迴圈滑動

最近接的一個單子是使用swiper來達到頁面之間完美滑動的效果的。也就三個頁面首頁、內容頁、尾頁。 但是客戶要求首頁不能滑到尾頁,尾頁不能滑到首頁。 在官方文件中沒有找到方法,因此只能繞彎路了。  wxml頁面程式碼:重點在於 current='{{show_index}}'

11.程式canvas生成圖片並儲存到手機

在小程式中,會有這樣一種需求,儲存某一個頁面並將其分享到朋友圈。一般的做法是:將這個頁面用canvas繪製出來,通過wx.canvasToTempFilePath,把當前畫布指定區域的內容匯出生成指定大小的圖片。然後再通過wx.saveImageToPhotosAlbum,儲存圖片到系統相簿。由

程式介面互動反饋

互動反饋就是在使用者觸發某事件之後,給使用者一個反饋資訊。 在小程式中是通過以下幾種方式實現的: 1.wx.showToast()方法 showToast: function (postscollected, postcollected) {

程式側邊欄滑動實現附完整原始碼

目錄 一、效果圖 二、原理解析 三、原始碼 四、專案下載 同類文章推薦: 更多幹貨關注公眾號: 一、效果圖 講什麼都不如直接上效果圖好,所以我們先來看下實現效果如何。 通過滑動螢幕,或者點選左上角的圖示按鈕,都能實現側邊欄的劃出效果。   &nb

Android 分享程式圖片優化

      小菜上週接入了微信分享小程式的入口,基本功能實現都沒問題,有需要的朋友可以瞭解一下 Android 分享微信小程式失敗二三事,雖然功能都正常,但整體測試發現圖片展示效果不佳。於是小菜整理了一個簡單的小方法處理一下圖片!  

程式踩坑textarea 元件的 bug

微信小程式公測也有段時間了,但是裡面的坑踩了一個又一個,心也是夠累的。本文說說關於 textarea 元件的 bug。(注:本文提及的 bug,至少在 2016-12-1日還存在) 上一篇:微信小程式之踩坑之旅一,wx.request 和 wx.uploadFile 測試時使用到:

程式:雲開發初體驗--致我的第一個程式

背景:一直關注微信小程式的發展,看著小程式一步步完善,一步步壯大,心裡癢癢,也想做一個自己的微信小程式,但是苦於只會前端,不會服務端,所以想法一直被卡著。現在小程式有了雲開發,很輕鬆實現後端功能,寫後端跟寫前端沒啥區別,真的是前端小夥伴們的福音啊。 經過幾個晚上的熬夜奮戰,我的第一個微信小程式正式