• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >微信小程序 > 微信小程序组件化开发框架Labrador的特性安装步骤

微信小程序组件化开发框架Labrador的特性安装步骤

作者:匿名 字体:[增加 减小] 来源:互联网

匿名通过本文主要向大家介绍了微信小程序等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

特性

使用Labrador框架可以使微信开发者工具支持加载海量NPM包

支持ES6/7标准代码,使用async/await能够有效避免回调地狱

组件重用,对微信小程序框架进行了二次封装,实现了组件重用和嵌套

自动化测试,非常容易编写单元测试脚本,不经任何额外配置即可自动化测试

使用Editor Config及ESLint标准化代码风格,方便团队协作

安装

首先您的系统中安装Node.js和npm v3 下载Node.js,然后运行下面的命令将全局安装Labrador命令行工具。

npm install -g labrador-cli

初始化项目

mkdir demo           # 新建目录
cd demo              # 跳转目录
npm init             # 初始化npm包
labrador init        # 初始化labrador项目

项目目录结构

demo                 # 项目根目录├── .labrador        # Labrador项目配置文件├── .babelrc         # babel配置文件├── .editorconfig    # Editor Config├── .eslintignore    # ESLint 忽略配置├── .eslintrc        # ESLint 语法检查配置├── package.json
├── dist/            # 目标目录├── node_modules/
└── src/             # 源码目录
    ├── app.js
    ├── app.json
    ├── app.less
    ├── components/  # 通用组件目录
    ├── pages/       # 页面目录
    └── utils/

注意 dist目录中的所有文件是由labrador命令编译生成,请勿直接修改

配置开发工具

项目初始化后使用WebStorm或Sublime等你习惯的IDE打开项目根目录。然后打开 微信web开发者工具 新建项目,本地开发目录选择 dist 目标目录。

开发流程

在WebStorm或Sublime等IDE中编辑 src 目录下的源码,然后在项目根目录中运行labrador build 命令构建项目,然后在微信web开发者工具 的调试界面中点击左侧菜单的 重启 按钮即可查看效果。

我们在开发中, 微信web开发者工具 仅仅用来做调试和预览,不要在 微信web开发者工具 的编辑界面修改代码。

微信web开发者工具 会偶尔出错,表现为点击 重启 按钮没有反应,调试控制台输出大量的无法require文件的错误,编辑界面中代码文件不显示。这是因为 labrador build 命令会更新整个 dist 目录,而 微信web开发者工具 在监测代码改变时会出现异常,遇到这种情况只需要关掉 微信web开发者工具 再启动即可。

我们还可以使用 labrador watch 命令来监控 src 目录下的代码,当发生改变后自动构建,不用每一次编辑代码后手动运行labrador build 。

所以最佳的姿势是:

在项目中运行 labrador watch

在WebStorm中编码,保存

切换到 微信web开发者工具 中调试、预览

再回到WebStorm中编码

以上就是微信小程序组件化开发框架Labrador的特性安装步骤的详细内容,更多请关注其它相关文章!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 详解微信小程序左右滑动切换页面
  • 微信小程序用户点击按钮生成带参二维码的示例代码
  • 微信小程序中如何渲染html内容(代码示例)
  • 教你一个删除微信web开发者工具中失效项目的方法
  • 微信小程序组件:navigator页面链接解读和分析
  • 微信小程序实现左滑删除效果代码展示
  • 基于阿里云搭建小程序开发的服务器实例教程
  • 微信小程序 触控事件详细介绍
  • 微信小程序 向左滑动删除功能的实现
  • 微信小程序云开发API 构造一个服务端时间的引用

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Vue.js双向绑定实现详解
    • 分享利用小程序获取与解密微信步数可以获取当日数据的方法
    • 微信小程序之分页加载的的案例
    • 使用Promise简化回调
    • 微信小程序组件:textarea多行输入框解读和分析
    • 微信小程序轮播图功能开发实例
    • 微信小程序如何获取循环元素id与wx.login登录操作的实例
    • 实现微信小程序开发者工具初体验的技术初探(图)
    • 微信小程序中数据过滤的实现方法介绍(代码)
    • 推荐常用的ActionSheet用法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有