微信小程序搭建(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实现的支持lrc歌词的播放器
May 17 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
Vue提供的三种调试方式你知道吗
Jan 18 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
也谈php网站在线人数统计
2008/04/09 PHP
php5 图片验证码实现代码
2009/12/11 PHP
php文档更新介绍
2011/07/22 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
python中pygame模块用法实例
2014/10/09 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
美德好少年事迹材料
2014/01/19 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
评先进个人材料
2014/12/29 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python