談談微信小程序

時間 2019-11-17

標籤談談微信程序简体版

原文原文鏈接

最近這段時間接觸了微信小程序開發，也有一段時間沒寫博文了，也來寫寫簡單的見解以及開發的部分問題與感想。
javascript

本文同步於我的博客：www.imhjm.com/article/593…css

微信小程序，何方神聖？

有人可能會困惑微信小程序跟微信內嵌H5有什麼區別？html

其實若是你玩過微信小程序，你就能發現流暢度以及體驗方面，小程序是完勝的
本質其實就是hybrid（混合）的app
介於web app與native 原生app之間，具有豐富的調用手機各類功能的接口，同時又具有靈活性，跨平臺，維護成本也至關原生app較低，開發迭代速度也比較快前端

放一張網上的圖,能夠看出這三者的區別vue

來自www.bittiger.io/blog/post/o…java

「操做系統中的操做系統，生態中的生態」

有人這麼評價小程序是「操做系統中的操做系統，生態中的生態」
就像是微信裏面又開了一個app store同樣，而後裏面的app跟着微信自定義的規則來編寫，其實就是個微信操做系統中的appnode

一開始我是拒絕的，微信搞了本身的一套基於原生的規範，還作了大量的限制，因此當時我並無看好微信小程序，可是由於微信影響力的緣故，而且宣傳作得太好了，朋友圈、社區等等各類爆炸新聞，熱度、活躍度也很是高漲，各類《第一個小程序教程》《微信小程序入門指南》等等層出不窮，而後整理小程序教程的repos的star量都能達到幾k，讓人不禁得想去探探小程序的究竟webpack

談到生態的話，開放的時候，不少app很快就上線了相應的小程序，基本都是原生app功能性的弱化版，還有一些功能性較強的小應用之類的，好比什麼親戚計算器等等
然而，有人就會想着，小程序是否會打擊到原有app的流量以及下載，用戶是否會直接放棄原有的app？作小程序的效果反而拔苗助長？這確實要引發開發者們的思考git

微信小程序，路在何方？

過了剛開始的火熱的階段後，小程序就陷入一段低迷，不少人開始以爲它是雞肋，只是微信鞏固它自己的超級流量而誕生的跟公衆號相似的內置應用罷了，流量難以轉入自己的app,用戶粘性也不高，正如小程序的特色「無須安裝、觸手可及、用完即走、無須卸載」github

其實接觸過微信小程序後，發現有些東西實際上是網上的誤導或者自身的誤解。

先來看看上面的問題，小程序是否會打擊到原有app的流量，其實這個問題很好解決，你只要看看這個應用跟用戶的交互度的高低，若是存粹是一些小工具的話，功能相對單一的話，毋庸置疑，必然打擊，我就簡單舉個例子，好比摩拜單車，咱們其實只須要掃碼用車，根本不須要別的東西，我爲什麼還要下載一個app應用，可是相似其餘用戶交互度比較高的，好比滴滴出行，小程序功能就很簡單，只能供用戶簡單使用，打到快車，可是原生應用上則功能較爲豐富，用戶每每不會卸載掉原生的app

說到上面功能的閹割，既然小程序只是一些app應用的弱化版簡化版，那小程序有何做用，它能帶來什麼收益？

曾經我也以爲它很雞肋，可是隨着最近小程序開發團隊的頻繁能力升級以及本身的接觸，彷彿看到了小程序是一塊還沒有挖掘開的巨大市場。

首先是微信小程序的能力升級，先是開放我的開發者，而後公衆號支持添加轉發，再而後開放羣相關能力，小程序碼以及數據分析能力也相應開放，着實讓人看到微信小程序背後開發團隊的活躍以及微信相關方面的重視，一些能力的升級讓小程序的推廣能力更強，讓開發者有更大的權限去拿到用戶關係以及一些用戶信息，讓體驗更好。

其次是「匿名聊聊」小程序帶來的啓發，匿名聊聊經過小程序碼在朋友圈推廣，能夠跟分享小程序的朋友匿名聊天，瞬間刷爆朋友圈，有消息透露，它四小時訪問量高達40萬，雖然由於微信不容許這種「影響朋友圈」的行爲，最後被說因爲「誘導分享「暫停服務了，可是咱們從這裏能夠看到小程序的強大影響力以及在社交關係上的強大優點，在這個移動互聯網的時代，微信基本已經成爲流量主體入口（根據questmobile數據，微信日活已經到達6億），微信一方面利用小程序來鞏固本身的流量超級入口地位，咱們未嘗不能夠利用它的流量以及實體用戶來給本身帶來紅利，就相似匿名聊聊這類的，正經常使用戶不多會去下載這樣的app,這就跟陌生交友這些相似了，可是在微信這個載體下就不同了，用戶身份是相對有保證的，用戶經過微信入口進入你的應用，經過微信用戶之間的關係就能夠作不少事情了，也能夠選擇跟自己app用戶連動，來使得用戶留存

可是值得注意的是，並非全部小程序都能享受到微信流量的紅利，若是隻是單純作一個app簡化版的小程序，又有何用，用戶沒法看到你開發的微信小程序的優點和方便所在，作不到吸引用戶，用戶就只會放棄你的產品，我的以爲，小程序不該該是所謂的「用完即走」，而是「用完很爽，下次還來」，打造一個精心製做的應用，利用微信小程序帶來的社交以及流量的優點打造一個與原有app有所不一樣可是能夠看到用心製做的精緻小程序，這樣用戶用完對產品承認，徹底能夠喚醒產品的更多用戶，不過，這就須要去試驗以及推敲，像「匿名聊聊」這種打着用戶心理將小程序玩成爆款的就是一個很好的例子

關於開發微信小程序的感覺

微信開發者工具

微信提供了本身的開發者工具（支持保存編譯，ES5轉ES6，壓縮代碼等），反正從發佈到如今也迭代好多版本了，目前直接使用它的編輯器開發以爲還能夠，沒遇到很大的坑，調試工具中css部分沒有盒子模型、computed style之類的這點還有待提升

小程序開發框架

對於小程序開發框架，文檔是這麼寫的

小程序開發框架的目標是經過儘量簡單、高效的方式讓開發者能夠在微信中開發具備原生 APP 體驗的服務。

框架提供了本身的視圖層描述語言 WXML 和 WXSS，以及基於 JavaScript 的邏輯層框架，並在視圖層與邏輯層間提供了數據傳輸和事件系統，可讓開發者能夠方便的聚焦於數據與邏輯上。

小程序也的確實現了現代前端框架的數據與視圖綁定的特色，而不是dom的形式，可是它最大的缺點是缺乏自定義組件化的特色，雖然框架中提供了import/include，還有template,還有它內置的組件，這些能夠提供js模塊化，還有wxml模板之類，可是遠遠達不到咱們想要的，小程序很大程度跟vue很接近，包括一些綁定以及條件渲染與列表渲染等等，可是vue還有一個很大的特色就是組件系統，網站最基本就是html/css/js，可是其實咱們就能夠把應用抽象成組件樹，它們都是由一些可複用的組件構成，這樣構建速度會很是快，並且維護方便，極大地提高效率

可是小程序目前還不支持，只是它內置了一些基礎組件，不過以後會不會出現，無從得知
小程序目前比較明顯的缺點，就是組件化支持不夠，npm包下載不方便（須要本身拷貝進去，不支持node_modules），css一些屬性支持不足
不過這些能夠用咱們本身搭的腳手架，經過gulp/webpack編譯，讓它們支持一些咱們想要的特性，騰訊Budly就開發了一個 wepy框架，它學習了vue的風格，使用單文件，經過拆解編譯造成小程序的wxml/wxss，具體我還沒用過，star量也1000+了，以爲思路很好贊一下

小程序DEMO：

project
├── pages
|   ├── index
|   |   ├── index.json  index 頁面配置
|   |   ├── index.js    index 頁面邏輯
|   |   ├── index.wxml  index 頁面結構
|   |   └── index.wxss  index 頁面樣式表
|   └── log
|       ├── log.json    log 頁面配置
|       ├── log.wxml    log 頁面邏輯
|       ├── log.js      log 頁面結構
|       └── log.wxss    log 頁面樣式表
├── app.js              小程序邏輯
├── app.json            小程序公共設置
└── app.wxss            小程序公共樣式表複製代碼

使用wepy框架後目錄結構：（perfect!）

project
└── src
    ├── pages
    |   ├── index.wpy    index 頁面配置、結構、樣式、邏輯
    |   └── log.wpy      log 頁面配置、結構、樣式、邏輯
    └──app.wpy           小程序配置項（全局樣式配置、聲明鉤子等）複製代碼

回到微信小程序，開發時還遇到一些小坑，好比實現回到頂部，這個在瀏覽器輕鬆實現，可是小程序沒有提供bom/dom，惟一跟scroll搭上鉤的就只有一個組件scroll-view,可是我還須要頂部下拉加載（竟然跟它的scrolltoupper事件衝突了？），只能用一些小技巧來規避這些問題，在切換時我想回到頂部，瞬間將列表項data設爲空，再填入數據，這樣就回到頂部了，雖然也實現了效果，可是未必有些hack

再談談小程序的rpx單位吧

rpx（responsive pixel）:
能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

設備	rpx換算px (屏幕寬度/750)	px換算rpx (750/屏幕寬度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6	Plus 1rpx = 0.552px	1px = 1.81rpx

這個還挺不錯的，讓適配比較容易，否則在前端開發中還得使用rem、百分比等等一些技巧
不過須要注意
它官網提醒了在較小的屏幕上不可避免的會有一些毛刺，請在開發時儘可能避免這種狀況。
我也體驗到了這個毛刺
當你使用padding-bottom: 0rpx的時候你會發現實際上是有縫隙的，可是0px是不會有的

總之，小程序總體來看仍是不錯的，並且開發團隊也一直在努力，常常半夜兩三點更新發布小程序的能力😂，也一直在往主流前端框架靠，支持了數據綁定、模塊化、ES6等等，上手也很容易，不過要用它來作出一個讓用戶承認的精緻的產品仍是須要費很大的心思的