nanachi 使用指南

 文章来源于快应用官方论坛

本文作者：“司徒正美”

 

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

 

首先我们npm 全局安装它。

1. npm i nanachi-cli -g

1. nanachi init <projectName>

 

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

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

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

再点击右边这个类似眼睛的图标

效果图就出来了

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

目录中有source, src, sign, dist等几个重要文件。

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

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

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

    gotoBBS(){

        React.api.navigateTo({

            url: "pages/bbs/index/index"

        })

    }

    gotoService(){

        React.api.navigateTo({

            url: "pages/service/index/index"

        })

    }

    render() {

        return (<div >

                <Layout>

                  <div onClick={this.gotoBBS.bind(this)} >

                      跳到论坛

                  </div>

                  <div onClick={this.gotoService.bind(this)} >

                      跳到客服

                  </div>

                </Layout>

        </div>

        );

    }

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

 

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

import React from '@react';

import Layout from '@components/Layout/index';

import './index.scss';

class P extends React.Component {

    state = {

        anyVar: { color: 'red' }

    };

    componentDidMount() {

        // eslint-disable-next-line

        console.log('bbs did mount!');

    }

    render() {

        return (<div class="page">

                <Layout>

                  客服

                </Layout>

        </div>

        );

    }

}

export default P;

 

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

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

import React from '@react';

import './pages/platform/index/index';

import './pages/bbs/index/index';

import './pages/service/index/index';

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

static config = {

        window: {

            navigationBarBackgroundColor: '#00afc7',

            backgroundTextStyle: 'light',

            navigationBarTitleText: 'nanachi',

            navigationBarTextStyle: 'white'

        },

        tabBar: {

            backgroundColor: '#0077c7',

            list: [{

              pagePath: "pages/platform/index/index",

              text: "首页"

            }, {

              pagePath: "pages/service/index/index",

              text: "客服"

            }]

        }

};

 

如果我们想分享页面呢？可以照抄这里的内容，需要在页面添加一个onShare方法与在app.js添加onShowMenu方法：

 https://rubylouvre.github.io/nanachi/documents/share.html

 

如果我们在构建时打包成不同的分包，用户在使用时按需进行加载，可以参考这里：https://rubylouvre.github.io/nanachi/documents/subpackages.html

在source目录中建立一个quickConfig.json文件

{

    "subpackages": [

        {

            "name": "platform",

            "resource": "pages/platform"

        },

        {

            "name": "bbs",

            "resource": "pages/bbs"

        },

        {

            "name": "service",

            "resource": "pages/service"

        }

    ]

}

 

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

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

 

扫码关注，敬请期待快应用更多精彩内容！

快应用生态平台