qiu8310 / minapp

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

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 插件：minapp 和 dot-template（可选，但建议安装）

特点

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

功能概览（在 vscode 编辑器下）

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

非 minapp 用户也可以安装 @minapp/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-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 插件)

minapp's Issues

wx.d.ts 是如何生成的？

wx.d.ts 是如何生成的？怎么样才能确保 minapp 提供的 wx.d.ts 与微信小程序的 api 同步？

如何封装wxp.request

在实际项目中,往往请求头, API的BaseUrl 等参数都是相同的, 我需要统一设置API的BaseUrl 以及相关请求头, 请问如果进一步封装或者修改wxp.request?

［建议］小程序标签补全冲突

在 vue 模板文件中，需要指定 template 的 lang="wxml"就能自动补全，
但是不少其他的脚手架工具，比如mpvue的，如果把模版的template的lang改了，会报错，因为默认lang是html。
希望换个自定义属性也能支持补全，比如
在 vue 模板文件中，需要指定 template 的 minapp="true"就能自动补全，

<template minapp="true"></template>

可否导出微信 api 里面类型的定义，如 CanvasContext？

经常需要使用微信里面的结构，但是 minapp 好像没有导出这些结构，只能使用 any 替代，可否添加 export 导出？

微信插件支持

目前使用微信插件时，编译时会报错

https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html

{
  "usingComponents": {
    "hello-component": "plugin://myPlugin/hello-component"
  }
}

scss 相对路径异常

scss 中多层 import 的情况下， @import 不是相对当前文件的路径， 而是相对于被 import 的文件。

比如:

root
|- c.scss
|- folder
     |- b.scss
     |- folder
          |- a.scss

a.scss

@import '../b.scss';

b.scss

@import '../c.scss'

这种情况会报错，因为 a 中会去寻找 相对 a 的 ../c.scss, 也就是 root/folder/c.scss

xxxify之类api命名调整

minapp里的装饰器都是xxxify这类，个人感觉不是很必要，像spring或者angular都是用的名词命名，直接用对应的名词命名是不是好一点。
在不进行破坏性改动的前提下可以考虑两种都支持

怎么将这个项目跑起来

如果我想做一些修改，然后使用 npm link 将项目跑在本地，需要什么步骤？
试了一下编译发现 ts 报了非常多的错误，minapp-common 里面的 ./Component 找不到，并且这个文件是放进了 .gitignore，不清楚意图。

关于引入echarts的问题？

echarts开发了小程序的引入，但是发现用此框架引入会报错！希望作者可以了解一下。急用！！！！！

源代码中的注释如果有 require 的话，也会解析

需要去除注释中的 require （参考 webpack 是怎么做的）

用 tsx 作为模版文件产生错误

RT，我在本地用 tsx 作为模版文件编译成 wxml, 但是会导致编译失败，提示无法 resolve tsx 文件，需要一个合适的 loader。 tsx 文件并没有被其他文件引入，预期是能忽略掉 tsx 文件

ps: 把 counter.tsx 改成 counter-wxml.tsx 就好了

WARNING in ./src/app.scss.d.ts
[at-loader] TypeScript declaration files should never be required
Error: [at-loader] TypeScript declaration files should never be required
    at compiler (/Users/z/.config/yarn/global/node_modules/awesome-typescript-loader/src/index.ts:54:28)
    at Object.loader (/Users/z/.config/yarn/global/node_modules/awesome-typescript-loader/src/index.ts:16:18)
 @ ./src/app.cjson 16:0-68

WARNING in ./src/components/counter/counter.scss.d.ts
[at-loader] TypeScript declaration files should never be required
Error: [at-loader] TypeScript declaration files should never be required
    at compiler (/Users/z/.config/yarn/global/node_modules/awesome-typescript-loader/src/index.ts:54:28)
    at Object.loader (/Users/z/.config/yarn/global/node_modules/awesome-typescript-loader/src/index.ts:16:18)
 @ ./src/pages/index/index.cjson 3:0-91 11:0-91
 @ ./src/app.cjson

ERROR in ./src/components/counter/counter.tsx
Module parse failed: Unexpected token (3:37)
You may need an appropriate loader to handle this file type.
| import * as css from './counter.scss'
|
| export default function Counter(props: any) {
|   return (
|     <view class={css.counter}>{props.start}</view>
 @ ./src/pages/index/index.cjson 6:0-85 14:0-85
 @ ./src/app.cjson

自定义组件如何使用全局样式？

微信小程序自定义组件可以通过 @import 的方式引入样式，但是项目中使用 sass, @import 的时候会将代码生成到对应的文件， 这样会使代码重复了。

使用wepy之后,文件名会变成 .wpy 触发不了自动补全

如题

webpack 4 的升级计划

不知道什么时候会升级到 webpack 4 呢，另外 cli 能否暴露可自定义 webpack 的配置。

能否扩大 minapp-vscode 的使用范围

插件 minapp-vscode 的使用前提好像是将文件的「语言模式」调为 WXML，但我项目使用的是 min 且对应的「语言模式」是 Vue，好像就没法使用 minapp-vscode 了…

有方法扩大插件的使用范围么，而且将来 minapp 也推 SFC 的话也应该需要这种支持

请问使用 cli 初始化的组件开发模式，在开发过程中如何查看效果？

考虑到通用的组件可以作为一个外部 npm 包导入，使用 cli 初始化了一个 component 项目，但是运行开发模式后发现在 dist 目录下生成的也只是这个组件的代码文件（组件显示需要页面载体），请问开发阶段应该让这个组件在开发者工具中运行查看效果？还有一个组件项目可以包含多个组件吗？

继承了 BaseComponent 的组件不能设置属性，设置了在方法中也取不到

如：

class Comp extends BaseComponent {
  prop1 = true

  method() {
    // 这里可能取不到 prop1 的值
  }
}

这是小程序官方组件的限制，具体还有待验证

如何在非 vscode 编辑器中自动创建 page 和 component 相关的文件

minapp 命令行工具支持编译一个 Component 或 Page 项目，但是不支持在指定目录新建component或page，由于不使用vscode开发，所以没有自动创建相关文件的功能，希望能通过命令实现

内存泄露

编辑多了就会出现这种情况。

如何配置devserver的Proxy

能否在国内的码云上也推一份。

很喜欢你的项目，自己也非常喜欢TS。只是国外网速有点忙，有时候公司的网还上不去，能不能在码云上也推一份代码，谢谢啦

在模版里感知或者校验数据对象的属性 或者 将 tsx 编译成wxml

这个项目非常不错，话说有没有可能支持在模版里感知或者校验数据对象的属性? 或者能像 weact 一样把 tsx 给编译成模版? 之前有过想法用 ts-simple-ast 实现一个 tsx 版的 weact, 不过时间上有点来不及了。。如果 minapp 能支持 tsx -> wxml, css-in-js -> wxss 的话感觉会很棒, 我有时间也可以贡献一点代码。

建议wxp里request返回类型增加泛型

 namespace request {
    type Promised<T> = {
      /**
       * 开发者服务器返回的数据
       */
      data: T
      /**
       * 开发者服务器返回的 HTTP 状态码
       */
      statusCode: number
      /**
       * 开发者服务器返回的 HTTP Response Header
       *
       * @since 1.2.0
       */
      header: any
    }
}

对应的request接口调整

function request<T = any>(OBJECT: request.Param): Promise<request.Promised<T>>

这样在使用的时候就可以指定返回类型了

interface IList {
    code: number;
    list: <{}>[];
}
export async function GetList(name?: string, page?: number) {
  let result =  await wxp.request<IList>({
    url: urlList,
    data: {
      page,
      name
    }
  });

  result.data.code // 自动提示
}

minapp/cli 中检查本地的 minapp/core 和 minapp/mobx，看是否兼容

怎么在vscode调试小程序

你好，怎么让vscode编辑器跟小程序开发工具那样有面板可以调试小程序呢

连接线形式的双向绑定失败

使用双向绑定时

// 成功
<view exampleParams.sync="{{parentExampleParams}}"></view>

// 失败
<view example-params.sync="{{parentExampleParams}}"></view>

// 子组件
 properties = {
    exampleParams: {
      type: Number,
      value: 0
    },
  }

如何 hack 内置的配置?

我想尝试一下加一个 loader 来抽取出 jsx 出来，解决 #5 的问题。。

关于版本升级的指南。

从0.9版本升级到1.0.2需要怎么做呢？希望作者能给一个升级指南的说明。

之前是用的0.9的版本搭建的，现在页面已经做了一大半了，在升级到1.0.2需要怎么操作呢？

谢谢！！！！

1.0.2版本在windows下创建目录时无法自动创建文件。

升级到1.0.2以后在vscode编辑器中pages目录下新建文件夹时，不会自动生成相应的文件。
vscode 已安装minapp 和 dot-template两个插件。
之前0.0.9的项目是可以生成的。

以后会出webstorm插件吗？

在 vscode 中支持 pug 语言自动补全

我暂时没有实现 pug 语言自动补全的计划，欢迎有兴趣者 PR

将minapp-generator的tsconfig.json的target调整为es2017会提示done函数找不到

本来想调试简单一些，直接使用node的async、await，就将target调整为es2017,不用typescript的tslib，结果报done不存在了。
如果调整target为es2017的话async库的调用方式不一样，会走asyncify不传递callback

// async.js L192-211
function asyncify(func) {
    return initialParams(function (args, callback) {
        var result;
        try {
            result = func.apply(this, args);
        } catch (e) {
            return callback(e);
        }
        // if result is Promise object
        if (isObject(result) && typeof result.then === 'function') {
            result.then(function(value) {
                invokeCallback(callback, null, value);
            }, function(err) {
                invokeCallback(callback, err.message ? err : new Error(err));
            });
        } else {
            callback(null, result);
        }
    });
}

我将代码调整了一下，大佬要不要参考一下

// cmd.ts L86
let result = await new Generator(key, node, nodeUrl, nodeSource, genDir)
  .exec(res.markdown, res.promise)
  .then((str) => {
    if (!allResult) allResult = []
    if (str) allResult.push(str)
    return allResult;
  })
  //.catch((e: any) => done(e))

  if(done) {
    done(undefined, result)
  } else {
    return result;
  }

less中px单位编译成rpx

问题如下：

// src/example.less
.example {
  font-size:14px;
}

// dist/example.wxss
.example {
  font-size:14rpx;
}

在某些视图中，我希望字体大小在各种设备中保持一致。

安装第三方包运行不成功

我安装rxjs或者xstream时 代码是正确的 当我使用minapp dev 进行打包时就会报错误

如果不用mobx, 应该怎么做

如果不使用mobx, 应该怎么清理

编译报错！！

λ minapp dev
events.js:183
throw er; // Unhandled 'error' event
^

minapp v 1.0.1

wxp.d.ts 中 connectSocket 没有返回 SocketTask

minapp build 没有读取 NODE_ENV

运行 minapp build --publicPath http://localhost:3000 的时候，NODE_ENV 始终是 production，使用 cross-env NODE_ENV=beta 设置无效，但是 minapp dev的时候 NODE_ENV 的值是正确的。

ts有类型错误好像就不编译了

今天开始用minapp+ts写小程序，碰到一个参数类型是any的错误，控制台提示类型错误

然后微信开发工具没有刷新出编译后的js了，我觉得这个是不是有点严格了，类型错误报错就好，但是应该继续编译。

scss 绝对路径?

貌似目前只能这样引用

@import "../../../../../styles/common";

能不能这样

@import "styles/common";

代码 minimize 后，页面打开空白，个别页面提示 "Component not found in path ..."

手动修改 @minapp/compiler/dist/config/webpack.config.js 删除下面这段代码然后重新编译，代码运行正常：

  if (compiler.minimize) {
    plugins.push(
      new webpack.optimize.UglifyJsPlugin({
        mangle: { except: ['module', 'exports', 'global'] },
        sourceMap: false,
      }),
    );
  }

组件通信与交互

组件间的通讯和交互，有没有类似$emit的方法？

invalid

无法安装。找不到与 VS Code 当前版本 (1.19.3) 兼容的扩展“qiu8310.minapp-vscode”。

vscode 版本1.19.3

本地图片 以及 wxss 中转成 base64 图片?

https://qiu8310.github.io/minapp/docs/doc-attention-on-build.html

对于很多小型 小程序图片资源并不多，如果能一起打包的话不仅开发更加简单，而且加载速度也更快。

为什么的的完全 没有提示

我在vscode .wxml 文件中完全没有提示和自动补全功能，该怎么办

MyComponent 父类生命周期方法中无法调用子类的方法

只能调用 MyComponent 类上的，不能调用子类覆盖的方法，如果删掉MyComponent上的方法则会报undefined错。神奇的是 MyPage 基本同样的代码则完全没有问题。debug 了一波没找到问题。。

scss文件中如何import node_modules中的wxss文件

按照scss中的使用方法，应该是 @import "~wxParse/wxParse.wxss"; 但是不起作用，提示找不到文件

cjson编译以后报错!!

src里面的cjson文件编译以后 路径变成了 \ 微信开发工具报错

关于Page中缺失的一些方法

Hi, 我发现在Page中其实也有selectComponent/selectAllComponents的方法来获取自定义组件的实例，但目前typings里好像暂无相关定义?