【推荐】开源项目minapp-重新定义微信小程序的开发
minapp
重新定义微信小程序的开发
作者:Mora
minapp
重新定义微信小程序的开发
使用
- 用 npm 安装命令行工具:
npm install -g @minapp/cli --registry "https://registry.npmjs.org/"
(避免从淘宝镜像上安装,它上面的还是老版本,已经给他们提了一个 issue) - 初始化项目:
minapp init <你要创建项目的文件夹>
(同时支持创建 js 和 ts 项目) - 安装两个 vscode 插件:minapp 和 dot-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-重新定义微信小程序的开发的更多相关文章
- 第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现
第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现 开发环境搭建 使用自己的AppID新建小程序项目,后端服务选择小程序·云开发,点击新建,完成项目新建. 新建成功后跳转到开发者工具界面 ...
- 微信小程序-云开发-实战项目
微信小程序-云开发-实战项目 微信小程序 微信小程序平台服务条款 https://developers.weixin.qq.com/miniprogram/product/service.html h ...
- “我要点爆”微信小程序云开发实例
使用云开发进行微信小程序“我要点爆”的制作 下一章:“我要点爆”微信小程序云开发之项目建立与我的页面功能实现 接下来我将对“我要点爆”微信小程序进行完整的开源介绍 小程序名称: 我要点爆 查看方式:从 ...
- 微信小程序从零开始开发步骤(八)引入框架WeUI
首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...
- vue+uni-app商城实战 | 第一篇:【有来小店】微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录
一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...
- 微信小程序快速开发
微信小程序快速开发 一.注册小程序账号,下载IDE 1.官网注册https://mp.weixin.qq.com/,并下载IDE. 2.官方文档一向都是最好的学习资料. 注意:1)注册账号之后会有一个 ...
- 第六章 “我要点爆”微信小程序云开发实例之爆文详情页制作
爆文详情页制作 从首页中数据列表打开相应详情页面的方法: 给数据列表中每个数据项加一个点击事件,同时将当前数据项的id暂时记录在本地,然后跳转到详情页面detail goopen: function ...
- 小程序语音红包开发中 汉字转拼音的问题 微信小程序红包开发遇到的坑
公司最近在开发微信小程序的红包功能,语音红包需要用到文字转拼音的功能. 之前介绍过怎么将中文的汉字转为拼音的,具体看下面这篇文章. 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信 ...
- 微信小程序从零开始开发步骤(三)底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...
随机推荐
- junit测试延伸--方法的重复测试
在实际编码测试中,我们有的时候需要对一个方法进行多次测试,那么怎么办呢?这个问题和测试套件解决的方案一样,我们总不能不停的去右键run as,那怎么办呢?还好伟大的junit帮我们想到了. OK,现在 ...
- JAVA中获取文件MD5值的四种方法
JAVA中获取文件MD5值的四种方法其实都很类似,因为核心都是通过JAVA自带的MessageDigest类来实现.获取文件MD5值主要分为三个步骤,第一步获取文件的byte信息,第二步通过Messa ...
- eclipse中注释的代码依然会执行的解决方法
问题: eclipse中注释的代码在debug的时候居然还能执行.那一刻内心是崩溃的.. 解决方案: 项目重编译显示都正常,并没有报错,然后发现项目编译后,WEB-INF/lib/classes中的c ...
- tcpdump 使用
例子: 首先切换到root用户 tcpdump -w aaa.cap -i eth7 -nn -x 'port 9999' -c 1 以例子说明参数: -w:输出到文件aaa.cap ...
- Git的基本原理与常用命令[二]
标签(linux): git 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 git 的四个区域 四种状态 常用命令 git add #加入暂存(索引区) git ...
- 第一章 C++基本认识
1.使用visual studio时让程序暂停,在return前加上这个: char response; std::cin >> response; 2.c++程序开发流程 3.变量名的命 ...
- JavaScript之惰性函数
前不久看到javascript的性能优化的这里,有关惰性函数 假如同一个函数有许多判断来检测函数,而我们每一次调用,都会判断检测函数 例如: function addEvent (type, elem ...
- iOS-RAC从新手开始
什么是RAC? 其实RAC就是一个简化代码的第三方库ReactiveCocoa,直接用Cocoapods添加到项目里就可以, podfile 文件添加 pod 'ReactiveCocoa',然后终端 ...
- XBIM 基于 WexBIM 文件在 WebGL 浏览和加载
目录 xBIM 应用与学习 (一) xBIM 应用与学习 (二) xBIM 基本的模型操作 xBIM 日志操作 XBIM 3D 墙壁案例 xBIM 格式之间转换 xBIM 使用Linq 来优化查询 x ...
- LINUX改变文件大小
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...