一、快速创建一个mpvue项目
 
  • 全局安装 vue-cli
 
(如果有就不需要装了)
  • 创建一个基于mpvue-quickstart模板的新项目,记得选择安装vuex
vue init mpvue/mpvue-quickstart mpvue-demo
 

是否需要vuex →是
  • 安装fly
npm i flyio --save
 

 
  • 安装依赖
cd mpvue-demo
cnpm i
 
 

  • 启动
npm run dev
有时候Npm run dev会报很多error,删除node_modules重新安装依赖即可
  • 这是我们生成的Mpvue目录

二、编写页面,还原
当我们写组件的时候,和小程序有很多属性和方法在vue是识别不出来的,有的有对应的属性和方法
  • 表单
  1. checkbox、radiobox、switch   
 

<checkbox-group/>中选中项发生改变是触发change事件,mp.detail={value:[选中的checkbox的value数组]}
其中开关选择器switch、radio用法相同
划重点:1. bindchange鞋城@change="" 2.change返回选中值获取方法为e.mp.detail.value
  1. 图片上传和预览
 

图片上传和预览的实现主要使用了微信原生API wx.chooseImage(OBJECT) wx.previewImage(OBJECT)
  • 组件
 
  1. picker
bindchange →@change,以及一下要绑定的属性要写成:value的形式
可以通过indexPicker的值从而可以自定义picker初始化要显示的值
 

 
  1. swiper

 
属性和事件:除了bind改为了@之外,其他用法基本一样
(还有其他一些组件,待整理...)
三、vuex,flyio请求服务

mpvue请求服务,我们用flyio插件进行处理
由于需要登录传token的操作,所以需要对flyio进行一次请求封装
在api.js文件调用fly请求服务

在main.js引入store
import store from './store'
Vue.prototype.$store = store
然后我们就可以在vue中使用vuex一样编写代码了
以日志列表为例
 

大功告成~~~
现在我们看子组件是怎么编写的

看看显示的页面
 

 
 

接下来就需要我们改改样式就行了。
 
 
 

【mpvue】使用Mpvue撸一个简单的小程序的更多相关文章

  1. 两周撸一个掘金微信小程序

    利益相关 无 声明 这并不是掘金官方小程序(貌似没有搜到掘金 APP 对应的官方小程序),完全为第三者开发者开发,仅用于学习交流,禁止用于其他用途.若要使用官方正版,可访问掘金 官方网站,或下载掘金官 ...

  2. 输出多行字符的一个简单JAVA小程序

    public class JAVA { public static void main(String[] args) { System.out.println("-------------- ...

  3. python -----一个简单的小程序(监控电脑内存,cpu,硬盘)

    一个简单的小程序 用函数实现!~~ 实现: cpu 使用率大于百分之50 时  ,  C 盘容量不足5 G 时, 内存 低于2G 时. 出现以上其中一种情况,发送自动报警邮件! 主要运用 到了两个 模 ...

  4. 3.2 Lucene实战:一个简单的小程序

    在讲解Lucene索引和检索的原理之前,我们先来实战Lucene:一个简单的小程序! 一.索引小程序 首先,new一个java project,名字叫做LuceneIndex. 然后,在project ...

  5. Python3的tkinter写一个简单的小程序

    一.这个学期开始学习python,但是看了python2和python3,最后还是选择了python3 本着熟悉python的原因,并且也想做一些小程序来增加自己对python的熟练度.所以写了一个简 ...

  6. cpp学习笔记 1一个简单的小程序以及一些的知识点

    今天买的cpp到了从今天開始又一次学习cpp如今发现学校发的书真的不怎莫样. <em>#include<stdio.h>//预处理命令 int main()/*第一个被调用的函 ...

  7. mpvue + Vant weapp + 微信云服务 打造小程序应用

    写在前面的话: 从事小程序开发已经大半年的时间了,但是一直都是再用原生写项目.一直想着用框架自己写一个小程序,但苦于一直没有时间.正好最近项目搁置,有了空闲时间,就研究了下mpvue + Vant w ...

  8. mpvue从一无所有开始仿大众点评小程序

    最近尝试了下用mpvue框架开发小程序,它是基于vue开发的. 官方介绍: mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js ...

  9. 一个简单的flask程序

    初始化 所有Flask程序都必须创建一个程序实例. 程序实例是Flask类的对象,经常使用下述代码创建: from flask import Flask app = Flask(__name__) F ...

随机推荐

  1. [Leetcode]123.买卖股票的最佳时机3

    [原题链接][https://leetcode-cn.com/problems/best-time-to-buy-and-sell-stock-iii/] 分析:动态规划+二分法.以第i天为分界线,计 ...

  2. [原创]内网渗透JSP webSehll连接工具

    工具: JspShellExec编译: VS2012  C# (.NET Framework v2.0)组织: K8搞基大队[K8team]作者: K8拉登哥哥博客: http://qqhack8.b ...

  3. 消息队列系统 -- RabbitMQ

    消息队列系统 -- RabbitMQ RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Que ...

  4. (转)实现一个cache装饰器,实现过期可清除功能

    原文:http://www.cnblogs.com/JerryZao/p/9574927.html http://blog.51cto.com/11281400/2107790-----装饰器应用练习 ...

  5. (转载)elasticsearch 查询(match和term)

    原文地址:https://www.cnblogs.com/yjf512/p/4897294.html elasticsearch 查询(match和term) es中的查询请求有两种方式,一种是简易版 ...

  6. IIS 站点部署多级域名

    当站点的规模达到一定程度,往往会对业务进行拆分,部署到一台服务器的不同站点,,而一个域名(顶级域名)只能绑定一个站点(核心站点),这个时候就通过给顶级域名创建子域名的方式(理论上一个顶级域名可以绑定5 ...

  7. Bridge桥接模式(结构型模式)

    现有一个需求,一个游戏系统需要构建不同风格的房屋,暂不考虑其他设计模式,需要能实现在PC端.移动端....等等多个平台的构建.最简单的实现方式如下: /// <summary> /// 房 ...

  8. JavaScript -- Window-Interval

    -----031-Window-Interval.html----- <!DOCTYPE html> <html> <head> <meta http-equ ...

  9. linux之后台运行程序 nohup和& 的区别

    1.nohup 用途:不挂断地运行命令,即使终端ssh关闭了也一直运行. 语法:nohup Command [ Arg … ] [ & ] 例:nohup start.sh & 无论是 ...

  10. 【LeetCode题解】225_用队列实现栈(Implement-Stack-using-Queues)

    目录 描述 解法一:双队列,入快出慢 思路 入栈(push) 出栈(pop) 查看栈顶元素(peek) 是否为空(empty) Java 实现 Python 实现 解法二:双队列,入慢出快 思路 入栈 ...