新手入坑mpvue(没朋友)实战指南
微信小程序微信小程序简称小程序,英文名Mini Program,也被称为微信应用号,不同于微信订阅号或公众号,微信小程序被赋予了应用程序的能力,它是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用;也体现了“用完即走”的理念,用户不再需要关心是否安装太多应用的问题。 目前开发小程序,大多数都是通过看小程序的官网原生开发 Mpvue没朋友mpvue是一个使用 Vue.js 开发小程序的前端框架,由美团点评技术团队开发在2018年3月开源。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。 mpvue官网:http://mpvue.com/ 为啥好好的小程序原生开发需要加入vuejs? mpvue和wepy对比最后mpvue是怎么胜出的? 再多说点mpvue的介绍(内容从参加美团点评技术峰会上Get) 更多的内容戳下面的地址: 如何迈出跳进mpvue的第一步官网有个五分钟教程,当然,你也可以再看一遍我搬运过来的二分钟教程
执行上面的命令后,一路下来的应该长成这样子
豆瓣读书:(一)图书扫码首先第一步你旁边要现有一本书,翻到书的B面,看到后面的条码就是即将要扫的东西 开始写代码,扫码这个API肯定是用小程序的,打开小程序文档找到扫码接口: 提供的示例代码,一会就能直接复制了 // 允许从相机和相册扫码
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的小伙伴成功进坑~ 如果本文对你有一丢丢帮助,可以点击赞赏请我喝可乐 ~? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |