账户登录
蒲公英账户可直接登录
还没有账号?免费注册
忘记密码 ?
注册账号
注册的账号通用蒲公英旗下的所有产品
已有账号,直接登录
发布
发布小程序
发布组件
微信小程序脚手架
上传者:李泽辰 上传时间:2017-04-11 17:04:18
1178 1
开发框架
下载 喜欢
1.可以在任意IDE中开发
2.可使用ES6或ES5
3.支持sass和less
4.可以同时编写.html|.wxml,.wxss|.scss|.less 文件,最后都会转换为.wxml和.wxss
.html|.wxml
.wxss|.scss|.less
.wxml
.wxss
5.编写完任何文件(包括.json)只需要去微信开发者工具中点击重启即可预览
6.NODE_ENV 环境切换 (dev|production)
7.支持eslint (在gulpfile文件打开36行注释即可,下个版本会集成到cli配置选项中)
1.由于微信封闭的环境内,所以没有sourcemap,但这不太影响调试(即使是经过编译后的代码,本人测试了出bug的代码,还是可以从控制台跳到源码的地方)
sourcemap
2.由于微信封闭的环境内,无法实现reload或者hot reload
reload
hot reload
PS: 当然如果你不想写ES6也是完全可以的 在后面统一介绍命令
// 安装我们的命令 //mac sudo npm i -g wxapp // window npm i -g wxapp
// 初始化一个目录结构 wxapp init [project_name] // 如 wxapp init first-wxapp
npm run dev // 默认启用了ES6模式
npm run dev
npm run dev-es5 // 不启用ES6模式
npm run dev-es5
--- 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目录即可。
dist
开发中往往我们需要有dev和pro环境,根据不同环境下做一些事情,比如HTTP的请求链接
dev
pro
// 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;
npm run build // 默认ES6模式
npm run build
npm run build-es5 // 使用ES5编写模式
npm run build-es5
PS:这里有个坑,由于build会压缩代码,所以如果你用ES5编写,别用promise这样的ES6的代码,uglify压缩不支持。
虽然微信开发者工具用谷歌内核貌似支持部分ES6的代码,但现在也不能保证用户真正使用是否支持。如果使用ES5模式,建议大家写纯纯的ES5
我们知道微信希望我们创建4个文件来写page或者组件。所以下一个版本我会写个命令创建这4个文件的template。
github地址:https://github.com/MeCKodo/wxapp-cli
发布小程序组件
查看小程序
小程序组件
窝推荐
小程序统计工具
电话:400 866 0210 (工作日 9:00 ~ 18:00)
QQ群:385046190
客服:service@pgyer.com
商务:bd@pgyer.com
版权所有 © 西安点测网络科技有限公司 2014 - 2019 陕ICP备15010407号-4
微信小程序脚手架
上传者:李泽辰 上传时间:2017-04-11 17:04:18
1178 1
开发框架
下载 喜欢
优势
1.可以在任意IDE中开发
2.可使用ES6或ES5
3.支持sass和less
4.可以同时编写
.html|.wxml
,.wxss|.scss|.less
文件,最后都会转换为.wxml
和.wxss
5.编写完任何文件(包括.json)只需要去微信开发者工具中点击重启即可预览
6.NODE_ENV 环境切换 (dev|production)
7.支持eslint (在gulpfile文件打开36行注释即可,下个版本会集成到cli配置选项中)
劣势
1.由于微信封闭的环境内,所以没有
sourcemap
,但这不太影响调试(即使是经过编译后的代码,本人测试了出bug的代码,还是可以从控制台跳到源码的地方)2.由于微信封闭的环境内,无法实现
reload
或者hot reload
安装
使用
DEV
npm run dev
// 默认启用了ES6模式npm run dev-es5
// 不启用ES6模式接着我们只需要打开微信开发者工具,添加项目,那个项目目录指向为
dist
目录即可。NODE_ENV
开发中往往我们需要有
dev
和pro
环境,根据不同环境下做一些事情,比如HTTP的请求链接Build
npm run build
// 默认ES6模式npm run build-es5
// 使用ES5编写模式PS:这里有个坑,由于build会压缩代码,所以如果你用ES5编写,别用promise这样的ES6的代码,uglify压缩不支持。
虽然微信开发者工具用谷歌内核貌似支持部分ES6的代码,但现在也不能保证用户真正使用是否支持。如果使用ES5模式,建议大家写纯纯的ES5
TODO
我们知道微信希望我们创建4个文件来写page或者组件。所以下一个版本我会写个命令创建这4个文件的template。
github地址:https://github.com/MeCKodo/wxapp-cli