applet-cli

前言

张小龙在2017微信公开课Pro上发布的小程序于2017年1月9日正式上线，微信小程序致力于实现“用完即走”的应用程序理念，使用户不需要下载安装即可使用。微信小程序的好处这里就不多说了，大家自己上网查吧，网上有很多回答。由于微信小程序刚刚发布，并且是一个封闭的环境，虽然微信提供了一个微信开发工具供我们进行微信小程序的开发和调试。但是当前这个工具的功能相对于现在流行的开发工具来说还不健全，为了提高我们的开发效率，“applet” 油然诞生。

applet介绍

参考

项目参考了wxapp项目，自己只是一个初学者，希望通过建立这样的一个项目能学到更多的东西，有写的不好的地方，请谅解！也非常欢迎大家提意见。

优势

1.可以在任意IDE中开发

2.默认使用ES6

3.支持sass和less

4.可以同时编写.html|.wxml，.wxss|.scss|.less 文件，最后都会转换为.wxml和.wxss

5.编写完任何文件（包括.json）只需要去微信开发者工具中点击重启即可预览

6.NODE_ENV 环境切换 (dev|production)

7.支持eslint

安装

// 安装我们的命令
//mac
sudo npm i -g applet-cli
// window
npm i -g applet-cli

使用

// 初始化一个目录结构
applet init [project_name]

// 如
applet init first-applet

DEV

npm run dev

--- dist
... // 这里的文件是编译处理过后的，和src目录结构完全相同     
--- src
    |--- apis // 这里存放于服务器后台通信的API接口
    |--- pages
        |--- index
            |--- index.js
            |--- index.scss（可编写sass,也可直接写wxss文件）
            |--- index.json (json文件也会实时编译)
            |--- index.html (可编写html文件，也可直接写wxml文件)
    app.js
    app.json
    app.sass
...

接着我们只需要打开微信开发者工具，添加项目，那个项目目录指向为dist目录即可。

NODE_ENV

开发中往往我们需要有dev和pro环境，根据不同环境下做一些事情，比如HTTPS的请求链接

//  ./src/utils/util.js
const getRunEnv = function () {
  return process.env.NODE_ENV;
};
  
module.exports = {
  getRunEnv
};

//  ./src/apis/common.js
import { getRunEnv } from 'src/utils/util';
const ENV = getRunEnv();
const getBaseServer = function () {
  if (ENV === 'developer') {
    return 'https://api.dev.fembd.com';
  }
  return 'https://api.fembd.com';
};
  
module.exports = {
  getBaseServer
};

// 使用
import { getBaseServer, getRequest } from 'src/apis/common';
const fetchDataList = function () {
  const server = getBaseServer();
  const api = 'data/list';
  const params = '';
  getRequest(
    server,
    api,
    params,
    options: {
      success: function (res) {
        console.log('获得数据列表[success]: ', res);
        // 自己的处理
      },
      error: function (err) {
        console.log('获取数据列表[error]: ', err);
        // 异常处理
      },
      complete: function (res) {
        console.log('获得数据列表[complete]: ', res);
        // 获取数据列表最终处理
      }
    }
  );
}

Build

npm run build