用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

新手入坑mpvue(没朋友)实战指南

Rolan 2018-7-9 00:20

本文的核心宗旨是带着新手一起入坑mpvue(没朋友),如果看完没有成功入坑,请再看一遍,谢谢

微信小程序

微信小程序简称小程序,英文名Mini Program,也被称为微信应用号,不同于微信订阅号或公众号,微信小程序被赋予了应用程序的能力,它是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用;也体现了“用完即走”的理念,用户不再需要关心是否安装太多应用的问题。

目前开发小程序,大多数都是通过看小程序的官网原生开发
官网:https://developers.weixin.qq....

Mpvue没朋友

mpvue是一个使用 Vue.js 开发小程序的前端框架,由美团点评技术团队开发在2018年3月开源。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

mpvue官网:http://mpvue.com/
github地址:https://github.com/Meituan-Di...

为啥好好的小程序原生开发需要加入vuejs?
1.小程序不能使用npm,使用第三方包的方式太原始
2.需要为小程序单独开发代码,不能和web系统重用
3.开发效率和学习成本(小程序的特有的语法)

mpvue和wepy对比最后mpvue是怎么胜出的?
wepy官网:https://tencent.github.io/wepy/
用一张图来简单概括下mpvue/wepy/原生小程序的区别:

再多说点mpvue的介绍(内容从参加美团点评技术峰会上Get)
mpvue的使用场景可以分为:
1.单独使用mpvue(标准的使用方式,quickstart)
2.mpvue为主,辅以其他
3.mpvue做增量开发(使用mpvueSimple轻量化构建工具)

更多的内容戳下面的地址:
美团点评技术沙龙第35期:北京站-前端热点技术的企业级实践-回放地址:http://www.itdks.com/eventlis...

如何迈出跳进mpvue的第一步

官网有个五分钟教程,当然,你也可以再看一遍我搬运过来的二分钟教程

# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由于众所周知的原因,可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli

# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

执行上面的命令后,一路下来的应该长成这样子


这里不要忘记npm install,下面该打开生成项目了,拆箱图解如下




好了,接下来就是你大展身手的时候了~

豆瓣读书:(一)图书扫码

首先第一步你旁边要现有一本书,翻到书的B面,看到后面的条码就是即将要扫的东西

开始写代码,扫码这个API肯定是用小程序的,打开小程序文档找到扫码接口:
https://developers.weixin.qq....

提供的示例代码,一会就能直接复制了

// 允许从相机和相册扫码
wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

// 只允许从相机扫码
wx.scanCode({
  onlyFromCamera: true,
  success: (res) => {
    console.log(res)
  }
})

修改index.vue 毕竟它才是主页,像平时vue一样,加点击事件只不过方法里面的内容换成了小程序的API

准备就绪后,在微信开发者工具里面点击预览,就可以拿出你的手机扫一扫了,在console控制台可以看到的输出的ISBN码 9787535732309 ,打开豆瓣读书官网搜索一下

这就完成了扫码的过程,拿到图书的ISBN码之后,存数据库或者干嘛都可以了

豆瓣读书:(二)图书列表

图书列表的数据来源使用easy-mock

easy-mock(https://www.easy-mock.com)是...,模拟后端的接口完成数据请求绑定,其实就是把之前本地写死的JSON文件,换了一个地方写,前端不用等待后端的接口开发完成再进行工作,可以同后端协商好数据格式后就开工了

下图是easy-mock创建接口后进入到的编辑页面,大刀破斧的写你的json数据吧

数据写完后,地址栏的URL就是一会要访问的接口地址,回到项目中来发送请求即可,还是写在index.vue下

<template>
<div>
  <button @click="scanCode()">
    扫描图书
  </button>
  <h3>图书列表</h3>
  <div v-bind:key='book.isbn' v-for='book in books'>{{book.title}}</div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data:{
      books: []
  },
  methods: {
    scanCode() {
      wx.scanCode({
        success: res => {
          console.log(res);
        }
      });
    }
  },
  mounted() {
    wx.request({
      url:
        "https://www.easy-mock.com/mock/5b3ec93b119b373c0443793d/mpvuedata/list",
      success: res => {
        this.books = res.data.data;
      }
    });
  }
};
</script>

<style scoped>
h3{
  font-size:60rpx;
}
div{
  font-size: 40rpx;
}
</style>

运行后结果就会把数据动态的输出出来了

最后彩蛋

稍微总结下,通过上面做的两个功能(扫码、图书列表数据绑定)已经可以知道如何使用mpvue进行小程序的开发,如需调用其他的API使用方法同扫码功能,做数据请求同图书列表功能一样,希望本文帮助新入坑mpvue的小伙伴成功进坑~

如果本文对你有一丢丢帮助,可以点击赞赏请我喝可乐 ~ 
——来自mpvue坑里的声音

鲜花
鲜花 (1)
鸡蛋
鸡蛋 (1)

刚表态过的朋友 (2 人)

分享至 : QQ空间
收藏
原作者: 离岛 来自: segmentfault

相关阅读