脚本宝典收集整理的这篇文章主要介绍了微信小程序wepy框架学习和使用心得,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
一、微信小程序wepy框架简介:
微信小程序WePY框架是腾讯官方推出来的框架,类似的框架还有美团的mpvue,京东的Taro等; 目前公司开发小程序主要用到的是微信原生方法和官方的wepy框架; wepy框架在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性,对原生小程序的开发模式进行了再次封装,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。相对更容易上手,提高开发效率;
二、WePY项目的创建与目录结构
- WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具
npm install wepy-cli -g
- 在开发目录中生成Demo开发项目
wepy new myPRoject
- 切换至项目目录
cd myproject
- 安装依赖
npm install
- 开启实时编译
wepy build --watch
-
WePY项目的目录结构如下
├── dist 小程序运行代码目录(该目录由WePY的build指令自动编译生成,请不要直接修改该目录下的文件)
├── node_modules
├── src 代码编写的目录(该目录为使用WePY后的开发目录)
| ├── components WePY组件目录(组件不属于完整页面,仅供完整页面或其他组件引用)
| | ├── com_a.wpy 可复用的WePY组件a
| | └── com_b.wpy 可复用的WePY组件b
| ├── pages WePY页面目录(属于完整页面)
| | ├── index.wpy index页面(经build后,会在dist目录下的pages目录生成index.js、index.json、index.wXMl和index.wxss文件)
| | └── other.wpy other页面(经build后,会在dist目录下的pages目录生成other.js、other.json、other.wxML和other.wxss文件)
| └── app.wpy 小程序配置项(全局数据、样式、声明钩子等;经build后,会在dist目录下生成app.js、app.json和app.wxss文件)
└ ── package.JSON 项目的package配置
- 搭建好项目后,IDE需配置代码高亮,文件后缀为.wpy,可共用Vue的高亮规则,但需要手动设置,具体配置大家可参考wepy官方文档
三、wepy使用心得总结:
- wepy代码风格类似Vue,如computed,data,methods等用法差不多,熟悉vue开发的同学看看文档可以轻松上手,不过还是有很多地方写法容易混淆,我工作中遇到的总结几个,如列表循环,条件渲染,父子组件值传递等,下面举例说明:
猜你在找的微信小程序相关文章
-
基于后端云微信小程序开发
2019-08-05
-
微信小程序Taro开发(1):Taro安装及使用
2019-06-10
-
微信小程序开发资源汇总 awesome-wechat-weapp(不定期更新)
2019-06-09
-
微信小程序 - 收藏集 - 掘金
2019-06-21
-
微信小程序 Demo - 收藏集 - 掘金
2019-06-07
-
微信小程序概念篇
2019-06-30
-
我研究微信小程序所有资源汇总
2019-06-15
-
微信小程序资源汇总
2019-06-15
-
微信小程序 demo 整理
2019-06-27
-
前端资源系列(3)-微信小程序开发资源汇总
2019-06-28