小程序之mpvue使用

闲来无事，试了下mpvue来开发小程序

1.github或码云上新建项目，并克隆下来 ------- git clone 克隆地址

2.vue init mpvue/mpvue-quickstart

3.然后一路回车，用编辑器打开文件

4.下载安装依赖 -------npm install

5.npm run dev

6.微信开发者工具打开即可看到效果

二、接下来调接口：

这里用到了网上的免费接口，api工厂

贴上地址：https://api.it120.cc/doc.html

请求封装：

// 请求的封装
const host = 'https://api.it120.cc/wds'
export {host
}
// 请求封装
function request (url, method, data, header = {}) {wx.showLoading({title: '加载中' // 数据请求前loading})return new Promise((resolve, reject) => {wx.request({url: host + url, // 仅为示例，并非真实的接口地址method: method,data: data,header: {'content-type': 'application/json' // 默认值},success: function (res) {wx.hideLoading()resolve(res.data)},fail: function (err) {wx.hideLoading()reject(err, false)},complete: function () {wx.hideLoading()}})})
}
export function get (url, data) {return request(url, 'GET', data)
}
export function post (url, data) {return request(url, 'POST', data)
}

这里以请求分类为例，登录api工厂后台，创建一个分类：

<script>import { get } from '@/utils/http.js'export default {data () {return {category: {}}},mounted () {this.getCategory()},methods: {async getCategory () {const data = await get('/shop/goods/category/all')this.category = data.dataconsole.log(data)}}}
</script>

小程序之mpvue使用相关推荐

美团小程序框架mpvue入门教程
美团小程序框架mpvue入门教程自打写了美团小程序框架mpvue蹲坑指南, 一发不可收拾,今天趁周末空闲,来写个mpvue(没朋友)的简单入门教程,本教程只针对新手,老鸟勿喷. 另外,我还专门为本 ...
使用Vue开发微信小程序：mpvue框架
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
vue 美团框架_美团小程序框架mpvue入门教程
美团小程序框架mpvue入门教程本教程只针对新手,老鸟勿喷. 另外,我还专门为本文做了一个简单的项目,如果懒得从头开始搭项目的童鞋,可以直接去我的 github上克隆到本地, 安装一下依赖,即可直接 ...
美团小程序框架mpvue(花名：没朋友)蹲坑指南
第一次接触小程序大概是17年初,当时小程序刚刚内侧,当时就被各种限制折腾的死去活来的,单向绑定, 没有promise,请求数限制,包大小限制,各种反人类,...反正我是感受到了满满的恶意. 最近接到一 ...
小程序开发.mpvue.项目构建与运行
小程序开发.mpvue.项目构建与运行本文介绍 mpvue 框架的特点以及相关生态,包括在 mpvue 中使用 typescript 和 css 预处理器的相关方法.最后介绍一个最基本 mpvue ...
使用mpvue开发微信小程序——原生微信小程序、mpvue、wepy对比
mpvue是什么?为什么使用它? 目前小程序开发主要有三种形式:原生.wepy.mpvue,其中wepy是腾讯的开源项目:mpvue是美团开源的一个开发小程序的框架,全称mini program vu ...
踩坑微信小程序开发mpvue使用iconfont，顺便解决偶现图标显示不正确
刚刚接触iconfont, 发现它真是个好东西. 使用字体图标的好处: 改颜色,改大小都可以随时所欲,写个多态按钮分分钟搞定,爽的不要太过分! 阿里的字体图库 https://www.iconfon ...
微信小程序之 mpvue
目录一.mpvue ( Vue in Mini Program ) 二.初始化项目 1. 检查node和npm版本 2. 安装vue-cli脚手架 3. 创建mpvue项目 4. 进入改项目目录中, ...
小程序开发框架mpvue开发文档
什么是mpvue mpvue 继承自 Vue.js,其技术规范和语法特点与 Vue.js 保持一致.mpvue是一个微信小程序开发框架,他的语法特点和vue是一样的,除了一些微信小程序官方api以外. ...
微信小程序结合mpvue从0到1（二）
这篇主要讲讲小程序文件运行顺序,也就是说从入口文件到调用各类交互是怎么实现的. 入口文件解读 1.在mapvue项目中,也就是实际编写的时候我们的项目入口自然就是main.js文件,在main.js文 ...

小程序之mpvue使用

小程序之mpvue使用相关推荐

最新文章

热门文章