微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤


Posted in Javascript onSeptember 18, 2018

本文介绍了微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤,分享给大家,具体如下:

  1. 微信小程序框架:mpvue
  2. ui框架:mpvue-weui
  3. 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)的详细步骤

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 #Javascript
Vue中 key keep-alive的实现原理
Sep 18 #Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 #Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 #Javascript
vue服务端渲染添加缓存的方法
Sep 18 #Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 #Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 #Javascript
You might like
在线增减.htpasswd内的用户
2006/10/09 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
pycharm快捷键汇总
2020/02/14 Python
python实现简单的购物程序代码实例
2020/03/03 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
介绍一下EJB的体系结构
2012/08/01 面试题
聘任书模板
2014/03/29 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
奶茶店创业计划书
2014/08/14 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
生活委员竞选稿
2015/11/21 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL