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

alighters 发布于2019-08-20 11:16 / 1930人阅读

摘要：前言不久前我们一直所期待的应用号终于诞生了，但微信制造了一系列的封闭环境，在内测版中，我们看见了开发其实是十分不便利的。未来小程序完全公测了，微信可能会把工程化的问题也一并解决了。

前言

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

Build

npm run build // 默认ES6模式

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

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

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

TODO

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

[ ] 一键创建文件

后话

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

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

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

硬广！

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

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

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

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

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

云服务器 GPU云服务器我的小程序小程序附近的小程序免费的小程序自己的小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80476.html

毫无色彩的二哲和他的巡礼之年

摘要：前戏今年，对于我个人而言遭遇了三个重大的转折点。尽可能的把沟通成本用约定和文档降低。学习的这一年可以说年的学习，在上半年的精力，放在了技术上。而下半年则相反。前戏今年，对于我个人而言遭遇了三个重大的转折点。 15年9月大三休学创业，16年9月重新复学大三在2016年4月顺利引进天使轮，公司从厦门集美区搬到了深圳南山区 16年底，我们正在准备接入A轮 16年与15年相比，总体来...

Alex 2019-08-20 14:05 评论0 收藏0
Lumen---为速度而生的 Laravel 框架

摘要：什么是官网是一个由组件搭建而成的微框架是当前最快的框架之一在什么时候使用专为微服务或者设计举个例子如果你的应用里面有部分业务逻辑的请求频率比较高就可以单独把这部分业务逻辑拿出来使用来构建一个小因为是对优化了框架的加载机制所以对资源的要求少很什么是 Lumen?官网 lumen 是一个由 Laravel 组件搭建而成的微框架,是当前最快的 PHP 框架之一! 在什么时候使用 Lume...

104828720 2019-06-27 12:16 评论0 收藏0
微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0
一个专为构建现代PHP应用而生的Web框架

摘要：一个专为构建现代应用而生的框架是一个强大灵活的框架。与其他框架有什么不同速度和简单。本文也对这个当今最流行之一的框架做了一个明确的介绍。到本系列的最后部分，你会感觉到用从头开始编写一个完整的应用是多么的舒服。一个专为构建现代PHP应用而生的Web框架 Laravel是一个强大、灵活的PHP框架。它有非常活跃的社区和工具生态系统。因此它越来越吸引人。Laravel的文档写的也是非常的详...

layman 2019-06-28 18:37 评论0 收藏0