Skip to content

qiu8310/minapp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Feb 21, 2020
9132e7a · Feb 21, 2020
Feb 27, 2018
Feb 16, 2018
Jun 8, 2018
Feb 21, 2020
Feb 21, 2020
Mar 2, 2018
Feb 26, 2019
Feb 20, 2020
Jul 1, 2018
Feb 6, 2018
Jul 30, 2018
May 11, 2019
Oct 7, 2018
Jan 9, 2019
May 3, 2018
Feb 20, 2018
Mar 9, 2018

Repository files navigation

minapp

重新定义微信小程序的开发

更新日志

minapp 2.0.0 已经发布,新版本主要采用了 webpack 4,v1.x升级到v2.x请查看

介绍

minapp 是为开发微信小程序而打造的一整套提升开发体验的工具:

  • 提供一个命令行工具 @minapp/cli,用它可以快速创建一个项目,并可以用 webpack 来构建生成的项目;
  • 提供一个开发框架 @minapp/core,此框架是完全兼容原生小程序代码的框架,支持使用 class 的方式来开发,支持代码自动补全,同时提供微信所有 api 的自动补全
  • 提供一个集成了 mobx 的框架 @minapp/mobx,此框架主要给 @minapp/core 注入了 mobx,可以让你轻松使用 mobx 来管理全局数据
  • 提供一个 vscode 插件 minapp-vscode,此插件主要是针对小程序的 wxml 模板语言,可以自动补全所有的组件、组件属性、组件属性值等等

注意:使用 minapp 后,还是需要使用微信官方提供的"微信开发者工具"来测试

使用

  1. 用 npm 安装命令行工具: npm install -g @minapp/cli
  2. 初始化项目:minapp init <你要创建项目的文件夹> (同时支持创建 js 和 ts 项目)
  3. 安装两个 vscode 插件:minappdot-template(可选,但建议安装)

特点

  • 完全兼容原生小程序,所有原生小程序代码可以直接迁移到 minapp 的环境中
  • 集成 webpack 和 webpack-dev-server,编译有保障
  • 可以选择使用 mobx,方便管理全局数据
  • 所有语言在 minapp 的环境中都能自动补全,开发体验超级棒(见下面的功能概览
  • 支持数据双向绑定
  • setData 性能优化

功能概览(在 vscode 编辑器下)

wx 所有接口都有智能的提醒,同时包括接口的参数,和返回值

wx接口示例

非 minapp 用户也可以安装 @minapp/wx 来获取此功能,参见这里

提供一个 promise 版的 wx 接口 wxp,和 wx 一样,只是它会将 wx 中所有需要 success/fail/complete 三个参数的函数 promise 化

  • wxp 中也支持使用 success 回调
  • wxp 给 Promise 添加了一个 finally 方法;如,你可以这样用 wxp.getUserInfo().finally(() => { /* do something */ })

wxp示例

集成 mobx,可以非常方便的修改全局数据,并自动更新当前页面状态

  • 注入 Store 只需要在 appify 函数中添加 Store 对象即可
  • Page 和 Component 中都默认注入了 Store 对象,你可以使用 this.store 获取

mobx

wxml 模板语言支持语法高亮,组件智能提示,组件属性智能提示(需要安装 vscode 插件 minapp

欲了解更多此插件的功能详情,点此查看

wxml

json 文件支持自动提示

json

新建一个 page 文件夹时,自动生成相关文件(需要安装 vscode 插件 dot-template

  • 自动为你创建相关的同名的文件,包括 js/json/wxml/scss,并且这些模板文件你可以随时在 .dtpl 文件夹下修改
  • 自动将新建的 page 路径注入到 app.json 文件夹中

新建 Page 示例

小程序 Page 中支持函数自动提示

Page 中的函数自动提示示例

同理,新建组件文件夹时,也会创建相关的文件;同时组件中的生命周期函数也会自动提示

Component 示例

关于此仓库说明

这不是一个项目,是有好几个项目组合而成的,用的是 lerna 开发工具,其它项目在 packages 目录下,这里对其中的几个主要项目做个简要概述

  • minapp-generator: 此模块负责解析微信官方文档,生成结构化的数据,供其它模块使用
  • minapp-wx: 微信所有原生 api 的 TypeScript 定义,另外提供一个 promise 版的 wx 接口
  • minapp-core: 开发框架,需要依赖 minapp-wx
  • minapp-mobx: 集成 mobx 的开发框架,需要依赖 minapp-core
  • minapp-cli: 提供给用户的命令行工具,并可以快速创建一个新项目
  • minapp-vscode: vscode 插件,为wxml提供语法高亮、标签与属性的自动补全

TODO

  • 小程序中的静态资源自动上传到 七牛 (完成我的 file-uploader 组件)
  • 实现类似于 vue 的功能,可以将所有文件写在一个页面上
  • webpack 升级到 4.0
  • 写一个小程序的自动化测试框架
  • 自定义组件支持智能提示(需要修改 minapp-vscode 插件)