• Stars
    star
    925
  • Rank 49,378 (Top 1.0 %)
  • Language
    TypeScript
  • Created over 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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 插件)

More Repositories

1

smart-npm

Auto switch registry according your npm command.
JavaScript
331
star
2

yod-mock

Powerful data generator tool.
JavaScript
122
star
3

tinypng

基于 TinyPNG 封装的一个支持nodejs、命令行和 webpack 的图片压缩工具
TypeScript
112
star
4

crontab

windows 版 crontab
Java
59
star
5

dot-template

create new files according to pre-defined templates
TypeScript
28
star
6

deploy-asset

对前端静态资源进行 Minify, Revisioning 以及 Uploading
JavaScript
13
star
7

elegant-api

优雅的定义 API 接口
JavaScript
10
star
8

holiday

holiday api (only for china now)
TypeScript
8
star
9

require-resolve

Use the node way to resolve required path to absolute path.
JavaScript
7
star
10

ccode

程序员命令行工具集
JavaScript
6
star
11

grunt-deploy-asset

部署静态文件到远程CDN服务器(支持 七牛/FTP/又拍云)
JavaScript
5
star
12

check-style

Using jshint and jscs and eslilnt to check your project javascript files style.
JavaScript
5
star
13

mora-common

TypeScript
4
star
14

post-web

For myself use only
JavaScript
4
star
15

mora-scripts

Some collection scripts by myself
JavaScript
4
star
16

tty-wrap

Wrap text on terminal, support East Asian Character, Combinint Marks and Surrogate Pairs.
JavaScript
3
star
17

data-transform

将源数据转换成一个全新的规范的数据
TypeScript
3
star
18

doc

My doc collection
2
star
19

imagemin

压缩图片
TypeScript
2
star
20

cache-store

数据缓存,支持 React 组件之间数据共享。
JavaScript
2
star
21

swagger-parser

TypeScript
2
star
22

yod

Fantasy data generator.
JavaScript
2
star
23

index-loader

根据 map 文件按需加载需要的脚本
TypeScript
2
star
24

ChromePlugins

Chrome plugins development hub
JavaScript
2
star
25

blog

just a test project
CSS
1
star
26

ylog

Why another logger? That's a good question!
JavaScript
1
star
27

tty-text-size

Get string's real length on ternimal.
JavaScript
1
star
28

dep

Parse shallow depends to deep depends
JavaScript
1
star
29

min-asset

Minify any static file type, includes html, css, js, json, image.
JavaScript
1
star
30

eslint-plugin-serpent

eslint plugin for https://github.com/qiu8310/serpent
JavaScript
1
star
31

style-manager

Manage style, add/replace/delete rules, support media.
JavaScript
1
star
32

demo-web-babel

web project based on karma and mocha and use es6
JavaScript
1
star
33

jsonfy

Parse simple string to json object
JavaScript
1
star
34

generator-nody

A node generator for Yeoman, with mocha, gulp, istanbul, jshint and jasmine supported
JavaScript
1
star
35

qiu8310.github.io

my jekyll blog
JavaScript
1
star
36

host

windows host file manage (ip v4 for now)
JavaScript
1
star
37

naming-transform

Transform object keys naming style.
JavaScript
1
star
38

grunt-spa-bootstrap

用一个固定的HTML文件启动单页面的应用,解除因为前端修改而引起的后端重新部署问题
JavaScript
1
star