为了账号安全,请及时绑定邮箱和手机立即绑定

微信小程序组件化开发框架wepy学习(一)

标签:
Html5 Vue.js API

准备工作

  1. 对微信小程序原生开发文档熟悉

  2. 对前端mvvm有一定的了解

  3. 会nodejs npm 进行前端组件化开发

框架特点

框架的产生必然是解决开发中的痛点,wepy解决了什么问题? 主要是对原生的开发进行了简化。原生开发中每一个页面要对应四种文件, 而且交互、 数据绑定都十分繁琐 。wepy借鉴了vue的思想 , 实现了组件化,以组件代替模板和模块, 结构更清晰。同时数据的绑定,api都进行了优化。特别是参数的绑定和监视 都有很大的改观。极大提高了开发效率。

入门

环境要求:nodejs 环境。

命令行 node -v 查看有没有nodejs 环境. wepy的安装或更新都通过 NPM 进行。

wepy版本:最新的1.7.2版本

安装wepy 命令行在指定目下执行 npm install wepy-cli -g 进行全局配置wepy环境。

wepy init standard myproject 是原生的官方模板 初始化工程命令。通过 wepy list可以查看模板的列表, 目前模板比较少,主要有两个weui zanui。

步骤

在指定目录下执行初始化工程命令 wepy init + 模板名称 +自定义项目名称。
执行完毕后 cd 到自定义项目名称目录下 执行 npm install 进行相关的依赖安装。
安装完毕后 执行 wepy build -w 进行编译生成 dist 目录。
微信的开发工具 打开一定要打开 你 wepy init 的目录 不要打开 dist 目录
wepy build 命令Options: -f, --file 待编译wpy文件 -s, --source 源码目录 -t, --target 生成代码目录 -o, --output 编译类型:web,weapp。默认为weapp -p, --platform 编译平台:browser, wechat,qq。默认为browser -w, --watch 监听文件改动 --no-cache 对于引用到的文件,即使无改动也会再次编译 -h, --help output usage information
目录结构

微信小程序组件化开发框架wepy学习(一)

微信工具打开后编译正常, 出现正常显示的界面, 环境就配置完毕了,

开发中一般很少人使用微信的开发工具。会使用 Sublime、 Jetbrains、 IDEs 、Atom、 VS Code、VIM 等工具进行开发。 相关的高亮提示配置在官方文档也有。

公告

以后每月5、15、25号更新原创文章,内容不限,喜欢小编的可以点击关注,也可在下方评论留言,你喜欢什么内容,小编根据大家喜欢的内容尝试更新

点击查看更多内容
4人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1.5万
获赞与收藏
5278

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消