会员登录 - 用户注册 - 设为首页 - 加入收藏 - 网站地图 为小程序而生的小(jiao)手架!

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

时间:2025-11-05 03:58:36 来源:益强数据堂 作者:数据库 阅读:700次

前言

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

(责任编辑:系统运维)

推荐内容
  • 希捷2T新睿品移动硬盘的高性能和可靠性(解锁高速存储,带给您卓越的数据传输体验)
  • ATHWS770IS耳机的音质表现与舒适度(深入了解ATHWS770IS耳机的声音特点与佩戴体验)
  • 穿墙路由器的优势及应用领域(以穿墙路由器怎么样为主题的综述与分析)
  • 探析西部数据固态混合硬盘的性能和优势(解读西部数据固态混合硬盘的创新技术与应用前景)
  • 夏普46寸NX265A的性能评测(一款超值的高清电视,细节展现更真实)
  • 256M显卡的性能表现及适用场景(解析显存为王的时代——256M显卡的优势与限制)