cantonjs / Wxapp Boilerplate
使用 webpack, babel, scss 开发的微信/支付宝小程序项目脚手架
Stars: ✭ 367
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Wxapp Boilerplate
Wxapp Webpack Plugin
📦 微信小程序 webpack 插件
Stars: ✭ 185 (-49.59%)
Mutual labels: wechat-mini-program, webpack, alipay, mini-program, wechat, weapp, wxapp
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+176.84%)
Mutual labels: webpack, babel, boilerplate, scss
Static Html Webpack Boilerplate
🔮 modern tooling for old-school static webpage development
Stars: ✭ 226 (-38.42%)
Mutual labels: webpack, babel, boilerplate, scss
Okam
Mini program development framework
Stars: ✭ 399 (+8.72%)
Mutual labels: alipay, wechat, weapp, wxapp
Tina
💃 一款轻巧的渐进式微信小程序框架
Stars: ✭ 1,153 (+214.17%)
Mutual labels: wechat-mini-program, wechat, weapp, wxapp
Electron React Boilerplate
A Foundation for Scalable Cross-Platform Apps
Stars: ✭ 18,727 (+5002.72%)
Mutual labels: webpack, babel, boilerplate
Alita
一套把React Native代码转换成微信小程序代码的转换引擎工具。我们不造轮子,不发明新框架,只是提供工具把RN扩展到微信小程序端。
Stars: ✭ 1,733 (+372.21%)
Mutual labels: wechat-mini-program, mini-program, wechat
We Validator
💯 简单灵活的表单验证插件,支持小程序、浏览器以及Nodejs端使用
Stars: ✭ 180 (-50.95%)
Mutual labels: wechat-mini-program, wechat, weapp
Frontend Boilerplates
Collection of Boilerplates with ES6, Vue, React, Nuxt, TypeScript, SCSS, Nodejs. Using good practices and file structures to inspire your real projects.
Stars: ✭ 269 (-26.7%)
Mutual labels: webpack, boilerplate, scss
Taro Msparis
🌱用 React 编写的基于Taro + Dva构建的适配不同端(微信/百度/支付宝小程序、H5、React-Native 等)的时装衣橱
Stars: ✭ 1,203 (+227.79%)
Mutual labels: wechat-mini-program, wechat, wxapp
Wechat web devtools
微信开发者工具(微信小程序)linux完美支持
Stars: ✭ 2,664 (+625.89%)
Mutual labels: wechat-mini-program, weapp, wxapp
Gulp Scss Starter
Frontend development with pleasure. SCSS version
Stars: ✭ 339 (-7.63%)
Mutual labels: webpack, babel, scss
Miniprogram Project
微信小程序,诗词大全,成语大全,百家姓,成语接龙(垃圾分类查询小程序)
Stars: ✭ 114 (-68.94%)
Mutual labels: wechat-mini-program, mini-program, wechat
Rageframe2
一个基于Yii2高级框架的快速开发应用引擎
Stars: ✭ 1,553 (+323.16%)
Mutual labels: wechat-mini-program, alipay, wechat
Mina Webpack
🍱 Mina single-file-component meets Webpack
Stars: ✭ 77 (-79.02%)
Mutual labels: wechat-mini-program, webpack, wechat
wxbizdatacrypt
微信小程序加密数据解密算法Go版
Stars: ✭ 132 (-64.03%)
Mutual labels: weapp, wxapp, wechat-mini-program
Fresh Weather
新鲜天气:使用小程序·云开发的小程序
Stars: ✭ 291 (-20.71%)
Mutual labels: wechat-mini-program, mini-program, wechat
Weapp Demo Breadtrip
基于面包旅行 API 制作的微信小程序示例
Stars: ✭ 282 (-23.16%)
Mutual labels: mini-program, wechat, weapp
Js Library Boilerplate Basic
Javascript Minimal Starter Boilerplate - Webpack 5 🚀, Babel 7, UMD, Unit Testing
Stars: ✭ 354 (-3.54%)
Mutual labels: webpack, babel, boilerplate
wxapp-boilerplate
使用 webpack
, babel
, scss
开发的微信/支付宝小程序项目脚手架
功能
- 支持引用
node_modules
模块 - 支持通过配置
alias
来避免../../../
之类的模块引用 - 通过
babel
支持更丰富的ES6
兼容,包括async/await
- 内置
promise
和lodash
(lodash
按需引入相应模块,不会全部引入) - 使用
scss
编写.wxss
文件,内置了一些有用的mixins
和extends
- 提供
__DEV__
和process.env.NODE_ENV
全局常量辅助开发 - 支持自动编译为微信和支付宝小程序
- 提供
__WECHAT__
和__ALIPAY__
全局常量来判断是微信小程序或支付宝小程序 - 通过命令行快速创建微信小程序页面
- 支持在
production
环境下压缩代码
开始使用
确保安装了 Node.js (>= v4.2
) 和 yarn 或 npm
-
git clone
此项目 - 通过命令行工具
cd
到这个目录,执行yarn
安装依赖模块 - 执行
yarn start
开始开发 - 通过微信开发者工具,添加
dist/wechat
目录到项目上
内置命令
-
yarn start
启动webpack
开发微信小程序项目,能监听文件变化自动重新编译 -
yarn start:alipay
启动webpack
开发支付宝小程序项目,能监听文件变化自动重新编译 -
yarn build
编译生成production
环境的代码到dist/wechat
和dist/alipay
-
yarn lint:build
执行yarn build
命令,并使用 eslint 和 stylelint 来校验代码规范 -
yarn prettier
执行prettier
来格式化 src 目录下的代码 -
yarn create-page
快速创建微信小程序页面(更多create-page
的用法,请查看 create-wxapp-page)
兼容微信和支付宝小程序
开发者可以选择一套源代码来开发微信和支付宝小程序,这脚手架支持自动编译 wxml
为 axml
,转换 wx:attr
为 a:attr
,转换 API wx
为 my
,反之亦然。但个别接口在平台上也略有差异,开发者可以通过 __WECHAT__
或 __ALIPAY__
来动态处理。
文件复制
如果 wxml
或 axml
有动态引入文件(如 src="{{'images/' + type + '.png'}}"
),webpack 将不能动态引入,因此会导致打包后可能会存在缺失文件问题。
遇到这种情况,可以通过 copy-webpack-plugin 解决,把整个 images
目录复制到 dist
下即可。
本脚手架已经内置这个插件。为了方便使用,还可以通过在 package.json
里增加一个 copyWebpack
的字符串数组,来实现目录或文件自动复制。例如:
package.json
{
// ...
"copyWebpack": ["images", "icons"]
}
通过执行 yarn start
或 yarn build
,src/images
和 src/icons
目录会自动复制到 dist/wechat/images
和 dist/wechat/icons
目录(支付宝小程序同理)。
更新日志
相关项目
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].