微信小程序開發(fā)系列 (四) ：微信小程序頁面跳轉(zhuǎn)路由設(shè)計(jì)
由于工作需要，筆者參加了一個(gè)微信小程序 SAP 系統(tǒng)集成項(xiàng)目，從零開始學(xué)習(xí)微信小程序的開發(fā)知識。在這里，我通過一系列的文章分享我所學(xué)到的東西，希望能對相關(guān)的學(xué)習(xí)者有所幫助。本教程前三篇文章：通過本系列前三篇文章的介紹，您對微信小程序的視圖和控制器、微信調(diào)試器的使用以及如何消費(fèi)微信平臺提供的 Public API，已經(jīng)有了最基本的認(rèn)識。在此基礎(chǔ)上，本文讓我們進(jìn)一步學(xué)習(xí)微信小程序頁面跳轉(zhuǎn)路由設(shè)計(jì)。本系列教程的前六篇文章我們都在單個(gè)視圖上操作?，F(xiàn)在讓我們創(chuàng)建第二個(gè)視圖，然后實(shí)現(xiàn)從第一個(gè)視圖到第二個(gè)視圖的跳轉(zhuǎn)。首先，開發(fā)第二個(gè)視圖：做過 Angular 開發(fā)的朋友對上面的視圖設(shè)計(jì)并不陌生。該視圖的數(shù)據(jù)源來自模型 logs 提供是列表結(jié)果，列表中每個(gè)元素的數(shù)據(jù)源是模型 logs 里面的記錄，用 log 代表。為了讓 log 它看起來更整潔，在 log 在內(nèi)容之前，顯示每一個(gè) log 的索引。因?yàn)?log 的索引從 0 開始，所以用 {{index 1}} 在索引之前加一個(gè)，這樣顯示的索引更符合普通人的閱讀習(xí)慣。該視圖的控制器：控制器 logs.js 實(shí)現(xiàn)：在控制器中調(diào)用 Page 將當(dāng)前控制器命名為結(jié)構(gòu)函數(shù) logs 數(shù)據(jù)模型。通過微信框架提供的數(shù)據(jù)模型的值填充 API wx.getStorageSync 來獲取。wx.getStorageSync 微信小程序的含義 官網(wǎng) 上述定義：從當(dāng)?shù)鼐彺嬷型将@得指定 key 相應(yīng)的內(nèi)容。第二個(gè)視圖 UI 和控制器都開發(fā)完畢，剩下的事情就是在第一個(gè)視圖里定義一個(gè)觸發(fā)點(diǎn)，讓它能觸發(fā)到第二個(gè)視圖跳轉(zhuǎn)。我在第一個(gè)視圖上通過屬性 bindtap 點(diǎn)擊函數(shù)綁定 bindViewTap :bindViewTap 第一個(gè)控制器 index.js 實(shí)現(xiàn)：跳轉(zhuǎn)仍由微信小程序提供 API wx.navigateTo :保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用程序中的某個(gè)頁面，使用 wx.navigateBack 可返回原頁面。在學(xué)習(xí)了微信小程序頁面路由跳轉(zhuǎn)后，我們將進(jìn)行實(shí)際的需求開發(fā)。效果：我在手機(jī)上打開微信小程序，自動(dòng)顯示我目前的地理位置：ReservationService.getGeocode 實(shí)現(xiàn):看下面一張高德地圖。 API 使用將經(jīng)緯度轉(zhuǎn)換為文本描述的地址的例子 postman 發(fā)送請求：API 響應(yīng):假設(shè)我用 vue 開發(fā)了一個(gè) web 應(yīng)用,手機(jī)微信需要訪問和調(diào)試， 微信開發(fā)者工具可根據(jù)本文介紹的步驟進(jìn)行調(diào)試。假設(shè)我的 web 應(yīng)用程序的訪問入口是以下官方賬號菜單的“預(yù)約”按鈕：為了在微信開發(fā)者工具中進(jìn)行調(diào)試，您需要首先進(jìn)入官方賬號的背景 web 在開發(fā)人員工具中，添加開發(fā)人員自己的微信ID：單擊“綁定開發(fā)人員賬戶”:輸入要綁定的微信賬號:點(diǎn)擊綁定，微信號會(huì)收到消息詢問是否綁定:點(diǎn)擊同意操作完成綁定。接下來, 把要調(diào)試的 web 應(yīng)用的 url 放入微信開發(fā)者工具地址欄，回車后，微信開發(fā)者工具會(huì)彈出詢問窗口，點(diǎn)擊 Allow 之后，您可以在微信開發(fā)者工具中提供類似的 Chrome 單步調(diào)試是在開發(fā)者工具調(diào)試器的界面中進(jìn)行的。接下來, 把要調(diào)試的 web 應(yīng)用的 url 放入微信開發(fā)者工具地址欄，回車后，微信開發(fā)者工具會(huì)彈出詢問窗口，點(diǎn)擊 Allow 之后，您可以在微信開發(fā)者工具中提供類似的 Chrome 在與開發(fā)者工具調(diào)試器相同的界面中進(jìn)行單步調(diào)試。這個(gè)粘貼在地址欄上 url 很有講究。?appid=yyyy&redirect_uri=https://www.xxx.com/smart&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect appid= 后面的值，從微信微信官方賬號控制臺復(fù)制出來的 appid ：redirect_uri, 即使是我們開發(fā)的 web 應(yīng)用程序部署到服務(wù)器后生成 url，需要經(jīng)過 url encode 處理：這個(gè) url 準(zhǔn)備好后，將其粘貼到微信開發(fā)者工具地址欄，回車后，即可看到對話窗口，要求獲得我們公共信息的許可：點(diǎn)擊 Allow 之后，就像使用一樣 Chrome 開發(fā)者工具的調(diào)試器在微信開發(fā)者工具中進(jìn)行了單步調(diào)試：本文首先介紹了微信applet多頁面的路由跳轉(zhuǎn)設(shè)計(jì)，然后通過獲取手機(jī)當(dāng)前經(jīng)緯度并將其轉(zhuǎn)換為地址的需要來實(shí)現(xiàn)，進(jìn)一步了解微信小程序如何消費(fèi)微信平臺 Public API 的方法。本教程前三篇文章：
如何在微信小程序中跳轉(zhuǎn)到手機(jī)自帶的瀏覽器？
一般來說，小程序會(huì)自動(dòng)跳轉(zhuǎn)到系統(tǒng)默認(rèn)瀏覽器。如果您不跳轉(zhuǎn)，您需要在自己的瀏覽器中觀看。您可以復(fù)制鏈接，然后打開瀏覽器并粘貼到地址欄。
我的意思是如何在小程序開發(fā)中跳轉(zhuǎn)到瀏覽器中，而不是其他人已經(jīng)開發(fā)的小程序
如何跳轉(zhuǎn)微信兩個(gè)小程序？
兩個(gè)小程序需要在一個(gè)微信官方賬號下，然后點(diǎn)擊跳轉(zhuǎn)調(diào)用點(diǎn)擊事件。wx.navigateToMiniProgram({appId: '', ////目標(biāo)Appidpath在這里跳轉(zhuǎn): 'pages/index/index?id=123',extraData: {foo: 'bar'},envVersion: 'develop，//有效值 develop(開發(fā)版)，trial(體驗(yàn)版)，release（正式版）success(res) {// 成功打開})
微信小程序可以訪問外部鏈接嗎？
以上就是【我怎么沒早點(diǎn)發(fā)現(xiàn)！微信小程序如何跳轉(zhuǎn)外部網(wǎng)站(短信跳轉(zhuǎn)微信小程序)】的全部內(nèi)容。
評論