nanachi 使用指南

司徒正美

现在 nanachi是市面上唯一支持快应用的转译框架，大家想使用一套代码支持包括快应用的多个平台，只能使用nanachi了。扼要介绍一下它的使用方式。 首先我们npm 全局安装它。

1. npm i nanachi-cli -g

复制代码

安装成功了，我们就可以使用nanachi 建立自己的项目，使用init命令

1. nanachi init <projectName>

复制代码

比如我们的项目是aaa, 敲进去，这时有四个模板供你选择，第一个功能是最完全，里面有许多语法与API的教学。但是我们做项目，希望用一个比较干净的模板，那么就选择第4个模板。

这时会弹出一些提示，告诉你想转译什么小程序需要什么命令，我们使用`nanachi watch:quick`就行了。这些命令很简明易解，其中quick, wx, qq, tt这些单词也会出现在其他地方，比如 按平台打包，因此请务必记住它们代表的平台

接提示输入这两行命令就是

这时一个样板工程就出来了，我们需要到快应用官方下载开发者工具进行查看。下载地址为： https://www.quickapp.cn/docCenter/IDEPublicity 我们安装IDE后，打开IDE，选择打开文件夹

再点击右边这个类似新浪微博的眼睛图标

效果图就出来了

接着下来我们讲解一下目录。当然我们可以在这个IDE中开发，但是我建议还是在vs code这样专业的平台，那上面也有快应用的插件。

目录中有source, src, sign, dist等几个重要文件。 其中source是我们开发的源代码，方便我们使用React方式开发项目。 src刚刚通过`nanachi watch:quick`转译出来的快应用代码，里面都是ux文件。 sign是放签名文件，官方有教你如何生成它们，但是这个与src并列的sign也只是一个样板文件，实际项目中，我们需要自己生成签名文件，放在source/sign目录中，当我们构建时，会自动拷贝到外面。 dist是二进制文件，我们点击眼睛图标是用IDE生成，也可以点击上面的Hap栏目的菜单重新生成。

我们打开source/app.js文件，这是一个非常重要的配置文件，它会转译成src/app.ux文件，一般我们只在上面引进新的页面，添加全局回调与改配置。

现在只有一个页面，因此只引入一个页面。页面只是用来演示React.createContext，本身没有什么可看的。但我们发现这些页面都是这样引入React——`import React from '@react'`,这是因为我们要兼容多个平台，每个平台需要React核心库也不一样，比如快应用使用ReactQuick, 百度使用ReactBu, 微信与QQ使用ReactWX。

现在我们改造一下，让它拥有多个页面吧。首先我们建议一个platform目录，然后将index目录移进去。一般来说，首页是由重要的业务组开发的，他们专门开发platform目录下的页面与组件。我们将里面的内容改一下，让它能跳转到其他页面

1. gotoBBS(){
2. React.api.navigateTo({
3. url: "pages/bbs/index/index"
4. })
5. }
6. gotoService(){
7. React.api.navigateTo({
8. url: "pages/service/index/index"
9. })
10. }
11. render() {
12. return (<div class="page" >
13. <Layout>
14. <div onClick={this.gotoBBS.bind(this)} style="width:50%">
15. 跳到论坛
16. </div>
17. <div onClick={this.gotoService.bind(this)} style="width:50%">
18. 跳到客服
19. </div>
20. </Layout>
21. </div>
22. );
23. }

复制代码

有关React.api.navigateTo这些方法的使用，可以见nanachi官网，其实都是基于微信小程序的API实现的，这样我们就不用记快应用与微信这两套APIs。

然后pages下再建两个目录, bbs与service，它们代表不同业务线开发。它们的首页的目录都叫index，然后所有JS文件与样式文件也是index开头。这样方便我们框架动态生成路由。客服的页面如下：

2. import React from '@react';
3. import Layout from '@components/Layout/index';
4. import './index.scss';
5. class P extends React.Component {
6. state = {
7. anyVar: { color: 'red' }
8. };
9. componentDidMount() {
10. // eslint-disable-next-line
11. console.log('bbs did mount!');
12. }
13. render() {
14. return (<div class="page" >
15. <Layout>
16. 客服
17. </Layout>
18. </div>
19. );
20. }
21. }
22. export default P;

复制代码

论坛的页面也大抵如此，只把里面的文字改改。

好了页面开发完成，可以编译了吗？不，我们需要在app.js引入这些页面。

1. import React from '@react';
2. import './pages/platform/index/index';
3. import './pages/bbs/index/index';
4. import './pages/service/index/index';

复制代码

页面可以跳转了。但它长得与微信小程序，缺少了tabBar。我们在app.js中配置一下。

1. static config = {
2. window: {
3. navigationBarBackgroundColor: '#00afc7',
4. backgroundTextStyle: 'light',
5. navigationBarTitleText: 'nanachi',
6. navigationBarTextStyle: 'white'
7. },
8. tabBar: {
9. backgroundColor: '#0077c7',
10. list: [{
11. pagePath: "pages/platform/index/index",
12. text: "首页"
13. }, {
14. pagePath: "pages/service/index/index",
15. text: "客服"
16. }]
17. }
18. };

复制代码

如果我们想分享页面呢？可以照抄这里的内容，需要在页面添加一个onShare方法与在app.js添加onShowMenu方法： https://rubylouvre.github.io/nanachi/documents/share.html 如果我们在构建时打包成不同的分包，用户在使用时按需进行加载，可以参考这里 https://rubylouvre.github.io/nanachi/documents/subpackages.html 在source目录中建立一个quickConfig.json文件

1. {
2. "subpackages": [
3. {
4. "name": "platform",
5. "resource": "pages/platform"
6. },
7. {
8. "name": "bbs",
9. "resource": "pages/bbs"
10. },
11. {
12. "name": "service",
13. "resource": "pages/service"
14. }
15. ]
16. }

复制代码

这时我们发现dist目录多出一个rpks文件，这就是拥有分包功能的二进制文件了。

到此为此，我们没有写太多代码，就实现一个拥有如此丰富功能的快应用了，多页面，可分享，可分包。相信大家跟着官方文档，还能更上一层楼。

小立吗？

"现在 nanachi是市面上唯一支持快应用的转译框架"这一句不太准确哦，Taro 早就支持了https://taro.jd.com

司徒正美

我们公司的快应用 早就在3月份上线了，而taro的快应用转换成功率是很低的，至少它的GITHUB的标语都不敢带快应用: taro-多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信/百度/支付宝/字节跳动小程序、H5、React Native 等的应用。 https://taro.jd.com/ https://taro-docs.jd.com/ 有关娜娜奇在快应用上的研发成果，可以娜娜奇官方查看 https://rubylouvre.github.io/nanachi/documents/intro.html

showers

我想知道，优化能不能实现。 比如现在写了一个「发布订阅」的 js，用「React」的引入方法就是直接 import 了，但是用「快应用」就需要挂在 this.$app.$def 上来进行优化，否则用 import 方法就会在每个页面都定义一次「发布订阅」函数。所有大函数不挂在全局，打包出来 948KB（危险），挂了之后就剩下 797KB。 这个能处理吗？

司徒正美

showers 发表于 2019-7-18 17:50 我想知道，优化能不能实现。 比如现在写了一个「发布订阅」的 js，用「React」的引入方法就是直接 import ...

最好在github上弄一个工程，让我们看你是怎么写的。现在你这样说太抽象了

showers

司徒正美 发表于 2019-7-18 20:08 最好在github上弄一个工程，让我们看你是怎么写的。现在你这样说太抽象了 ...

就是一般 Web 项目引用库，我们用 import 就可以了。但是快应用需要把库挂在全局。