微信小程序开发之——组件化框架WePY-快速开始
2021/10/27 17:10:03
本文主要是介绍微信小程序开发之——组件化框架WePY-快速开始,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一 概述
- WePY (发音: /'wepi/) 是小程序上最早的一款类 Vue 语法的开发框架
- WePY参考了Vue.js,对原生小程序的开发模式进行了再次封装,贴近MVVM架构
- WePY支持组件开发,单位件模式,还支持外部加载的npm包
二 WePY的特征
- 开发风格:接近于Vue.js,支持组件Props传值,自定义事件、组件分布式复用等
- 组件化:组件化开发,完美解决组件隔离,组件嵌套,组件通信等问题
- NPM:完美兼容所有平台依赖的npm资源包
- Promise:通过polyfill,让小程序完美支持Promise解决回调烦恼
- ES2015:可使用Generator Function/Class/Async Function等特性
- 优化:对小程序本身的优化,如请求队列处理,优雅的事件处理等
- 编译器:支持样式编译器:Less/Sass/Styus,模板编译器:wx-ml/Pug
- 插件:支持多种插件处理,如文件压缩,图片压缩,内容替换等
- 框架大小:压缩后24.3kb即可拥有所有框架功能
三 项目地址
Tencent/wepy
四 构建项目
4.1 安装依赖(已安装node)
全局安装 WePY CLI 工具
npm install @wepy/cli -g
4.2 创建项目
创建一个空白的目录作为项目目录,在命令提示符中切换到该目录,通过wepy init初始化项目
wepy init standard myproj # 使用 standard 模板初始化项目
根据提示信息,配置项目(Enter,使用默认配置)
? Project name myproject ? AppId touristappid ? Project description A WePY project ? Author orange ? Use ESLint to lint your code? Yes ? Choose a state container Vuex [15:37:13] info Generated "myproject".
4.3 进入项目并安装依赖
$ cd myproj # 进入到项目目录 $ npm install # 安装项目依赖包
4.4 监听并且编译项目
执行如下命令开启实时编译,开启后,会自动监控src目录中的代码更改
$ npm run dev # 监听并且编译项目
五 WePY导入微信开发工具
微信开发者工具选择myproject
根目录导入
用小程序开发工具打开,并选择AppID
导入后,项目便已完成后,项目结构及预览图
六 项目结构
6.1 项目结构图
6.2 说明
- dist:小程序运行代码目录,目录中的代码由WePY的build指令自动编译生成
- src:源代码目录,修改文件保存后就会触发自动编译
- package.json:WePY运行模块依赖配置文件
- wepy.config.js:WePY配置文件
- project.config.json:项目配置文件
- components:WePY组件目录
- pages:WePY页面目录
- index.wpy:index页面
- app.wpy:入口文件
这篇关于微信小程序开发之——组件化框架WePY-快速开始的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具
- 2023-11-1952天学习微信小程序计划No.1:小程序简介