工作中，分别使用微信小程序官方原生语法和跨端框架完成了几个小程序的开发，从上线效果看基本都满足了预期目标。不同开发方式和不同框架各自有其优缺点，在实际项目开发过程中，应该根据实际的项目需求以及团队人员情况做综合选择。

本篇文章全面分析小程序相关框架和技术选型相关技术细节。

一、小程序概述

要对小程序有一个整体的了解，就需要了解移动互联网在国内的发展历程。从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标签，旨在帮助开发者理解小程序界面构建的基本逻辑。在实际开发过程中，请结合小程序官方文档进行深入学习和实践。