V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
kodo
V2EX  ›  分享创造

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

  •  
  •   kodo · 2016-09-26 11:12:30 +08:00 · 5132 次点击
    这是一个创建于 2978 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    不久前我们一直所期待的应( 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

    开发中往往我们需要有devpro环境,根据不同环境下做一些事情,比如 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;
    

    Build

    npm run build // 默认 ES6 模式

    npm run build-es5 // 使用 ES5 编写模式

    PS :这里有个坑,由于 build 会压缩代码,所以如果你用 ES5 编写,别用 promise 这样的 ES6 的代码, uglify 压缩不支持。

    虽然微信开发者工具用谷歌内核貌似支持部分 ES6 的代码,但现在也不能保证用户真正使用是否支持。如果写了 ES5 模式,建议大家写纯纯的 ES5

    后话

    小程序目前还在内测当中,本人凭着直觉和经验直接做出了这一套脚手架,在测试上可能略有不足。(目前测试了 node5 和 node6 版本, window10 和 mac )。大家有问题可以第一时间给我提 issue ,我会在一天内给你答复。

    未来小程序完全公测了,微信可能会把工程化的问题也一并解决了。但是我还是更愿意在喜欢的 IDE 中编写代码 :)

    最后给出 github 地址:https://github.com/MeCKodo/wxapp-cli

    硬广!

    最近我们创建了一个线上组织 --- 裂变科研中心

    裂变科研中心是一个致力于开源的线上自由组织。

    我们一直保持着对高效、创新、开源的追求。

    希望能给大家在技术或人生的道路上带来不一样的陪伴。

    裂变式的成长期待你的加入。

    第 1 条附言  ·  2016-09-26 11:50:56 +08:00
    ## TODO

    我们知道微信希望我们创建 4 个文件来写 page 或者组件。所以下一个版本我会写个命令创建这 4 个文件的 template 。

    - [ ] 一键创建文件
    8 条回复    2016-09-27 19:06:49 +08:00
    doublleft
        1
    doublleft  
       2016-09-26 11:22:55 +08:00
    不错啊,界面用啥写的
    Bensendbs
        2
    Bensendbs  
       2016-09-26 11:53:46 +08:00
    👍
    v1024
        3
    v1024  
       2016-09-26 11:59:46 +08:00
    神速
    mmzer
        4
    mmzer  
       2016-09-26 12:43:43 +08:00
    高人!
    tianzhidao28
        5
    tianzhidao28  
       2016-09-26 13:32:25 +08:00
    🐂
    rqzheng2008
        6
    rqzheng2008  
       2016-09-26 14:22:58 +08:00 via iPhone
    wxss 是 css 子集,用 scss 写有什么优势么
    wangkai123
        7
    wangkai123  
       2016-09-27 16:39:04 +08:00
    裂变科研中心 开源的产品 List 在哪儿 ? 暂时只有这一个吗
    kodo
        8
    kodo  
    OP
       2016-09-27 19:06:49 +08:00
    @wangkai123 嗯,我们目前是一个新兴组织,一切都在进行中。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5707 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 02:33 · PVG 10:33 · LAX 18:33 · JFK 21:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.