盘点 7 个超棒的微信小程序项目

小程序上线后，改版了很多次，包括一些 Api 接口也有改动。如果你学习一个很久之前的小程序项目是没有意义的，本文推荐的小程序都是最近有更新的。相信在你学习、部署的过程中，不会遇到很多问题。

本文推荐的项目从入门到进阶都有，收藏起来吧。

02 小程序书店

技术栈：Taro + Taro UI + Redux + Webpack + ES6 + Mock。这个项目可以作为你第一个小程序练手项目。

这个小程序非常简单，可以作为初学者第一个实战项目。帮助新手理解 Taro 与 Redux 的配合方式与 Taro 的基本使用。本项目还提供了一个快速搭建本地 mock 服务的解决方案。

除此之外，这个项目还提供了学习文档：

03 高仿喜马拉雅

如果你仅仅有 HTML CSS Js 的知识储备，想开发一个属于自己的小程序，这个 Demo 再适合你不过了，这个高仿喜马拉雅是一个初级项目完全使用微信小程序原生开发，没有使用自定义组件，非常的适合微信小程序开发新手。

04 网易云音乐小程序

基于Taro与网易云音乐 api 开发，技术栈主要是：typescript+taro+taro-ui+redux+react-hooks。

目前主要是着重小程序端的展示，主要也是借此项目强化下上述几个技术栈的使用，打造一个最佳实践项目，通过这个项目也可以帮助你快速使用 Taro 开发一个属于你自己的小程序。

这是该小程序实现的一些功能：

小程序 GitHub Trending Hub 是一个以 Feed 流形式查看 GitHub Trending 仓库集合的工具，通过它可以及时查看最近更新的热门仓库。

刚刚提及的项目适合新手入门，这个小程序适合进阶选手。这个程序涉及很多组件的使用比如：

07 情书站点

第一个项目是校园小情书的微信小程序，该项目功能包括表白墙、树洞、校园论坛。

下载。

毕业论文选题系统是基于微信小程序，后端是基于java编程语言，ssm框架，mysql数据库和IDEA工具开发，本系统分为学生，教师，管理员三个角色；学生可以注册登陆系统，查看系统公告，选课论文课题，提交课题论文，查看论文审核，答辩结果等信息；教师可以发布课题，审核学生论文，课题答辩结果，在线回复学生留言；管理员对学生，教师，公告，论文，选题，答辩等进行管理；本系统功能齐全，文档齐全，适合作为微信小程序毕业设计来参考和学习。

一技术环境

jdk版本：18 及以上

ide工具：IDEA ，微信小程序开发工具

数据库: mysql57 （必须57）

编程语言: Java

tomcat: 80 及以上

java框架：SSM

maven: 361

前端：layui ，微信

详细技术：HTML+CSS+JS+JSP+JAVA+SSM+MYSQL+JQUERY+MAVEN+微信开发工具

二项目文件（项目获取请看文末官网）

在这里插入描述

三系统功能

在这里插入描述

四代码示例

package comlmucontroller;

/

和登陆有关的都在这里

/

import comopensymphonyxwork2ActionContext;

import comopensymphonyxwork2ActionSupport;

import comlmumodelRole;

import comlmumodelUser;

import comlmuserviceRoleService;

import comlmuserviceUserService;

import comlmuutilsJsonUtils;

import comlmuutilsUserUtils;

import orgapachecommonscollectionsmapHashedMap;

import orgapachestruts2ServletActionContext;

import orgspringframeworkbeansfactoryannotationAutowired;

import orgspringframeworkcontextannotationScope;

import orgspringframeworkstereotypeController;

import javaioIOException;

import javautilHashMap;

import javautilMap;

@Controller("loginController")

@Scope("prototype")

public class LoginController extends ActionSupport {

@Autowired

private UserService userService;

@Autowired

private RoleService roleService;

private User user;

private Map<String, Object> map = new HashMap();

public User getUser() {

return user;

}

public void setUser(User user) {

thisuser = user;

}

public UserService getUserService() {

return userService;

}

public void setUserService(UserService userService) {

thisuserService = userService;

}

/

用户登陆

@return

/

public void index() throws IOException {

User user1 = userServicegetUser(user);

if (user1 != null){

if (user1getIsSh() == 1){

if (user1getRole()getEnName()equals("admin")){

ActionContextgetContext()getSession()put("user", user1);

}

if (user1getRole()getEnName()equals("js")){

ActionContextgetContext()getSession()put("user1", user1);

}

if (user1getRole()getEnName()equals("xs")){

ActionContextgetContext()getSession()put("user2", user1);

}

mapput("flag", 1);

mapput("url", "login_indexsdo");

mapput("id", user1getId());

JsonUtilstoJson(map);

} else {

mapput("flag", 2);

JsonUtilstoJson(map);

}

} else {

mapput("flag", 3);

JsonUtilstoJson(map);

}

}

public String indexs() throws IOException {

User u = UserUtilsgetUser();

if (u != null){

ActionContextgetContext()put("user", u);

String ss = ugetRole()getEnName();

ActionContextgetContext()put("role", ugetRole()getEnName());

}

return SUCCESS;

}

//登陆页面

public String login() {

return SUCCESS;

}

//退出

public String tuichu() {

ActionContext ac = ActionContextgetContext();

Map session = acgetSession();

sessionremove("userName");

sessionremove("userId");

ServletActionContextgetRequest()getSession()invalidate();

return "login";

}

}

package comlmucontroller;

/

用户新增

/

import comopensymphonyxwork2ActionContext;

import comopensymphonyxwork2ActionSupport;

import comopensymphonyxwork2ModelDriven;

import comlmumodelRole;

import comlmumodelUser;

import comlmuserviceRoleService;

import comlmuserviceUserService;

import comlmuutilsJsonUtils;

import comlmuutilsPager;

import comlmuutilsUserUtils;

import orgspringframeworkbeansfactoryannotationAutowired;

import orgspringframeworkcontextannotationScope;

import orgspringframeworkstereotypeController;

import javaawteventFocusEvent;

import javaioIOException;

import javautilDate;

import javautilHashMap;

import javautilMap;

@Controller("userController")

@Scope("prototype")

public class UserController extends ActionSupport implements ModelDriven<User> {

@Autowired

private UserService userService;

@Autowired

private RoleService roleService;

private User user;

private Integer userId;

private Map<String, Object> map = new HashMap();

/

list

@return

/

public String list() throws IOException {

User user1 = UserUtilsgetUser();

if (user1 == null || user1getId() == null){

ActionContextgetContext()put("login", 1);

return SUCCESS;

}

Pager<User> pagers = null;

Role role = user1getRole();

if (rolegetEnName()equals("admin")) {

pagers = userServicegetList(user);

ActionContextgetContext()put("pagers", pagers);

ActionContextgetContext()put("user", user1);

ActionContextgetContext()put("role", role);

ActionContextgetContext()put("bean", user);

return SUCCESS;

} else if (rolegetEnName()equals("xs") || rolegetEnName()equals("js")) {

pagers = userServicegetList(user1);

ActionContextgetContext()put("pagers", pagers);

ActionContextgetContext()put("bean", user);

return SUCCESS;

}

return null;

}

/

跳转add

@return

/

public String add() {

Pager<Role> pagers = roleServicepagers();

ActionContextgetContext()put("pagers", pagers);

return SUCCESS;

}

/

查询修改

@return

/

public String edit() {

User bean = userServicefindById(userId);

Pager<Role> pagers = roleServicepagers();

ActionContextgetContext()put("bean", bean);

ActionContextgetContext()put("pagers", pagers);

return SUCCESS;

}

/

审核

@return

/

public void updateSh() throws IOException {

usersetIsSh(1);

userServiceupdates(user);

mapput("flag", true);

mapput("url", "user_listdo");

JsonUtilstoJson(map);

}

/

更新

@return

/

public String update() throws IOException {

if (usergetPass()equals("")){

usersetPass(null);

}

userServiceupdates(user);

mapput("flag", true);

mapput("url", "user_listdo");

JsonUtilstoJson(map);

return SUCCESS;

}

/

保存

@return

/

public void save() throws IOException {

if (userServicegetUser(user) != null){

mapput("flag", false);

mapput("url", "login_logindo");

JsonUtilstoJson(map);

} else {

usersetTime(new Date());

userServicesave(user);

mapput("flag", true);

mapput("url", "login_logindo");

JsonUtilstoJson(map);

}

}

public void delete() throws IOException {

User user1 = userServicefindById(userId);

user1setIsDelete(1);

userServiceupdate(user1);

mapput("flag", true);

mapput("url", "user_listdo");

JsonUtilstoJson(map);

}

@Override

public User getModel() {

if (user == null) {

user = new User();

}

return user;

}

public Integer getUserId() {

return userId;

}

public void setUserId(Integer userId) {

thisuserId = userId;

}

public User getUser() {

return user;

}

public void setUser(User user) {

thisuser = user;

}

}

微信小程序上线大半年，大部分技术原理也有文章介绍了，本文尝试从需求出发探讨微信小程序技术方案的来源，以及最近公测的支付宝小程序技术方案的考量。

微信小程序

微信小程序的需求是让第三方开发者可以接入，可以使用微信的提供的接口去开发应用嵌入在微信里。对于这个需求，最简单的实现方案是：让外部开发者开发纯H5应用，在微信的H5容器里打开，容器提供微信native接口，就行了。在有小程序之前，已经有很多这样的业务接入，像京东购物，钱包里的各种友商大众点评/滴滴出行等，都可以认为是一个“小程序”，内嵌在微信里，能调用微信native接口，是不是沿着这种模式下去，把相应的接口开放给第三方，再提供个入口就行了？

实际上这种简单的方案不能满足需求，在产品上微信小程序有另外两个很重要的需求：

管控。作为一个平台必须对接入的应用有管控能力，必须能尽量精确控制应用的内容和类型，毕竟若出现非法应用平台是要承担责任的，H5的方式太过自由，开发者可以随时改变整个应用的内容，平台难以检测到这些改变，无法管控。另外H5开发质量参差不齐，平台也无法管控，这对于一向有洁癖的微信来说无法接受。

体验。作为一个“小程序”需要让体验接近原生，而上述像京东购物这些普通H5页面的体验不太行，包括启动速度/页面切换流畅度都有问题，跟原生体验没法比。

所有小程序的技术方案都是为了这两个需求服务。

管控

为了满足管控的需求，技术上微信做了两个事情：小程序框架和分离JS运行环境。

框架/DSL

H5太自由，首先要做的就是限制它的自由，怎样限制？自然是做个框架套住，让开发者只能按框架的规则去开发。那应该使用怎样的框架？

在PCSNS时代，Facebook做开放平台时有类似的场景，为了第三方开发者能在Facebook平台上开发，同时又能限制住开发者的权限，Facebook要求开发者使用自定义的一套DSL(FBML)去开发，而这个DSL能怎么写，最终能转成什么，如何执行，都是平台说了算，同时也可以很方便做代码扫描和审查。

小程序正好能借鉴这样的设计思路，界面不使用HTML开发，而是自定义一套DSL，这样就可以很容易配合审核/代码扫描/域名限制等系列措施去做管控，这就是小程序这一套框架的来源。这套框架通过wxml去描述界面，wxss描述样式，js去处理逻辑和数据，再通过工具一系列处理把这些转为HTML/CSS/JS显示在webview上，并处理界面交互和数据更新。

这样用一套框架去限制开发方式，再造一层DSL，除了管控外还有一个好处，就是容易进行针对性优化，DSL最终转成什么，最终如何执行渲染都由框架决定，上层不感知，可以做成由webview渲染，有条件也可以用类似RN的方案自己实现渲染层。

JS环境

通过框架限定开发方式后，管控上还有个问题，就是如何限制应用端类JS语言调用domAPI？小程序跑在webview上，渲染时必然要通过JS操作dom，如果小程序框架和应用JS代码都有权限操作dom，应用可能会通过各种方式在上线后绕过检查，注入JS调用dom接口去修改页面结构和内容，变成跟审核时不一样的应用。怎样能限制应用的JS调用dom的权限？微信想了个比较创新的解决方案，就是：JS运行环境与浏览器分离，运行在单独的JS引擎上。

脱离了浏览器，JS自然没有dom的调用权限，任何跟webview界面相关的API都无法拿到。而小程序框架核心JS运行在webview上，可以自由操作dom，通过小程序框架定义的机制，应用端通过wxml/wxss定义固定的渲染样式，JS端只管数据绑定，数据可以通过native桥梁从JS引擎传递到webview，JS端无法做任何渲染相关的操作，可以对渲染的内容有完整的管控权。

独立的JS运行环境除了满足管控需求外，也额外带来一些好处和一些坏处，好处在于：

多个页面可以共享一个JS运行环境，数据可以很方便地共享，整个小程序生命周期里共享同一个上下文，更接近APP的开发体验。

JS与页面渲染分离并行执行，不会出现JS执行时卡住页面渲染的情况，提升渲染性能。

坏处在于：

多了数据序列化传输的开销，数据需要从JS传到webview给视图层渲染，需要序列化为字符串格式再进行传输。

iOS上WKWebview的JS引擎比JavaScriptCore多了JIT优化，执行速度快很多倍，小程序的JS运行在JavaScriptCore上无法享受到这个优化。

由于管控需求过于刚需，这个方案带来坏处可以接受。

体验

小程序最主要的两个技术点—框架和JS运行分离都是源自管控需求，而体验上的需求就是由各种细致的性能优化组成了，很多文章也分析过，这里简单说下，包括：

离线包：整个小程序打包下发，不需要打开每个页面都去请求，减少第二次打开时间以及页面切换时间。

预加载：预加载多一个wkwebview放后台，用户打开小程序时省去初始化wkwebview时间。另外对于一个小程序内的页面切换，得益于框架的设计，可以做到预渲染模板，切换时再填充数据，加快渲染速度。

缓存：退出小程序后不会立即销毁，会在后台继续跑5分钟，在这期间用户切回小程序时速度快。

视觉：小程序首次加载通过loading和动画的方式过渡，拒绝白屏，给人一种快的感觉，同时提升了小程序的标识度。

剩下的就是围绕小程序这个平台的周边建设了，像组件，native接口，IDE，后台管理，版本管理，权限控制等基础支持。

支付宝小程序

策略

微信小程序推出时主要面向的场景是线下，希望商家能开发小程序，做像点菜买票这样的即时性应用，提升线下商户体验，支付宝作为线下战场的主要竞争对手自然要跟进。

支付宝要做小程序应该怎么做？可以根据自身的情况，定义另一套技术体系，让第三方接入。但这样的话第三方如果要同时接入微信和支付宝，需要开发两套程序，成本很高，而微信有先发和平台优势，很可能变成只开发微信小程序而放弃接入支付宝小程序，所以最好的做法是降低这里的接入成本，让微信小程序的代码可以复用在支付宝小程序上。所以支付宝小程序对外的框架/API/组件必须是跟微信小程序接近或力求一致，技术上没得选择，所以可以看到支付宝小程序公测版的文档很多跟微信一致。

实现

支付宝小程序框架对外接口是跟微信一样，又因为同样有管控/安全和体验的需求，有些策略是类似的，像独立JS环境，离线包，缓存策略等，但在小程序框架的实现上就跟微信完全不一样。小程序框架作为一层屏蔽了实现细节的DSL层，最终通过什么技术手段实现都可以是由框架底层自由定制的，这边底层架构基于蚂蚁前端团队多年的积累，最终web版小程序是以react为基础实现。

ReactNative

除了对外的跟微信一致的web版小程序，内部一直在尝试ReactNative版小程序，渲染层不适用webview，而是用RN去渲染，提升性能和体验，这也是小程序DSL层带来的好处，底层渲染引擎可以很方便地替换实现方案，甚至同时存在多套方案。

很多人问为什么不用weex，按我理解首先是蚂蚁的前端技术栈基于react，切换成本高，另一个RN相对weex成熟度高，社区支持度高，并保持着不间断的更新，相对友好。

RN本身不跨平台，iOS/Android有各自的写法，在RN的使用上，业界很多人各自实现了基于RN的跨三端或两端的开发方式（例如JDReact），也就是一次开发，能同时支持RN在iOS/Android两端做原生渲染，也支持fallback到webview渲染。这里小程序也算是这样一套方案，上层通过自定义DSL开发业务，部署时通过工具分别转换成三个平台不同的代码，在三个平台运行。

内部应用

小程序是一套对外的方案，主要用于第三方应用接入，因为上文也说了，框架上很多技术方案都是为了满足对第三方管控和安全方面的需求，而小程序相关的很多体验优化其实用纯H5也可以做到，内部业务用web版小程序开发并没有带来什么好处，反而增加学习成本。但RN版小程序不一样，它有一些优势，包括：

RN相对webview性能优势明显，秒开率高，交互也更流畅。

相对于单纯使用RN开发，使用小程序可以屏蔽平台差异，实现跨平台一次开发。

小程序有配套的开发环境/IDE/包管理等基础设施支持，无需再重复建设。

对于业务开发者，小程序不是全新的一套开发方式，在业界可复用，对于框架实现者，RN也是业界流行开源方案，有强大的社区支持。对内对外都避免了另外创建一套只能在内部使用的技术体系，极大降低技术成本。

基于这些原因，在蚂蚁财富这边一些内部原本应该使用H5实现的业务，也正尝试更多地使用小程序实现，以提升用户体验，目前部分基于小程序RN版开发的业务已在线上稳定运行，后续也会继续尝试把小程序RN版持续打造成高性能稳定的三端统一动态化方案。