为小程序而生的小(jiao)手架

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2967 天前的主题，其中的信息可能已经有所发展或是发生改变。

前言

不久前我们一直所期待的应（ xiao ）用（ cheng ）号（ xu ）终于诞生了，但微信制造了一系列的封闭环境，在内测版中，我们看见了开发其实是十分不便利的。为了能提升咱们的工作效率，小手架由此而生 --- wxapp

wxapp 介绍

优势

1.可以在任意 IDE 中开发

2.可使用 ES6 或 ES5

3.可使用 sass

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

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

6.NODE_ENV 环境切换

劣势

1.由于微信封闭的环境内，所以没有sourcemap，但这不太影响调试（即使是经过编译后的代码，本人测试了出 bug 的代码，还是可以从控制台跳到源码的地方）

2.由于微信封闭的环境内，无法实现reload或者hot reload

PS: 当然如果你不想写 ES6 也是完全可以的在后面统一介绍命令

安装

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

使用

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

// 如
wxapp init first-wxapp

DEV

npm run dev // 默认启用了 ES6 模式

npm run dev-es5 // 不启用 ES6 模式


--- dist
... // 这里的文件是编译处理过后的，和 src 目录结构完全相同     
--- src
    |--- image
    |--- pages
        |--- index
            |--- index.js
            |--- index.scss （可直接编写 sass ）
            |--- index.html (可直接编写 html 文件)
        |--- logs
            |--- logs.js
            |--- logs.json （ json 文件也会实时编译）
            |--- logs.wxml （也可直接写 wxml 文件）
            |--- logs.wxss （也可直接写 wxss 文件）
    app.js
    app.json
    app.sass
...

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

NODE_ENV

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

// ES6 开发模式下
//  ./src/utils/ajaxurl.js
var server1 = 'https://im.server1.url';
var server2 = 'https://im.server2.url';

var server = null;
        
if(NODE_ENV === 'dev') {
	server = server1;
} else if(NODE_ENV === 'production') {
	server = server2;
}
  
module.exports = server;

// ES5 开发模式下  
//  ./src/utils/ajaxurl.js
var server1 = 'https://im.server1.url';
var server2 = 'https://im.server2.url';

var server = null;
        
if('NODE_ENV' === 'dev') { // 这里要写字符串，我会替换这里的字符串
	server = server1;
} else if('NODE_ENV' === 'production') {
	server = server2;
}
  
module.exports = server;