淺談微信小程序


 

微信小程序

1.什么是小程序

小程序是指微信公眾號平台小程序,小程序可以在微信內被便捷的獲取和轉播;是一種不需要下載安裝即可使用的應用小程序,和原有的三種公眾號是平行的體系。

2.小程序獲取方式

一、線下掃碼

小程序最基礎的獲取,是二維碼,可以通過微信掃一掃二維碼的方式進入小程序。

二、微信搜索

在微信客戶端的搜索功能,輸入小程序名稱獲取小程序

三、公眾號關聯

同一個的小程序和公眾號可以進行關聯,並相互跳轉,該功能需要經開發者自主設置后使用。

一個公眾號可以綁定五個小程序,但一個小程序只能被一個公眾號綁定,可以通過公眾號查看並進入所綁定的小程序,反之亦然。

四、好友推薦

當發現一個好玩的或者使用的小程序,可以通過將這個小程序。或者他的某一個頁面轉發給好友或者群聊。

Tips:小程序無法在朋友圈發布分享

3. 開發環境

系統:windowMac 

開發工具:微信開發者工具

微信本質:本質還是一套前端框架,代碼最終將會打包成一份 JavaScript並在小程序啟動的時候運行,直到小程序銷毀。模版語法類似vue,接近原生的自定義標簽。數據綁定和渲染類似vue的語法,不過是以wx:開頭(vue 以v: 作為標識) 事件系統類似react一樣定義了一套自己的事件系統。

官方文檔這樣描述:框架提供了自己的視圖層描述語言 WXML 和 WXSS,以及基於 JavaScript 的邏輯層框架,並在視圖層與邏輯層間提供了數據傳輸和事件系統,可以讓開發者可以方便的聚焦於數據與邏輯上

4. 小程序優缺點

  1):優點

    1、提供相應的類似jsbridge的支持,使得某些功能更為方便

    2、本質是mvvm的前端框架,簡化操作。

    3、提供了比較成型的組件庫,構建比較方便

    4、基於微信appapp,使得開發成本下降

    5、支持模塊化

 

  2):缺點 

    1、由於框架並非運行在瀏覽器中,js相關bom的方法無法使用。如 documentwindow等。不過可以獲取當前事件對應的dom對象。相比react還是一樣不建議操作domjqzepto等工具庫也不好使了 

    2、又是一套自己的語法,需要學習時間,不過學習曲線不陡峭

    3、目前不支持直接引入 node_modules ,開發者需要使用到node_modules時候建議拷貝出相關的代碼到小程序的目錄中這樣局限性就比較大了,需要自己手動的東西好多

5. 小程序與APP比較

 

序號

優點

缺點

1

快速進入,快速使用,快速走

2.很多服務無法實現,比如:提醒功能

2

幾乎沒有下載功能,社交分享的轉發率極高,更讓容易讓客戶了解到產品所提供的服務和品牌

2做了更多減法,促銷運營模式無法在其運作,實現交互還是比app要麻煩多

3

跨平台,一套代碼可以適配
IOSAndroid節省了很多時間和人力成本

大量數據無法存儲

4

開發起來更加方便

小程序大小限制在1MB,許多功能受大小限制不太好提供

5

安全性更高

原生App的用戶體驗更加豐富

 

 

 

 

 

 

 

 

 

6.微信小程序與H5的區別

一、運行環境不同

傳統的HTML5的運行環境是瀏覽器,包括webview,而微信小程序的運行環境並非完整的瀏覽器,大家注意,我這里寫的是非完整的瀏覽器,有以下幾個原因

小程序的開發過程中會用到HTML5相關的技術(並非全部)

小程序最后的發布上線需要微信審核,微信在不更新自身軟件的情況下可以將小程序更新到自身軟件內,這就聯想到了React Native框架,並且已經有開發者在微信小程序的開發工具源碼中發現使用了ReactNodeWebkit

官方文檔中着重強調了腳本內是無法使用瀏覽器中常用的window對象和document對象(基於這一點,像zepto/jquery這種操作dom的庫就被完全拋棄了)

二、開發成本不同

面對H5開發需求的時候,我們會考慮開發工具,前端框架,模塊管理工具,瀏覽器兼容,開發的時候已經耗盡了很大的精力。

但是面對小程序開發呢。因為微信團隊提供了開發工具,且規范了開發標准,前端常見的HTMLCSS變成了微信自定義的WXMLWXSSWXML中盡管全部是自定義標簽,但官方文檔中都有明確的使用介紹,相信上手應該是非常容易的;WXSSJSONJS文件中的寫法稍有限制,但整體相差不多。在統一了這些標准之后,作為一個開發者,你會發現,自己只要專注寫程序就可以了:

當需要調用后端接口時,調用發起請求API

當需要上傳下載時,調用上傳下載API

當需要數據緩存時,調用本地存儲API

引入地圖、使用羅盤、調用支付、調用掃碼等等功能都可以直接使用

UI庫方面,框架自然帶有自家weui庫加成

並且在使用這些API時,你不用再去顧慮瀏覽器兼容性,不用擔心生產環境中出現不可預料的奇妙BUG,可見微信小程序的開發成本確實相比以往的web開發低很多。

三、獲取系統權限不同

微信小程序相對於HTML5 web應用能獲得更多的系統權限,比如網絡通信狀態、數據緩存能力等,這些系統級權限都可以和微信小程序無縫銜接,也就是官方宣稱的擁有Native App的流暢性能,而這一點恰巧是HTML5 web應用經常被詬病的地方,這也是HTML5的大多應用場景被定位在業務邏輯簡單、功能單一的原因。

四、應用在生產環境的運行流暢度

長久以來,當HTML5應用面對復雜的業務邏輯或者豐富的頁面交互時,它的體驗總是不盡人意,需要不斷的對項目優化來提升用戶體驗。但是由於微信小程序運行環境獨立,盡管同樣用html+css+js去開發,但配合微信的解析器最終渲染出來的是原生組件的效果,自然體驗上將會更進一步。

 

7.微信小程序初體驗

一旦搜索且綁定小程序或在后台綁定了小程序的會在下面有小程序入口,進入小程序可以分享該小程序,將小程序置頂於聊天頂部或新增到頁面中去。

     

 

一、京東購物

一進入小程序,微信就獲取了賬戶的個人資料,獨立生成一個客戶信息,無法在其使用之前在京東上注冊過的賬戶,基本依賴微信。

 

頁面非常簡單,簡單的就只有搜索功能以及優惠券和查看我的訂單,點擊領取優惠券的時候,大多數時候都提示了:活動火爆,暫無法劵。

 

經過搜索進入相應的商品信息,沒有很多功能都去掉了,保留一些刷新條件,例如:綜合、銷量、價格、篩選等,進入商品詳情,也只保留了立即購買的功能。

 

 

只能使用微信支付,其他支付無法使用,支付方式單一。不過使用起來蠻方便,填寫信息還是保留了原先簡略的功能。

 

我的訂單中,也是最大限度的保留了一下基本的功能,估計也是局限於大小限制(1MB)。

 

二、查地鐵

查地鐵中可以進行城市切換,之后會緩存數據,比京東購物還要簡單得很,其實進入這個還蠻期待,但是使用功能的時候,簡直就是縮水。

 

 

 

站點查詢功能,理所當然的以為會有站點到站點查詢,這樣就可以省略了使用百度地圖,但是只是線路查看和站點查看,簡直讓人大跌眼睛。

    

 

點擊反饋意見,會有小程序客服訊息,小程序中反饋意見給后台意見,基本都匯集在小程式客服訊息回話里面。

 

8. 微信小程序適用場景

借用網上的數據

 

                 行業區分

                                                                 微信小程序適合什么

所以,微信小程序更適合用來做低頻高需的服務,比如酒店訂閱,火車票/機票訂閱,招聘、理財等等。

總結:

經過這幾天的學習和體驗,發現原生的App內存基本都是在幾MB以上,而微信小程序大小限制在1MB,不然無法上傳,這就面臨着將原生的App功能優化簡化我們的功能,既要滿足用戶需求,又要把基本功能做完善。

因為是微信自身的一套開發語法,很多服務尚無法提供,微信小程序的應用場景太受限。微信小程序的官方文檔寫得不完善,很多方面沒有覆蓋。微信小程序的開發工具極不穩定,經常無故卡死;開發工具和真機表現偶爾會有差異;有時候代碼無故不生效,需要重啟才行;沒有類似HMR的機制導致經常刷新

 

 

Tips:可以查看微信官網開發文檔

https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM