热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序搭建(mpvue+mpvueweui+fly.js),多图

微信小程序框架:mpvueui框架:mpvue-weuirequest请求:fly.js1.项目初始化注:如果没有安装node环境的请先去网上下载node.js下来安装,安装后默认

微信小程序框架:mpvue
ui框架:mpvue-weui
request请求:fly.js

1.项目初始化

注:如果没有安装node环境的请先去网上下载node.js下来安装,安装后默认安装npm了
接下到你要建项目的目录下打开cmd窗口(快捷方法:打开到目录后按住键盘shift,然后点击鼠标右键选择在此处打开powershell窗口即可)
npm默认从外网下载包,可能会比较慢,可以换成国内的下载地址,如下

npm set registry https://registry.npm.taobao.org/

这样就换成国内的淘宝镜像下载了

npm install -g vue-cli

全局安装vue-cli,vue的官方脚手架

npm install -g webpack

安装webpack打包管理

npm install -g vue

全局安装vue框架

安装完上面的必须组价后,我们就进去正题了,初始化mpvue框架

vue init mpvue/mpvue-quickstart my-project

《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

进入项目文件夹,并安装依赖包
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

项目跑起来
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

运行的原理
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

2.项目运行

引入项目,到微信小程序官网下载此开发工具
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

项目跑起来
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

3.引入mpvue-weui

接下来就引入mpvue-weui了
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

只要引入weui.css文件即可,其他都不用
mpvue-weui的网站

https://kuangpf.com/mpvue-weui/#/

接下来新建一页测试页面来试用weui
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

需要注意的标点符号,否则会报错
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

新增了一页要重新npm run dev,否则会找不到页面(终止的命令:ctrl+c)
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

重新运行后
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

进入到test页面,证明跳转是没问题的
引用一下weui的grid作为示例
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

结果
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

此功能界面的代码都是从上面网站上复制过来的,也可以从git上把mpvue-weui的项目clone下来,里面有更多详细的代码,可以直接复制下来用

4.引入fly请求

接下来request部分,fly.js也是上面推荐的,使用方法如下
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

使用npm安装fly.js

npm install flyio

使用方法
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》


推荐阅读
  • 开发笔记:每篇半小时1天入门MongoDB——3.MongoDB可视化及shell详解
    开发笔记:每篇半小时1天入门MongoDB——3.MongoDB可视化及shell详解 ... [详细]
  • 页面预渲染适用于主要包含静态内容的页面。对于依赖大量API调用的动态页面,建议采用SSR(服务器端渲染),如Nuxt等框架。更多优化策略可参见:https://github.com/HaoChuan9421/vue-cli3-optimization ... [详细]
  • 如何高效学习鸿蒙操作系统:开发者指南
    本文探讨了开发者如何更有效地学习鸿蒙操作系统,提供了来自行业专家的建议,包括系统化学习方法、职业规划建议以及具体的开发技巧。 ... [详细]
  • C/C++ 应用程序的安装与卸载解决方案
    本文介绍了如何使用Inno Setup来创建C/C++应用程序的安装程序,包括自动检测并安装所需的运行库,确保应用能够顺利安装和卸载。 ... [详细]
  • 本文分享了作者在使用LaTeX过程中的几点心得,涵盖了从文档编辑、代码高亮、图形绘制到3D模型展示等多个方面的内容。适合希望深入了解LaTeX高级功能的用户。 ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • 本文探讨了使用Python实现监控信息收集的方法,涵盖从基础的日志记录到复杂的系统运维解决方案,旨在帮助开发者和运维人员提升工作效率。 ... [详细]
  • 利用Node.js实现PSD文件的高效切图
    本文介绍了如何通过Node.js及其psd2json模块,快速实现PSD文件的自动化切图过程,以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率,还简化了从设计稿到实际应用的转换流程。 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • 本文介绍了如何通过命令行有效地终止所有 Node.js 进程实例,以解决因端口冲突或其他服务冲突导致的问题。 ... [详细]
  • 高效的JavaScript异步资源加载解决方案
    本文探讨了如何通过异步加载技术处理网页中大型第三方插件的加载问题,避免将大文件打包进主JS文件中导致的加载时间过长,介绍了实现异步加载的具体方法及其优化。 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • 本文详细探讨了在Windows 98环境下安装Apache 1.3.9、JServ、GNUJSP 1.0、JDK 1.2.2及JSDK 2.0后遇到的中文显示问题,并提供了多种有效的解决方案。 ... [详细]
  • 在Eclipse中提升开发效率,推荐使用Google V8插件以增强Node.js的调试体验。安装方法有两种:一是通过Eclipse Marketplace搜索并安装;二是通过“Help”菜单中的“Install New Software”,在名称栏输入“googleV8”。此插件能够显著改善调试过程中的性能和响应速度,提高开发者的生产力。 ... [详细]
  • V8不仅是一款著名的八缸发动机,广泛应用于道奇Charger、宾利Continental GT和BossHoss摩托车中。自2008年以来,作为Chromium项目的一部分,V8 JavaScript引擎在性能优化和技术创新方面取得了显著进展。该引擎通过先进的编译技术和高效的垃圾回收机制,显著提升了JavaScript的执行效率,为现代Web应用提供了强大的支持。持续的优化和创新使得V8在处理复杂计算和大规模数据时表现更加出色,成为众多开发者和企业的首选。 ... [详细]
author-avatar
拍友2502887597
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有