1. 程式人生 > >微信小程式開發會遇到哪些問題以及如何規避?

微信小程式開發會遇到哪些問題以及如何規避?

任何一個軟體開發專案總會遇到有這樣那樣的問題,微信小程式開發也不例外,那麼微信小程式開發究竟會遇到哪些問題呢?遇到這些問題又如何規避呢?西安天訊網路科技研發小組經過自己多年經驗進行以下總結:
  由於微信小程式的執行環境並不是一個標準的瀏覽器環境,而且微信的封裝工作並不完善,所以我們以往開發中的很多經驗並不適用。
  這並非簡單的開發習慣不適應,更重要的是我們的開發流程、規範將不適用。
  1.無法使用Babel轉碼
  無法使用Babel轉碼的原因其實仍然歸結於無法載入NPM庫。但是後果將十分嚴重。因為你將不能再安全使用ES6/7特性,你將無法使用async/await函式,你將和無盡的callback做鬥爭,你該怎樣描述自己?回撥地獄中的苦逼程式設計師?
  如果你看到這裡不明白Babel為何物,那麼祝賀你,因為不曾見過天堂就不知何為地獄,你無須為不支援ES6/7而煩惱。但一旦你的大腦支援了ES6/7,用過了Babel,你就回不去了,像我一樣,無Babel不編碼。
  2.無法重用元件
  其實微信小程式開發是並非完全不能重用元件,比如WXML語法中支援import和 include。但是那僅僅是檢視模板可重用,並非元件可重用,因為我們認為元件在應當包含檢視和邏輯。
  WXML其實是基於可重用的元件,但是不允許我們自定義元件。如果你有React經驗,你就會明白我的意思。比如你的小程式是個電商APP,專案中有兩個頁面中同時包含了商品列表元件,比如某分類下商品列表和搜尋結果列表,我們知道這兩個列表其實僅僅是引數不同而已。但是在小程式開發中,你只能將列表的模板抽象出來,不能將邏輯抽象出來,所以你就需要在兩個頁面上都實現一遍列表元件的控制邏輯。
  3.無法呼叫NPM包
  雖然微信小程式開發工具打包時實現了require函式載入依賴,但並不是完整的CommonJS依賴管理。因為require函式僅僅能夠載入專案中的JS檔案,而且必須嚴格定義JS檔案路徑,路徑不支援CommonJS的路徑風格。例如如下載入方式都將出錯:
  在除錯工具的Network選項卡中,我們看到執行時載入了1000多個檔案,總資料量1.8MB,而我們僅僅是在程式碼中載入了一個lodash庫而已!這是因為微信小程式開發工具會將所有專案下的js檔案視為專案檔案,並進行打包。而實際開發中,我們需要安裝很多的NPM擴充套件庫,而這些擴充套件庫中有大量的不需要打包的檔案,例如lodash中有上千檔案,而我們只需要用到其中的非常少的一部分。
  另外,在開發中,我們往往需要安裝babal、eslient、webpack、grunt等待開發工具,微信小程式開發工具會一視同仁將這些工具的原始碼也進行打包......在除錯工具的Network選項卡中,我們看到執行時載入了1000多個檔案,總資料量1.8MB,而我們僅僅是在程式碼中載入了一個lodash庫而已!這是因為微信小程式開發工具會將所有專案下的js檔案視為專案檔案,並進行打包。而實際開發中,我們需要安裝很多的NPM擴充套件庫,而這些擴充套件庫中有大量的不需要打包的檔案,例如lodash中有上千檔案,而我們只需要用到其中的非常少的一部分。
  所以不支援NPM包的原因,是微信開發者工具不支援CommonJS標準,不支援CommonJS標準的原因,是微信開發者工具想當然地認為專案目錄下的js檔案一定是專案檔案,所以只實現了簡單的require函式。轉載於www.linksky-tech.com   

相關推薦

程式開發遇到哪些問題以及如何規避

任何一個軟體開發專案總會遇到有這樣那樣的問題,微信小程式開發也不例外,那麼微信小程式開發究竟會遇到哪些問題呢?遇到這些問題又如何規避呢?西安天訊網路科技研發小組經過自己多年經驗進行以下總結:   由於微信小程式的執行環境並不是一個標準的瀏覽器環境,而且微信的封裝工作並不完善

程式開發遇到的那些坑】之——為什麼上拉載入後返回頂部

我下面的程式碼是沒有問題的,確實每次都能載入到,但是都會重回頂部  注:下面的程式碼不能直接用,有一些變數沒有貼上來 //上拉載入下一頁商品 onReachBottom: function()

程式開發--豆瓣圖書介面

由於微信小程式訪問豆瓣圖書介面的API被關閉, 所有從小程式端發起的訪問請求都會被拒絕, 403,禁止通訊。 其餘的資訊介面大都是http的,微信小程式中不允許訪問http, 我們通過中繼伺服器爬取並解析資料實現了一個可以在小程式中實現的圖書資訊查詢介面。 通過圖書的isbn 號碼查詢關於該圖書的各

程式開發 筆記

1.[wxss]設定帶透明度的rgb顏色:rgb(0,0,0,0.5); 2.小程式使用類似於iOS的NSNotification:(第三方:https://github.com/icindy/WxNotificationCenter) (1)在需要收發通知的頁面引入WxNotification

程式開發框架——WXSS(一)

    WXSS語言決定了小程式頁面的各個元素在視覺上的展示,WXSS與CSS即為相試的、為了適合微信小程式開發WXSS對CSS進行相應的修改。     width:用來設定元素'寬度' / height:用來設定元素'高度 '/

純正商業級應用-程式開發實戰已更完

第1章 導學與申請appkey 如何更好的學習本課程?如何申請開發者key?如何呼叫和測試介面? 1-1 微信小程式商業級實戰-課程導學。 1-2 優先自己開發 1-3 appkey的申請 1-4 課程維護說明 第2章 準備工作 開發前的準備工作以及第三方開發工具的選擇 2-1 流程與開發前準備 2

程式開發:二級、三級等多級聯動選單

二級級聯效果三級聯動效果 二級聯動和三級聯動的程式碼結構都是一樣,就看要怎麼設定。接下來上三級聯動的程式碼。 wxml <view class="picker-box"> <view class='skill-picker'&g

程式開發筆記5——元素隨著頁面滾動吸附在頂部的效果

現在很多app都有這樣的效果,某元素隨著頁面的滾動,吸附在頂部的效果。本文將介紹實現這種效果的兩種不同的方法。 先看一下效果圖: 使用IntersectionObserver 思路 上一篇部落格詳細介紹了IntersectionObserver的用法。這裡用來實現這種吸附的

程式開發筆記4—— IntersectionObserver 用法詳解

看微信文件時看到這個很有趣的api,但是官方的文件和例子關於這個api的介紹都是很讓人失望的,所以花了點時間瞭解了以下這個方法,做個記錄,供參考。 簡介 首先,我的理解是,這是一個觀察器(廢話),它用來監測目標物件與某個參照物的相交情況。什麼是相交情況?通俗的說,就是兩個區域有重

程式開發筆記2——自定義導航欄元件

本文主要是熟悉微信小程式自定義元件的開發,以一個常見的導航欄(Tabbar)需求為例。 官方文件:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 首先我們先看一

程式開發-引入阿里巴巴向量icon圖示庫

先在阿里巴巴圖示庫下載icon圖示並儲存到專案裡,然後下載到本地。此步驟的壓縮檔案命名為壓縮1檔案。 解壓下載檔案,開啟轉換網址https://transfonter.org/,點選 Add fonts按鈕將iconfont.ttf檔案上傳上去,按圖操作就好。此步驟的壓縮檔案命名為壓縮2檔

純正商業級應用-程式開發實戰最新無加密

第1章 導學與申請appkey 如何更好的學習本課程?如何申請開發者key?如何呼叫和測試介面? 1-1 微信小程式商業級實戰-課程導學。 1-2 優先自己開發 1-3 appkey的申請 1-4 課程維護說明 第2章 準備工作 開發前的準備工作以及第三方開發工具的選擇 2-1 流程與開發前準

程式開發使用者授權登入

用wx.login獲取登入憑證code <!--pages/user/index.wxml--> <view hidden='{{boolean}}'> <view wx:if="{{isLogin == 1}}"> <!-- 個人資訊 --

與大家分享學習程式開發的一些心得

因為我也才開始學習微信小程式不久,下文也是現在的一時之言,大家有不同的想法也可以在評論裡共同交流討論,希望文章能給大家提供一點點幫助。 最近接觸到了一些前端框架,像Vue.js,React,發現小程式的框架體系跟它們很像。它們都推崇模組化,元件化,資料與元素繫結。這樣沒有繁瑣的DOM操作,

程式開發day02——程式的基本功能和作用

微信小程式自學02 一、建立小程式 二、瞭解小程式的基本功能和作用        1、小程式的啟動        開啟小程式時,就已經將小程式的所有程式碼打包下載到

程式開發day01——程式的頁面基本認識和屬性

微信小程式學習筆記(1) 一、申請個人賬號 二、安裝開發者工具 三、申請程式 四、閱讀幫助文件        1.簡單認識基本結構以及頁面      app.json【全域性配置

程式開發最佳實踐

作者: skylor https://segmentfault.com/a/1190000012955804 專案地址:https://github.com/skyFi/weapp-starter 為什麼會有這個 repo 在小程式之初便開發應用了,現

程式開發——使用wxParse外掛實現html程式碼的支援

前言: 大家都知道,無論是微信小程式還是支付寶小程式都不支援html程式碼的展示的,甚至說你想貼個純html程式碼做demo都不方便,更不用說解析html了。那麼怎麼解決這個問題呢? 解決方案: 使用WxParse外掛(微信小程式富文字解析元件)就能解決這個問題。本來這個外掛是專為微信小程式設計的,但是

程式開發 初識 ——技術積累

今天開始學一些微信小程式的開發,從 高洪濤——微信小程式開發 下載 安裝 開始使用 下載 微信開發工具包下載地址    微信官網提供了 三個版本,根據自己電腦的情況安裝具體的版本。   安裝

初嘗程式開發與實踐

 以後端程式設計師的視角來聊一聊小程式。 小程式的火熱相信不用我多說了,年初的時候老婆去浦東某達面試,甚至都被問有沒有小程式測試經驗。儼然小程式成為了網際網路公司自PC,WAP,安卓,IOS之後又一不可或缺的入口。正好這段時間公司也在做一款小程式,於是順便也學習了一把。當然因為我是一個後端猿,自然