• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

小程序组件化开发框架 wepy 教程

JAVA web前端中文站 2年前 (2017-12-01) 2713次浏览 已收录 0个评论

wepy 是腾讯开源的一个小程序组件化开发框架。在开源以来深受广大开发者喜爱,目前已有超过 1500 位开发者使用或了解本框架, 拥有众多的开发特性和优化方案。为此我准备了这篇教程,希望能让大家更快的上手?wepy。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

介绍

WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions 的引入都是为了能让开发小程序项目变得更加简单,高效。

同时 WePY 也是一款成长中的框架,大量吸收借鉴了一些优化前端工具以及框架的设计理念和思想。

特性

  • 类 Vue 开发风格
  • 支持自定义组件开发
  • 支持引入 NPM 包
  • 支持 Promise
  • 支持 ES2015+特性,如 Async Functions
  • 支持多种编译器,Less/Sass/Styus、Babel/Typescript、Pug
  • 支持多种插件处理,文件压缩,图片压缩,内容替换等
  • 支持 Sourcemap,ESLint 等
  • 小程序细节优化,如请求列队,事件优化等

WePY 框架在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性,对原生小程序的开发模式进行了再次封装,更贴近于 MVVM 架构模式, 并支持 ES6/7 的一些新特性。以下是使用 WePY 前后的代码对比与组件化示例。

安装

安装(更新) wepy 命令行工具。

 npm install wepy-cli -g

生成开发实例。

 wepy new myproject

实时编译开发项目。

 wepy build --watch

开发者工具使用

配合开发工具的使用有以下 5 个步骤:

  1. 使用微信开发者工具新建项目,本地开发选择 dist 目录。
  2. 微信开发者工具–>项目–>关闭 ES6 转 ES5。重要:漏掉此项会运行报错。
  3. 微信开发者工具–>项目–>关闭上传代码时样式自动补全 重要:某些情况下漏掉此项会也会运行报错。
  4. 微信开发者工具–>项目–>关闭代码压缩上传 重要:开启后,会导致真机 computed, props.sync 等等属性失效。
  5. 项目根目录运行 wepy build –watch,开启实时编译。

案例

介绍了上面的准备工作后,我们来看一个?Hello World 案例。

 <style lang="less">     
 @color: #4D926F;     
 .userinfo {
 color: @color;} </style> 
 
 <template lang="pug">     
 view(class='container')        
 view(class='userinfo' @tap='tap')             
 mycom(:prop.sync='myprop' @fn.user='myevent')             
 text {{now}} </template> 

 <script>import wepy from 'wepy';     
 import mycom from '../components/mycom';     
 export default class Index extends wepy.page {         
 components = { mycom };         
 data = {myprop: {}};         
 computed = {now () { return +new Date();}};         
 async onLoad() {await sleep(3);             
 console.log('Hello World');}         
 sleep(time) {
 return new Promise((resolve, reject) => setTimeout(() => resolve, time * 1000));}} 
 </script>

运行效果我就不贴了,更多学习资料参考官方文档。

相关文章

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:小程序组件化开发框架 wepy 教程
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址