微信小程序搭建(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 相关文章推荐
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
详解关于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
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
php格式化金额函数分享
2015/02/02 PHP
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
python安装pil库方法及代码
2019/06/25 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
电脑教师的自我评价
2013/12/18 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
独生子女证明范本
2015/06/19 职场文书
结婚典礼主持词
2015/06/29 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android