小程序開發

思捷智聯 > 小程序開發 > 小程序應該如何入門,初學者應該掌握哪些基本知識?

小程序應該如何入門,初學者應該掌握哪些基本知識?

編輯時間:07-28 12:29 瀏覽次數:8

 從便于理解角度來說,可以把小程序看成類H5頁面,提供了視圖層描述語言,WXML 和 WXSS 以及基于JavaScript的邏輯層框架,并在視圖層與邏輯層間提供了數據傳輸和事件系統,可以讓開發者可以方便的聚焦于數據與邏輯上。這里wxml相當于html,wxss相當于css。因此對于前端開發來說小程序有點“似曾相識”的感覺,很容易上手,對于后端開發來說鑒于小程序開發良好的官方文檔及社區支持,應該也比較上手。那么小程序開發到底該如何入門,初學者應該掌握哪些基本知識呢?

timg

一、創建第一個小程序,快速啟動模板


      創建小程序前,先花點時間了解小程序開發官方教程,https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=201769


      該教程講的很細,包括如何申請開發賬號,怎么使用開發工具創建第一個小程序,框架介紹,組件介紹,API文檔等,因此建議大家多看看官方教程,按教程所示:


      1、我們要注冊一個小程序開發賬號,獲取小程序開發appID;


      2、下載、安裝開發工具;


      3、創建一個空白小程序,假設項目名稱為demo1:“快速啟動模板”,里面包含微信頭像獲取,日志等;


      4、了解小程序的項目結構,各文件構成;


      5、也是最關鍵的,徹底搞明白demo1的wxml,wxss和js代碼,了解頁面如何跳轉,事件如何觸發,WXML如何編寫,api如何調用等。




二、體驗小程序


     1、先體驗官方的小程序示例,可以微信掃描二維碼,或者發現-->小程序-->搜 小程序示例,獲取體驗小程序。該示例包括了常用組件功能演示。




        小程序示例,源碼可以下載,不過源碼比較舊是1月份的,下載地址。


       2、多多體驗三方小程序


       如:mobike單車,京東購物等,尤其京東購物建議大家看下,功能相對來說比較復雜。


三、嘗試編寫自己的第一個小程序


       一個原則,功能盡量簡單,但是盡可能多用組件,如:input,text,map,picker等。


       寫完后,想法提交審核,并發布,了解小程序整個開發流程。


四、查看小程序的運營數據


     登錄 小程序管理后臺 - 查看數據分析和小程序運行監控情況,如js報錯等,通過此舉可進一步完善小程序。


    當然,開發人員也可以在小程序里自行全局捕捉錯誤,并記錄處理。App提供onError錯誤監聽函數,onPageNotFound頁面不存在監聽函數,開發人員只要在app.js中實現這兩個函數即可。通常只要實現onError錯誤監聽函數即可,如:


  onError: function(msg) {

    console.log("onError: ", msg);

    // 錯誤上報.

  },

onError:  thirdScriptError

abc is not defined; [Component] Event Handler Error @ pages/site/launch/index#bound enterApp

ReferenceError: abc is not defined

    at r.enterApp (http://127.0.0.1:52970/appservice/pages/site/launch/index.js:132:17)

    at Object.r.safeCallback (http://127.0.0.1:52970/appservice/__dev__/WAService.js:14:1926)

    at http://127.0.0.1:52970/appservice/__dev__/WAService.js:16:8629

    at d (http://127.0.0.1:52970/appservice/__dev__/WAService.js:16:11030)

    at a (http://127.0.0.1:52970/appservice/appservice?t=1528097294392:1085:9472)

    at e.registerCallback (http://127.0.0.1:52970/appservice/appservice?t=1528097294392:1085:9659)

    at m.forEach (http://127.0.0.1:52970/appservice/appservice?t=1528097294392:1085:1513)

    at Array.forEach (<anonymous>)

    at d (http://127.0.0.1:52970/appservice/appservice?t=1528097294392:1085:1493)

    at WebSocket.j.onmessage (http://127.0.0.1:52970/appservice/appservice?t=1528097294392:1085:1386)


五、查漏補缺


      不管小程序對你來說是“似曾相識”還是“一無所知”,通過上述環節,你應該切實體會到自己的短板,查漏補缺,不僅有技術層面上(如:js,css等前端技能),還有規范上(小程序設計規范),更有程序設計、系統架構及性能優化層面。


      1、js,推薦更多的使用ES5,ES6;


      2、css,大家務必掌握flex布局,盡量使用flex替代原來的float,關于flex布局,網上有篇文章介紹的比較深入啦,建議大家看下:


           1)  Flex 布局教程:語法篇


           2)  Flex 布局教程:實例篇


           關于flex布局,后續我會寫個小程序的demo。


    3、小程序設計規范,建議按騰訊提供的設計指導原則走,具體參考:微信小程序設計指南。


    4、小程序前后端性能優化


        1)前端性能優化


        1-1)條件渲染請合理使用wx:if和hidden,通常相對不變的輸出用wx:if, 切換頻繁用hidden;


        1-2)合理使用setData更新數據;


        1-3)長列表頁請使用分頁功能,圖片請使用延遲加載;


        1-4)清理不需要的頁面,資源文件;


        2)后端優化,通常是龐大的系統工程


        2-1)優化參數、輸出數據結構,減少傳輸數據;


        2-2)合并網絡請求;


        2-3)靜態資源cdn;


        2-4)緩存、服務器集群等;


    5、小程序功能組件化、插件化、分包加載,或部分功能使用Webview加載H5實現


        隨著項目變大,復雜,我們勢必要考慮開發效率和開發協同性問題,為此,我們需要構建基礎組件,業務抽象構建業務基礎模塊。有些絢麗的活動頁面,還必須用H5來實現。


    當我們不再聚焦于小程序如何實現功能,而是小程序如何構建小巧、精致、快速響應的移動應用時,那么恭喜你,即將被打上資深、專家等身份標簽啦。

免責聲明:我司網站轉載此文,不代表本網的觀點和立場。不以盈利為目的,如有侵犯公司或個人權益,我司會第一時間刪除文章,歡迎咨詢免費獲取思維導圖!
    相關閱讀
感受專業服務,從來電咨詢開始
15821967367158-2196-7367
cache
Processed in 0.002467 Second.
浙江20选5几点开奖