minapp

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

官网:https://qiu8310.github.io/minapp/

作者:Mora

minapp

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

使用

  1. 用 npm 安装命令行工具: npm install -g @minapp/cli --registry "https://registry.npmjs.org/" (避免从淘宝镜像上安装,它上面的还是老版本,已经给他们提了一个 issue
  2. 初始化项目:minapp init <你要创建项目的文件夹> (同时支持创建 js 和 ts 项目)
  3. 安装两个 vscode 插件:minappdot-template(可选,但建议安装)

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

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

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

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

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

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

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

json 文件支持自动提示

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

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

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

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

关于此仓库说明

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

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

TODO

  • [ ] 小程序中的静态资源自动上传到 七牛 (完成我的 file-uploader 组件)
  • [ ] 实现类似于 vue 的功能,可以将所有文件写在一个页面上
  • [ ] webpack 升级到 4.0
  • [ ] 写一个小程序的自动化测试框架

下一篇:作者亲著,重新定义微信小程序开发 —— 上篇

【推荐】开源项目minapp-重新定义微信小程序的开发的更多相关文章

  1. 第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现

    第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现 开发环境搭建 使用自己的AppID新建小程序项目,后端服务选择小程序·云开发,点击新建,完成项目新建. 新建成功后跳转到开发者工具界面 ...

  2. 微信小程序-云开发-实战项目

    微信小程序-云开发-实战项目 微信小程序 微信小程序平台服务条款 https://developers.weixin.qq.com/miniprogram/product/service.html h ...

  3. “我要点爆”微信小程序云开发实例

    使用云开发进行微信小程序“我要点爆”的制作 下一章:“我要点爆”微信小程序云开发之项目建立与我的页面功能实现 接下来我将对“我要点爆”微信小程序进行完整的开源介绍 小程序名称: 我要点爆 查看方式:从 ...

  4. 微信小程序从零开始开发步骤(八)引入框架WeUI

    首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...

  5. vue+uni-app商城实战 | 第一篇:【有来小店】微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录

    一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...

  6. 微信小程序快速开发

    微信小程序快速开发 一.注册小程序账号,下载IDE 1.官网注册https://mp.weixin.qq.com/,并下载IDE. 2.官方文档一向都是最好的学习资料. 注意:1)注册账号之后会有一个 ...

  7. 第六章 “我要点爆”微信小程序云开发实例之爆文详情页制作

    爆文详情页制作 从首页中数据列表打开相应详情页面的方法: 给数据列表中每个数据项加一个点击事件,同时将当前数据项的id暂时记录在本地,然后跳转到详情页面detail goopen: function ...

  8. 小程序语音红包开发中 汉字转拼音的问题 微信小程序红包开发遇到的坑

    公司最近在开发微信小程序的红包功能,语音红包需要用到文字转拼音的功能. 之前介绍过怎么将中文的汉字转为拼音的,具体看下面这篇文章. 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信 ...

  9. 微信小程序从零开始开发步骤(三)底部导航栏

    上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...

随机推荐

  1. junit测试延伸--方法的重复测试

    在实际编码测试中,我们有的时候需要对一个方法进行多次测试,那么怎么办呢?这个问题和测试套件解决的方案一样,我们总不能不停的去右键run as,那怎么办呢?还好伟大的junit帮我们想到了. OK,现在 ...

  2. JAVA中获取文件MD5值的四种方法

    JAVA中获取文件MD5值的四种方法其实都很类似,因为核心都是通过JAVA自带的MessageDigest类来实现.获取文件MD5值主要分为三个步骤,第一步获取文件的byte信息,第二步通过Messa ...

  3. eclipse中注释的代码依然会执行的解决方法

    问题: eclipse中注释的代码在debug的时候居然还能执行.那一刻内心是崩溃的.. 解决方案: 项目重编译显示都正常,并没有报错,然后发现项目编译后,WEB-INF/lib/classes中的c ...

  4. tcpdump 使用

    例子: 首先切换到root用户 tcpdump -w  aaa.cap   -i eth7   -nn -x  'port  9999'  -c  1 以例子说明参数: -w:输出到文件aaa.cap ...

  5. Git的基本原理与常用命令[二]

    标签(linux): git 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 git 的四个区域 四种状态 常用命令 git add #加入暂存(索引区) git ...

  6. 第一章 C++基本认识

    1.使用visual studio时让程序暂停,在return前加上这个: char response; std::cin >> response; 2.c++程序开发流程 3.变量名的命 ...

  7. JavaScript之惰性函数

    前不久看到javascript的性能优化的这里,有关惰性函数 假如同一个函数有许多判断来检测函数,而我们每一次调用,都会判断检测函数 例如: function addEvent (type, elem ...

  8. iOS-RAC从新手开始

    什么是RAC? 其实RAC就是一个简化代码的第三方库ReactiveCocoa,直接用Cocoapods添加到项目里就可以, podfile 文件添加 pod 'ReactiveCocoa',然后终端 ...

  9. XBIM 基于 WexBIM 文件在 WebGL 浏览和加载

    目录 xBIM 应用与学习 (一) xBIM 应用与学习 (二) xBIM 基本的模型操作 xBIM 日志操作 XBIM 3D 墙壁案例 xBIM 格式之间转换 xBIM 使用Linq 来优化查询 x ...

  10. LINUX改变文件大小

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...