热门标签 | 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),多图》


推荐阅读
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍了如何使用PHP代码实现微信平台的媒体素材上传功能,详细解释了API接口的使用方法和注意事项,确保文件路径正确以避免常见的错误。 ... [详细]
  • 从零开始构建完整手机站:Vue CLI 3 实战指南(第一部分)
    本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点,并确保这些内容与实际工作中的需求紧密结合。 ... [详细]
  • 本文探讨了领域驱动设计(DDD)的核心概念、应用场景及其实现方式,详细介绍了其在企业级软件开发中的优势和挑战。通过对比事务脚本与领域模型,展示了DDD如何提升系统的可维护性和扩展性。 ... [详细]
  • 本文详细介绍了网络存储技术的基本概念、分类及应用场景。通过分析直连式存储(DAS)、网络附加存储(NAS)和存储区域网络(SAN)的特点,帮助读者理解不同存储方式的优势与局限性。 ... [详细]
  • 本文深入探讨了HTTP请求和响应对象的使用,详细介绍了如何通过响应对象向客户端发送数据、处理中文乱码问题以及常见的HTTP状态码。此外,还涵盖了文件下载、请求重定向、请求转发等高级功能。 ... [详细]
  • 本文详细分析了JSP(JavaServer Pages)技术的主要优点和缺点,帮助开发者更好地理解其适用场景及潜在挑战。JSP作为一种服务器端技术,广泛应用于Web开发中。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 在API测试中,我们常常需要通过大量不同的数据集(包括正常和异常情况)来验证同一个接口。如果为每种场景单独编写测试用例,不仅繁琐而且效率低下。采用数据驱动的方式可以有效简化这一过程。本文将详细介绍如何利用CSV文件进行数据驱动的API测试。 ... [详细]
  • CentOS7源码编译安装MySQL5.6
    2019独角兽企业重金招聘Python工程师标准一、先在cmake官网下个最新的cmake源码包cmake官网:https:www.cmake.org如此时最新 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • dotnet 通过 Elmish.WPF 使用 F# 编写 WPF 应用
    本文来安利大家一个有趣而且强大的库,通过F#和C#混合编程编写WPF应用,可以在WPF中使用到F#强大的数据处理能力在GitHub上完全开源Elmis ... [详细]
  • 如何彻底清除顽固软件如360
    本文详细介绍了如何彻底卸载难以删除的软件,如360安全卫士。这类软件不仅难以卸载,还会在开机时启动多个应用,影响系统性能。我们将提供两种有效的方法来帮助您彻底清理这些顽固软件。 ... [详细]
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社区 版权所有