工作中，分別使用微信小程序官方原生語法和跨端框架完成了幾個小程序的開發，從上線效果看基本都滿足了預期目標。不同開發方式和不同框架各自有其優缺點，在實際項目開發過程中，應該根據實際的項目需求以及團隊人員情況做綜合選擇。

本篇文章全面分析小程序相關框架和技術選型相關技術細節。

一、小程序概述

要對小程序有一個整體的了解，就需要了解移動互聯網在國內的發展歷程。從2007年移動互聯網開始在國內發展，到2015年進入移動互聯網產品廣泛應用階段，各種移動端開發技術層出不窮。

移動端開發經歷了：原生APP（Native APP）、Web APP、混合APP（Hibernate APP）這幾種開發方式，發展到目前這個階段，混合APP開發占據主流。從某種角度看，微信小程序也屬于混合APP開發模式。

早期移動端的戰場上，web與app還在借助自己各自優勢占據市場。騰訊于2017年1月9日推出一個很巧妙的方案，那就是介于web與app之間的小程序。

微信小程序是小程序的一種，英文名是Wechat Mini Program，是一種不需要下載安裝即可使用的應用；小程序可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。

通常大家所說的小程序指微信小程序，實際上除了微信小程序外，還有支付寶、百度、頭條、飛書、QQ、快手、釘釘、淘寶等個各種平臺的小程序。

二、小程序開發方式

在微信小程序開發中，開發者可以根據自身情況和項目需要，選擇不同的開發方式，包括：原生開發、WebView開發、框架開發和低代碼開發等。

1、原生開發

每一種小程序官方都推出了對應的語法和開發工具。采用此種方式開發，同一個產品需要開發不同版本，比如你要實現一個外賣小程序，既要涵蓋微信小程序又要涵蓋支付寶小程序，那么需要根據各自平臺的語法和工具來開發2個不同的版本。

以微信小程序為例，原生開發采用的是WXML、WXSS和JavaScript等技術。要進行微信小程序開發，首先，需要先去官網了解其語法、項目結構、發布流程等基本內容。

其次，需要下載微信開發者工具，在其中創建項目，選擇原生開發模式。微信開發者工具提供了豐富的代碼編輯器、調試工具和運行環境等，可以幫助開發者進行快速開發和調試。

原生開發方式優點：

• 性能最優

啟動，調試，打包，加載資源等，一切基本的編譯，毫無疑問最快。因為相比其它方式，少了很多輔助性的編譯時間。

• 擁有微信功能第一資源

如可視化，熱更新,性能檢測等，這些都是其他方式無法享受的小程序福利

• 調試清晰

無論是樣式的定位，或者是具體js的代碼定位，原生的更能快速定位到問題。

原生開發方式缺點：

• 擴展能力弱
• 不支持scss，自定義eslint等
• 寫法不友好
• 單向綁定，沒有雙向綁定。而方式較獨立，與常用的框架不一致。
• 方法不支持直接傳遞參數。只能通過data-id的方式傳遞參數。寫法跟常用前端框架不一致且相對較繁瑣。
• 文件較多

這里對比其他框架，無論vue還是react都可以用一個文件，解決html + js + css。而小程序需要4個文件來支持，有時候項目大了顯得特別的繁瑣。

2、WebView開發

此種模式采用原生語法搭建小程序項目框架，然后再頁面中放置WebView用于渲染H5頁面，其它頁面邏輯通過H5頁面實現。

優勢：

• 脫離微信體系
• 這是一個很大的缺陷，同時也是一個很大的優勢。脫離了微信的體系，那也意味著只是一個webview的展示。這時候也已經脫離了微信本身，不再受一些展示性的限制之類。
• 動態發布

這點其實很香，直接越過了微信的審核。想什么時候上線，直接更新web服務器即可。

• 開發調試脫離

此時也已經是H5頁面，開發也可以直接在常規瀏覽器調試，無需依賴微信調試工具。

缺點：

• 無法調用微信api
• 已經脫離微信的體系，那也意味著小程序的一切功能，都無法使用。如分享，支付，統計等。
• 首次加載較慢
• 小程序是借助了微信本身內部的封裝，而H5是完完全全自己的實現。所以，毫無疑問，同樣的功能，H5文件是更大的。這也是為什么說首 次加載較慢。
• 無法有原生功能

所有原生功能寄托在微信中間層上，將失效。如藍牙，拍照，獲取手機信息等

3、框架開發

除了原生開發，微信小程序還提供了一些框架來簡化開發過程，這些框架都基于微信小程序原生開發技術，提供了更加便捷的開發方式。

這種開發模式，并不是小程序的出現才有的。隨著技術的發展，hybird已不再有當年的火爆，他們很多都轉戰"小程序"。

這類框架包括：WePY、Mpvue、Taro、Uni-app、chameleon、Megalo、kbone、Remax等等（當然其中有些框架已經停更了，后續進行分析）。

這類框架要么是通過大家熟悉的語法對原生語法進行包裝減低上手難度；要么是通過跨端技術，一次開發編譯到多平臺發布，提升開發效率。

優勢：

• 學習成本低

如react生態低成本進入taro，vue生態低成本進入uni。無需適應，小半小時即可參與開發

• 多端編譯

一份最高支持：h5移動端，各類小程序，快應用等。有些還支持生成app

• 自帶工程化

如支持scss，eslint，vuex等

• 方法的擴展

框架基本都對自身對wx.api進行了一次封裝。此外還進行了擴展以及修改。如uni實現了data對頁面的綁定，不需要再setDate。同理taro也采用了setState的方案。

• 拓展的組件庫

無論uni，還是taro，或者其他，基本都對官方的ui庫進行二次封裝，其功能都有自己的特色，或者對其組件進行了擴展。

缺點：

• 依賴第三方

該問題可大可小。特別是非有聲望的公司維護的框架，沒準過一段時間就不維護了。如幾年前比uni更火爆的的mpvue已不維護。不維護的那天，也就意味著你的項目，重構！

• 無法調試

由于本身已經是編譯后的文件，此時想再通過斷點調試，你甚至不清楚原來寫的代碼編譯后在哪里。

• 轉義效率低

寫完原生小程序代碼，就需要編譯一下才能才虛擬機上看到效果。而用第三方，還需編譯為原生。寫完代碼之后：你的代碼（第三方） --> 轉義為原生（原生）-->再編譯讓虛擬機允許。這多了個過程，所以效率變低。

• 雙平臺bug

原生小程序的bug，該問題近幾年也相對好轉，但問題還是依然存在。各大論壇搜索"小程序的坑"，總有一堆文章讓你體驗。然而用第三方，你還要接受第三方的bug。你需要容納雙平臺的bug。

在接受小程序官方的“bug”的同時，還需要同時接受第三方的"bug"。

• 編譯后工程化文件置空

此外，編譯后文件歷史等置空的問題。如快速頁面讀取配置，編譯之后又置空。

4、低代碼平臺

低代碼或零代碼平臺，無需編寫代碼，通過官網提供平臺拓展組件即可快速完成小程序搭建。此類平臺有：阿里宜搭、騰訊微搭、意派Coolsite360等。

此類平臺無需編碼或只需要少量編碼，減低小程序制作門檻，但大部分都需要收費。

三、小程序開發框架

隨著微信、支付寶等開放平臺的壯大，移動應用生態市場的蓬勃發展，例如小程序已經成為各個企業和開發者的重要選擇。為了提高小程序的開發效率和代碼重用性，許多第三方開發框架應運而生。

1、uni-app

uni-app 是一個使用 Vue.js 開發跨平臺應用的框架，支持微信小程序、支付寶小程序、百度小程序、字節跳動小程序、H5 網頁應用等多個平臺。

它采用了一套統一的組件規范和開發語法，開發者可以通過一套代碼同時生成多個平臺的應用。

uni-app提供了豐富的組件庫和插件生態系統，開發者可以快速搭建小程序界面并擴展功能。

uni-app 還具有良好的性能和跨平臺兼容性，可以在不同平臺上保持一致的用戶體驗。

2、Taro

京東的親兒子，類 React 開發風格，名字來自于實力最強的奧特曼。

Taro 是一款多端統一開發框架，可以同時開發微信小程序、支付寶小程序、百度小程序等多個平臺的應用。

它采用類 React 的開發語法，支持 JSX 和組件化開發，使得代碼的編寫更加簡潔和可維護。

Taro 的一個主要優勢是它能夠一次編寫代碼，同時生成多個平臺的應用，大大提高了開發效率。

3、Mpvue

美團的親兒子，框架直接基于 Vue 核心，修改了 runtime 和 compiler 使程序可以在微信小程序環境中運行。該項目已停止維護，但仍然可用。

Mpvue 是一個基于 Vue.js 的小程序開發框架，通過使用 Vue.js 的語法進行開發。

對于熟悉 Vue.js 的開發者來說，上手 Mpvue 非常容易。

它提供了類似 Vue 的開發體驗和功能，如組件化、數據綁定和計算屬性等。

此外，Mpvue 支持微信小程序和百度小程序，讓開發者能夠同時覆蓋多個平臺。

4、WePY

騰訊的親兒子，類 Vue 開發風格。基于小程序原生組件實現組件化開發，是對小程序原有能力的封裝和優化。該項目已停止維護，但仍然可用。

WePY 是一款類 Vue 語法的小程序組件化開發框架，它與 Vue.js 的語法相似，提供了類似的組件化開發方式。

WePY 支持微信小程序和支付寶小程序，使得開發者能夠更好地復用代碼和組件。

與此同時，WePY 還提供了許多擴展能力和開發工具，如代碼熱重載、模板編譯優化等，大大提高了開發效率。

然而，由于 WePY 不支持其他小程序平臺，對于需要覆蓋多個平臺的開發者來說，可能需要考慮其他選擇。

5、Megalo

網易親兒子，類似vue語法編寫小程序，跨H5和小程序兩端。該項目已停止維護，但仍然可用。

Megalo 是一個使用 Vue.js 開發微信小程序的框架，兼容大部分 Vue.js 的語法和特性。

開發者可以利用 Vue.js 的強大生態系統進行開發，并享受 Vue.js 帶來的開發便利性。

Megalo 支持原生的微信小程序 API，開發者可以直接使用微信小程序的能力。

然而，Megalo 目前僅支持微信小程序，對于需要覆蓋其他小程序平臺的開發者來說，可能需要考慮其他選擇。

6、Remax

阿里螞蟻金服的親兒子，使用原生React來構建小程序，運行時框架，從Remax2.0開始支持Web應用的構建。該項目已停止維護，但仍然可用。

Remax 是一個使用 React 開發小程序的框架，支持微信小程序、支付寶小程序、字節跳動小程序、QQ 小程序等多個平臺。

開發者可以借助熟悉的 React 生態系統進行開發，并享受 React 帶來的開發效率和組件化能力。

Remax 還支持原生小程序的能力，開發者可以直接使用小程序的 API。

然而，對于不熟悉 React 的開發者來說，上手 Remax 可能需要一定的學習成本。

7、Chameleon

滴滴親兒子，跨端解決方案，基于Chameleon框架開發項目，一份代碼可以運行于所有小程序平臺 ( 微信、支付寶、百度、頭條、qq )、H5、客戶端以及快應用。

青桔單車就是用它來實現的，該項目已停止維護，但仍然可用。

Chameleon/k??mi?l??n/，簡寫CML，中文名卡梅龍；中文意思變色龍，意味著就像變色龍一樣能適應不同環境的跨端整體解決方案。一次開發，多端運行，一端所見即多端所見。缺點是在使用跨平臺開發的同時，需要考慮不同平臺的差異性和兼容性。

8、kbone

騰訊親兒子，kbone 是一個致力于微信小程序和 Web 端同構的解決方案。

微信小程序的底層模型和 Web 端不同，我們想直接把 Web 端的代碼挪到小程序環境內執行是不可能的。kbone 的誕生就是為了解決這個問題，它實現了一個適配器，在適配層里模擬出了瀏覽器環境，讓 Web 端的代碼可以不做什么改動便可運行在小程序里。

它模擬了一套dom和bom接口，用以兼容現有的前端體系，只能用于Web兼容微信小程序，無法滿足其他平臺小程序的開發。

9、Nanachi

Nanachi（ 娜娜奇），去哪兒親兒子，基于 React 的多端小程序轉譯框架，完美兼容 React 生命周期。該項目已停止維護。

在對框架進行選擇時，除了結合自身業務需求外，由于技術更新迭代很快，還要綜合考慮每個框架更新維護的頻率，社群的活躍程度。

小編挨個查看官網發現，目前只有uniapp和Taro仍然在保持更新，所以商業項目建議選擇其一。從技術棧角度考慮，如果熟悉react就選擇taro，熟悉vue就選擇uni-app。

雖然很多項目已經停止運行了，它們都曾經輝煌過，也為國內it的發展做出共享。并且其代碼都在github上開源，可以作為研究之用。

四、小結

在選擇小程序第三方開發框架時，我們需要綜合考慮開發者技術棧、項目需求和目標平臺等因素。

綜上，如果采用原生開發直接按官方語法即可；如果采用跨端開發，目前有2個選擇：Taro 是一個多端統一開發框架，適合需要覆蓋多個平臺的開發者；uni-app 是一個跨平臺框架，適用于同時開發多個小程序平臺的項目。

當然隨著技術向前發展，技術更新非常之快，有可能有新的后起之秀

無論選擇哪個框架，都能夠提高開發效率、減少重復工作，并獲得豐富的組件庫和工具支持。

.box{
 display: flex;
}

.box{
 display: inline-flex;
}

.box{
 display: -webkit-flex; /* Safari */
 display: flex;
}

.box {
 flex-direction: row | row-reverse | column | column-reverse;
}

.box{
 flex-wrap: nowrap | wrap | wrap-reverse;
}

.box {
flex-flow: <flex-direction> || <flex-wrap>;
}

.box {
 justify-content: flex-start | flex-end | center | space-between | space-around;
}

.box {
 align-items: flex-start | flex-end | center | baseline | stretch;
}

.box {
 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

.item {
 order: <integer>;
}

.item {
 flex-grow: <number>; /* default 0 */
}

.item {
 flex-shrink: <number>; /* default 1 */
}

.item {
 flex-basis: <length> | auto; /* default auto */
}

.item {
 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

.item {
 align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

小程序界面設計模板分享，前端開發進來看

**引言：探索小程序設計的新維度**

隨著移動互聯網的快速發展，微信、支付寶等平臺的小程序以其輕量化和便捷性逐漸成為用戶日常生活中不可或缺的一部分。對于前端開發者而言，如何高效地設計出既美觀又實用的小程序界面，成為了提升用戶體驗的關鍵。本文將深度剖析并分享一些優質的小程序界面設計模板，輔以HTML+JS代碼實例，幫助前端開發者更好地理解和應用。

### **一、小程序界面設計基礎要點**

1. **簡潔明了的設計語言**

- 設計之初，需遵循“內容優先”的原則，注重信息的有效傳遞，減少冗余元素。

- 色彩搭配要和諧統一，使用小程序平臺推薦的主題色系，增強品牌識別度。

2. **響應式布局與組件化設計**

- 使用Flex布局或Grid布局，確保界面在不同屏幕尺寸下都能良好適應。

- 充分利用小程序提供的基礎組件，如列表、按鈕、表單等，簡化開發流程。

### **二、小程序界面模板實例分享**

#### **（1）電商類小程序首頁模板**

```html

<!-- HTML部分 -->

<view class="container">

<scroll-view scroll-y>

<view class="header">...</view>

<view class="carousel">...</view>

<view class="category">...</view>

<view class="recommendation">...</view>

<!-- 商品列表 -->

<view wx:for="{{goodsList}}" class="goods-item">

<image src="{{item.image}}"></image>

<text>{{item.title}}</text>

</view>

</scroll-view>

</view>

// JS部分（簡寫）

Page({

data: {

goodsList: [...], // 商品數據列表

},

...

});

```

#### **（2）新聞資訊類小程序文章列表頁模板**

```html

<!-- HTML部分 -->

<view class="article-list">

<block wx:for="{{articles}}">

<view class="article-card">

<image src="{{item.thumb}}"></image>

<view class="article-title">{{item.title}}</view>

<view class="article-summary">{{item.summary}}</view>

</view>

</block>

</view>

// JS部分（簡寫）

Page({

data: {

articles: [...], // 新聞文章數據列表

},

...

});

```

### **三、實戰技巧：自定義組件與頁面間通信**

在小程序開發中，我們可以創建自定義組件，以實現復用和模塊化設計：

```html

<!-- 自定義商品卡片組件 -->

<template name="goodsCard">

<view class="goods-item">

<image src="{{item.image}}"></image>

<text>{{item.title}}</text>

</view>

</template>

// JS部分

Component({

properties: {

item: { // 接收父組件傳遞的商品數據

type: Object,

value: {},

},

},

...

});

```

通過`properties`屬性進行數據綁定，實現頁面到組件的數據傳輸。

### **四、總結與展望**

通過以上模板及實戰技巧的分享，希望能給前端開發者們在小程序界面設計時提供參考和靈感。設計是永無止境的探索過程，緊跟潮流的同時，也要結合實際場景與用戶需求，打造更出色的小程序界面。未來，讓我們共同期待更多創新、高效的設計實踐在小程序領域大放異彩！

---

請注意，由于篇幅限制，上述代碼僅為示例框架，具體樣式和交互邏輯需根據實際項目需求進一步完善。同時，文中所提及的HTML標簽實際上是小程序特有的WXML標簽，旨在幫助開發者理解小程序界面構建的基本邏輯。在實際開發過程中，請結合小程序官方文檔進行深入學習和實踐。