用mpvue写个玩意儿玩玩
下周公司要搞黑客马拉松了,组里可能会做个小程序。然后看到了mpvue感觉还不错,于是就打算试试水。用vue写小程序听上去美滋滋。
那么先开始吧!
全局安装 vue-cli
$ npm install --global vue-cli
创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
安装依赖
$ cd my-project
$ npm install
启动构建
$ npm run dev
这样子就Okay了。跑起来之后,在微信开发工具里新建项目,选择my-project下的dist目录
然后确定,你就能看到你的小程序已经可以运行了。项目请用别的编辑去编辑,vscode和atom都可以。微信开发工具仅用于调试。
我在pages下面新建了一个todolist和weather页面。每个目录下都有一个.vue文件和一个main.js文件。main.js下面可以配置一个微信小程序的参数,vue文件就是我们要编辑的页面了。
在打开src/main.js文件,在pages字段上加上我们刚刚创建的两个页面的路径。
接下来在src/components下创建一个组件我叫他todo-list.vue
代码如下,自己瞎几把写写的,各种div和css请不要在意,名字也取得不好。
src/components/todo-list.vue
<template>
<div class='container'>
<h3>{{say}}</h3>
<div>
<div class='userinfo'>
<input type="text" v-model='value' placeholder="请输入" class='input'>
<div @click='handleClick' class='button'>Add</div>
</div>
<ul>
<li v-for='(item, index) in items' v-bind:key='index'>
<span @click='handleToggle(index)' v-bind:class='{done: item.completed}' class='item'>{{index + 1}}、{{item.name}}</span>
<div @click.prevent='handleRemove(index)' class='button'>remove</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data () {
return {
value: '',
}
},
props: ['say', 'items'],
methods: {
handleClick() {
if (this.value) {
this.$emit('addTodo', this.value)
this.value = ''
}
},
handleToggle(index) {
this.$emit('toggleItem', index)
},
handleRemove(index) {
this.$emit('removeItem', index)
}
}
}
</script>
<style scoped>
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.done {
color: red;
text-decoration: line-through;
}
.item {
font-size: 40rpx;
line-height: 100rpx;
display: inline-block;
height: 100rpx;
width: 550rpx;
}
.button {
width: 160rpx;
display: inline-block;
height: 70rpx;
font-size: 40rpx;
background: #ccc;
border-radius: 20rpx;
text-align: center;
}
.input {
display: inline-block;
padding: 0 12px;
margin-bottom: 5px;
border: 1px solid #ccc;
}
</style>
写完了组件,再写src/pages/todolist/index.vue
src/pages/todolist/index.vue
<template>
<div>
<todolist v-on:addTodo='saveValue' v-on:toggleItem='toggleItem' v-on:removeItem='removeItem' v-bind='motto'></todolist>
</div>
</template>
<script>
import todolist from '@/components/todo-list.vue'
export default {
data () {
return {
motto: {
say: 'Hello',
items: wx.getStorageSync('items') || [],
},
}
},
components: {
todolist,
},
methods: {
saveValue(val) {
this.motto.items.push({
name: val,
completed: false,
})
wx.setStorageSync('items', this.motto.items)
},
toggleItem(index) {
this.motto.items[index].completed = !this.motto.items[index].completed
wx.setStorageSync('items', this.motto.items)
},
removeItem(index) {
this.motto.items.splice(index, 1)
wx.setStorageSync('items', this.motto.items)
}
}
}
</script>
<style scoped>
</style>
这里我用wx.getStorageSync存储了todolist的数据。
接下来我们再写一个weather组件和weather页面吧,名字被我取的一样,罪过。
src/components/weather.vue
<template>
<div>
My Weather~
<div>{{weather.location.path}}</div>
<div>{{weather.now.text}}-{{weather.now.temperature}}摄氏度</div>
<div>穿衣:{{suggestion.dressing.brief}}</div>
</div>
</template>
<script>
export default {
data () {
return {
weather: {
location: {
},
now: {},
last_update: '',
},
suggestion: {
dressing: {}
},
}
},
methods: {
setWeather(data) {
this.weather = data
},
setSuggestion(data) {
this.suggestion = data
}
},
mounted() {
var self = this
wx.getLocation({
success(data) {
console.log('location', data)
let {latitude, longitude} = data;
let location = `${latitude}:${longitude}`
wx.request({
url: `https://api.seniverse.com/v3/weather/now.json?key=123456789&location=${location}&language=zh-Hans&unit=c`,
success(res) {
console.log('weather', res)
let {location, now, last_update} = res.data.results[0]
self.setWeather({location, now, last_update})
}
})
wx.request({
url: `https://api.seniverse.com/v3/life/suggestion.json?key=123456789&location=${location}&language=zh-Hans`,
success(res) {
console.log('生活指数', res)
let {suggestion} = res.data.results[0]
self.setSuggestion(suggestion)
}
})
}
})
}
}
</script>
<style scoped>
</style>
src/pages/weather/index.vue
<template>
<div>
<weather></weather>
</div>
</template>
<script>
import weather from '../../components/weather'
export default {
data () {
return {
}
},
components: {
weather,
},
methods: {
}
}
</script>
<style scoped>
</style>
这里用到的接口
https://api.seniverse.com/v3/...${location}&language=zh-Hans&unit=c
大家去www.seniverse.com自己注册一个就可以了。
这里我们现在用wx.getLocation获取地理位置,我们会用到经纬度。然后再wx.request()去调接口获取天气数据。
你以为这样就完了,事情不是这样的。我们还要在小程序官网上填写服务器域名。如下图
最后我们可以把这两个page用起来了
我们在src/pages/index/index.vue下加上两个按钮
<template>
<button @click='onTodo'>Todo</button>
<button @click='onWeather'>Weather</button>
</template>
methods里写上页面跳转的方法。
<scirpt>
export default {
methods: {
onTodo() {
const url = '../todolist/main'
wx.navigateTo({url})
},
onWeather() {
const url = '../weather/main'
wx.navigateTo({url})
},
}
}
</script>
到此结束。原谅我不会写flex布局,不会写小程序,样子惨不忍睹?。
补充一下,调用wx.getLocation()之后获取了经纬度之后,还可以玩玩微信的map组件。试着用微信map写一个vue组件。
<map name="location" v-bind:latitude='location.latitude' v-bind:longitude='location.longitude'></map>
另外还可以玩玩微信的camera和canvas组件。
以下是一些小细节
新增的页面不会添加进webpack的 entry,需要重新 npm run dev。
总体上来说用mpvue写小程序,可玩性还是挺高的。vue我也是这两天刚刚现学现卖的,还不大会写。
学完vue之后,在不了解小程序的情况下,你看就可以写出点玩意儿来了。还是挺不错的吧。大大降低了学小程序那一套东西的成本。
用mpvue写个玩意儿玩玩的更多相关文章
- Delphi - 闲来无事,自己写个Timer玩玩(多线程Timer)
明天去坐火车,回家,今天就没有事做,本来在弄一个跨进程获取其他程序里面组件,如ListView,ListBox,Button等的信息,突然有个想法自己写个Timer,不用SetTimer函数,我们自己 ...
- 手贱,写个call玩玩.
今天在睡觉醒时,突然感觉对call和apply有了点理解,但是又不好表达出来.就随便写几个例子. function say() { return this.role; } function Fathe ...
- 写个sleep玩玩
static void sig_when_weakup(int no){ printf("weakup weakup\n"); longjmp(buf, ); } void wea ...
- 百度翻译api初使用(很久没写python了,写几行玩玩)
调用free api做做简易的翻译 这个是百度翻译api文档 http://api.fanyi.baidu.com/api/trans/product/apidoc 照着百度api给的文档向web服务 ...
- 让你从零开始学会写爬虫的5个教程(Python)
写爬虫总是非常吸引IT学习者,毕竟光听起来就很酷炫极客,我也知道很多人学完基础知识之后,第一个项目开发就是自己写一个爬虫玩玩. 其实懂了之后,写个爬虫脚本是很简单的,但是对于新手来说却并不是那么容易. ...
- 【原创】自己动手写工具----XSmartNote [Beta 2.0]
一.前面的话 在上一篇自己动手写工具----XSmartNote中,我简单介绍了这个小玩意儿的大致界面和要实现的功能,看了一下园子里的评论,评价褒贬不一,有人说“现在那么多云笔记的工具”,“极简版ev ...
- javaweb写的在线聊天应用
写这个玩意儿就是想练练手, 用户需要登陆才能在线聊天,不要依赖数据库, 不需要数据库的操作, 所有的数据都是保存在内存中, 如果服务器一旦重启,数据就没有了: 登录界面: 聊天界面: 左侧是在线的用户 ...
- 简单的玩玩etimer <contiki学习笔记之九>
好吧,我承认etimer有点小复杂,主要是它似乎和contiki的process搅在一起,到处都在call_process.那就先搜搜contiki下的etimer的example看看,然后再试着写一 ...
- 如何把原生小程序项目合并的mpvue项目中
当时的情景是这样的: 使用mpvue写微信小程序,写着写着项目写到一半了,突然间不想这样继续写了,想切换回原生小程序语法去写剩余部分. 如下图,红色框里的功能是已经用mpvue完成的功能,绿色框部分的 ...
随机推荐
- rest framework-认证&权限&限制-长期维护
############### 自定义token认证 ############### 表 class User(models.Model): name=models.CharField(ma ...
- python之处理json字符串
一.如何从文件中读取json字符串 通过json模块可以处理json数据. 1.loads()方法 loads(json_object)将json字符串转换成dict类型. import json # ...
- [2015普及组-D]推销员 思维que
题:https://www.cometoj.com/problem/0221 #include<iostream> #include<cstring> #include< ...
- java开发环境搭建(jdk安装)和经常出现问题的探讨
面对许多java初学者环境搭建出现的问题 第一步: 1,首先在可以百度jdk进入oracle的官网也可以进入这个网站 https://www.oracle.com/technetwork/java/j ...
- Reading
Reading一共18min 需要背诵专业学科分类的词汇. 单词上,背四级词汇和托福词汇,达到约1w词汇. 句子上,练习速度和用词准确,其中准确包括含义准确和语序准确.
- C# Dictionary字典类介绍
说明 必须包含名空间System.Collection.Generic Dictionary里面的每一个元素都是一个键值对(由二个元素组成:键和值) 键必须是唯一的,而值不需要唯 ...
- fiddler问题汇总
fiddler教程:https://kb.cnblogs.com/page/130367/ fiddler下载安装:https://www.cnblogs.com/mini-monkey/p/1128 ...
- 吴裕雄--天生自然python学习笔记:Python3 SMTP发送邮件
SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式. python的smtplib提供了一 ...
- SpringMVC学习笔记二:参数接受
该项目用来介绍SpringMVC对参数接受的方法: 项目目录树:在前一个项目上修改添加 新添加了Student类和Group类,用来测试整体参数接受 Student.java package com. ...
- 格式化MyEclipse代码(java、jsp、js)行的长度@修改java代码字体@修改Properties文件编码方式
每次用MyEclipse/Eclipse自带的快捷键Ctrl+shift+f格式化代码时,如果原来的一行代码大于80列,Eclipse就会自动换为多行.如果想格式化代码后不想让代码换行可以通过以下方式 ...