微信小程序模板 微信小程序模板源码

ez-wxlite是一个专为小程序开发设计的模板框架，致力于提供一个简洁、高效且易于维护的开发环境。它被分为两个主要组成部分：

client：小程序的核心源码部分；

server：用于本地服务的工具，而非后端服务，主要功能包括模拟接口和静态文件服务。

可以通过以下链接下载该模板：/wxlite-plus/ez-wxlite/releases

在这个框架中，client部分是核心组成部分，它的设计结构包括：

req：用于网络请求的模块；

router：处理路由功能的模块；

config：存储配置信息的模块；

utils：包含各种公共方法的工具集；

wxs：涉及wxml的公共变量和方法。

框架的核心代码位于client/framework文件夹中，并且在app.js中进行了集中引入。通过调用patch方法，App、Page、Component这三个全局方法将被代理，并进行相应的注入。App({}) 实际上是经过代理的版本，我们可以通过this.$opts获取到注入的options数据。

原生小程序的App方法只能在onLaunch生命周期中访问options，而经过代理后的App则允许在所有生命周期中访问options，提供了更大的灵活性，这种方式同样适用于Page。

对于网络请求，ez-wxlite提供了对wx.request的高级封装。wx.request是一个底层API，它存在一些不足之处：

返回结果为底层数据，需要手动处理statusCode，而开发者往往更关心业务数据部分；

登录机制复杂且不够人性化；

接口管理功能不足，维护性较差。

req作为对wx.request的高级封装，解决了这些问题，并且做了一些额外的设计工作，以提高维护性：

promisify

：支持promise，取代传统的callback方式；

简化response

：返回的数据信息经过简化，只保留必要的业务数据；

method替代url

：通过js api的方式替代直接书写url；

接口缓存

：支持前端接口缓存，便于使用；

自动登录

：登录状态过期时自动重新登录，过程对开发者透明。

更多细节请参见：/wxlite-plus/mp-req

在页面跳转方面，我们遇到了以下问题：

与接口调用类似，跳转面临url管理的问题；

参数类型受限，只支持string类型。

当传递的参数不是string类型，而是number或boolean时，接收端只能得到参数的toString()值，这种情况常常让开发者感到困扰。

为了优化这一点，我们采用了JSON.stringify与encodeURIComponent以及decodeURIComponent与JSON.parse的组合方法，以确保参数的准确性。我们还对不易记住的navigate api进行了优化，提供了更为简便的解决方案。

更多信息请查看：/wxlite-plus/mp-router

server部分是本地服务工具，并非后端服务，它的主要功能包括：

mock服务：当后端接口尚未准备好时，可以使用自定义数据模拟接口调用；

静态文件服务：在开发阶段，使用本地静态资源替代线上cdn资源。

要使用server，请按照以下步骤操作：

在命令行中进入server目录，执行npm包安装：npm install（也可以使用yarn）；

执行npm run dev。

完成以上步骤后，你就可以开始使用了！

mock配置文件位于server/mock/init.js。例如，如果需要一个

获取用户信息

的接口，可以通过访问localhost:8080/user/myInfo来获得预设的json数据。

为了灵活切换静态资源服务环境，我们避免在代码中硬编码静态资源路径，而是利用wxs文件来配置资源前缀。client/wxs目录下存放了wxs文件，其中的

cdnPathTable.wxs

与client/config.apiUrlTable.js类似，用于定义local、dev和release三个环境，在wxml文件中进行调用。

wxs的选择是因为它在wxml中使用非常方便，尽可能简化了开发工作。为了提高开发效率，我们没有在小程序开发工具之外再创建额外的脚手架，而是充分利用现有的开发工具。借助于强大的vscode，我们还提供了以下支持：

eslint支持；

使用typescript进行语法提示。

启用eslint功能只需在根目录下运行npm install，而typescript则主要用于实现小程序api的语法提示功能。虽然现有的vscode插件也能提供类似功能，但由于微信api文档更新较快，插件的维护可能跟不上，因此我们实现了一个本地化的解决方案，手动补充常用api定义，可以显著提高开发效率。