Mobile移動互聯
珠海​微信小程序小程序開發路上踩過的坑
小程序為開發者提供了什么


小程序提供了一個框架,微信稱之為mina,這個框架主要分兩個層面,視圖層和邏輯層?蚣艿暮诵氖且粋響應的數據綁定系統。WXML 中的動態數據均來自對應 Page 的 data,這個數據綁定是單向的,只有數據發生變化,視圖才會做出相應的調整。這種模式,讓開發者專注于事件處理上,改變對象狀態,實現視圖更新。 


為了方便以及限制開發者開發,微信自己定義了一系列的基礎組件,就是視圖層的組成單元(表單組件,媒體組件,導航等),組件自帶一些功能與微信風格的樣式,類似html標簽。微信還提供了很多原生的微信api,用來調用微信內部提供的功能,以及一個微信小程序開發者工具。


珠海微信小程序源碼結構


視圖層(將邏輯層的數據展現在視圖上)


邏輯層(通過改變數據[setData方法]來改變視圖)


配置文件





在小程序中,微信規定了界面的組成模式,由四個文件組成。


.wxml文件(頁面結構文件)標簽語言,類似html,真正負責頁面結構的文件,可以綁定數據。


.wxss文件(樣式表文件)類似css,大部分css樣式都相同


.js文件(腳本文件)用來運行我們的邏輯,使用js語言


.json文件(配置文件)主要配置公用的樣式,比如tab欄,窗口樣式等














知識庫珠海微信小程序的例子


CSDN小程序開發初步嘗試,關注的重點是js文件和wxml文件。


知識庫把開發領域細分成某個領域,例如技術語言,運維系統,行業應用等方面,對每個技術和知識點都設計一個網狀圖譜,來總結技術某一方面涉及到的知識,同時為知識結構準備一些精品的內容。方便大家更系統的學習知識。


在知識庫這個產品上,需要實現內容推薦,個人中心以及搜索。用戶側和內容推薦測,都包括四層:庫-》知識結構-》內容列表-》內容詳情頁。搜索功能可以根據用戶搜索的關鍵詞找到用戶側或者推薦里的相關內容。方便用戶閱讀和收藏。


知識庫頁面設計


小程序組件滿足了所有的顯示功能和結構(列表,窗口,按鈕,事件) 
API齊全,便于邏輯開發。不同的功能模塊放在不同的頁面里。 
- 視圖層: tab欄,列表頁,知識結構頁,內容詳情頁,搜索頁 
- 邏輯層: 
tab欄->通過綁定數據index選擇一級頁面 
列表頁->通過改變綁定數據contentlist數組,控制列表顯示和動態加載 
搜索頁->通過綁定數據searchValue,通過事件及時獲取用戶輸入



小程序開發路上踩過的坑


打開頁面數量限制(redirectTo還是navigateTo)


微信提供tab欄的設置,可以在app.json中配置,在app里配置的tab欄將出現在所有的一級頁面。但是他有一個問題就是第一次點擊tab將會打開一個新的頁面,微信對打開頁面的數量限制是五個。


微信提供了幾個頁面跳轉的方式,redirectto,navigateto,還有返回。重點說這兩個,redirectto會直接在原頁面上打開新頁面,navigateto會新開啟一個頁面。由于微信在頁面數量上有限制,我們產品的層級有比較多,導致我們無法直接在app.json設置tab欄。所以我們把tab欄單獨設計出來。點擊tab不開啟新頁面。在每個初級頁面都引用進去,之后二級三級的頁面上不使用tab切換,而是需要返回到初級頁面。






樹狀結構的展示


每一個庫都有一個樹狀的知識結構,大家請看這個例子。每個層級展示的方式是一樣的,所以正常情況下,我們都會選用遞歸的方式來使展示。比如在這張圖里,當我們判斷這個節點擁有子節點,就想再次調用同樣方法顯示。但是很遺憾,小程序里,不論是使用模板,還是使用include的方式引用文件,都沒有辦法做到自己調自己。


幸運的是我們知道我們層級最深有多少,這樣我就可以寫幾個同樣的文件和模板,加上不同的命名,來調用。如果是未知層級的樹狀結構,就會非常難以處理。在這里可以建議大家將樹狀結構變成數組的形式,加上層級標識,在wxml文件中可以使用循環的方式來處理層級的顯示。 












Html頁面在微信小程序中展示






這是一個非常難處理的問題,微信不支持html頁面的展示,所以需要把所有html的標簽轉化成小程序內允許的標簽。我們使用了一個名叫wxParse的應用,這個應用的功能就是通過正則表達式將html頁面轉化成json形式,再用模板的方式展現出來。在這里面規定了各個標簽的樣式(wxss)。遺憾的是他也有層級方面的問題,同樣是重復寫了很多完全一樣的模板。


順序調用。如果html的標簽層級結構超出了模板個數,那么超出部分將無法顯示出來。這個應用是在微信中運行的,建議大家把數據轉化放在服務器端來進行,將轉換后的數據發給小程序。另外小程序setData()一次不能超過1024k,如果你的json格式數據超過這個限制,就會很難再拼接。


珠海微信小程序冒泡事件


一個組件上的事件被觸發后,該事件會向父節點傳遞,網絡請求接口 wx.request() 沒有攜帶 Cookies,如果服務器端有通過獲取cookies處理的邏輯沒辦法和小程序結合,只能為小程序單獨開發新的接口。






珠海微信小程序在運營上的優勢在于微信用戶量大,適合推廣,某些功能單一的APP可以在小程序中實現,不用再下載APP。開發者不用考慮平臺,開發成本低。但同時不適合開發邏輯復雜界面豐富的程序,受到框架限制,隨意性小,無法滿足所有功能。
>>返回列表

上一篇:無

下一篇:微信小程序SEO優化

国产国语VIDEOSEX,日本无吗中文字幕免费,影音先锋亚洲成AⅤ无码,青柠在线观看免费高清视频下载
<蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>