用mpvue写点东西玩玩

.userinfo{display:flex;弹性方向：列；对齐项目：中心；}。完成{颜色：红色；text-decoration:line-through;}.item{字体大小:40rpx;行高：100rpx；显示：内联块；高度：100rpx；宽度：550rpx；}.button{宽度：160rpx；显示：内联块；高度：70rpx；字体大小：40rpx；背景：#ccc；边界半径：20rpx；text-align:center;}.input{display:inline-block;填充：012px；底部边距：5px；border:1pxsolid#ccc;}公司下周要搞hackathon，群里可能会做个小程序。然后看到mpvue感觉还不错，就决定试水了。用vue写小程序听起来很美好。让我们开始吧！全局安装vue-cli$npminstall--globalvue-cli基于mpvue-quickstart模板创建一个新项目$vueinitmpvue/mpvue-quickstartmy-projectinstalldependencies$cdmy-project$npminstallstartbuild$npmrun这样dev没问题。运行之后，在微信开发工具中新建一个项目，选择my-project下的dist目录并确认，就可以看到你的小程序已经可以运行了。请使用其他编辑器编辑项目，vscode和atom都可以。微信开发工具仅用于调试。我在页面下创建了一个新的待办事项和天气页面。每个目录都有一个.vue文件和一个main.js文件。在main.js下面，可以配置一个微信小程序的参数，vue文件就是我们要编辑的页面。打开src/main.js文件，将我们刚刚创建的两个页面的路径添加到pages字段中。接下来，在src/components下创建一个组件。我称之为待办事项列表。vue的代码如下。我自己写的。各种div和css请不要管，名字不好听。src/components/todo-list.vue.userinfo{display:flex;弹性方向：列；对齐项目：中心；}。完成{颜色：红色；text-decoration:line-through;}.item{字体大小:40rpx;行高：100rpx；显示：内联块；高度：100rpx；宽度：550rpx；}.button{宽度：160rpx；显示：内联块；高度：70rpx；字体大小：40rpx；背景：#ccc；边界半径：20rpx；text-align:center;}.input{display:inline-block;填充：012px；底部边距：5px；border:1pxsolid#ccc;}写完了组件，再写src/pages/todolist/index.vuesrc/pages/todolist/index.vue这里我用wx.getStorageSync用于存储todolist的数据。接下来我们来写一个天气组件和天气页面。名字和我一样，罪恶。src/components/weather.vuesrc/pages/weather/index.vue这里使用的接口https://api.seiverse.com/v3/...${location}&language=zh-Hans&unit=c可以自己去www.seiverse.com注册一个这里我们现在使用wx.getLocation来获取地理位置，我们将使用纬度和经度。然后wx.request()调整接口获取天气数据。你以为就这样结束了，其实不是这样的。我们还需要填写小程序官网的服务器域名。最后，我们就可以使用这两个页面了，如下图所示。我们在src/pages/index/index.vue下添加两个按钮方法编写页面跳转方法。exportdefault{methods:{onTodo(){consturl='../todolist/main'wx.navigateTo({url})},onWeather(){consturl='../weather/main'wx.navigateTo({url})},}}到此结束。原谅我不会写flex布局或者小程序。看起来很可怕？补充一点，调用wx.getLocation()获取经纬度后，还可以玩玩微信的地图组件。尝试用微信地图写一个vue组件。另外还可以玩玩微信的相机和canvas组件。以下是一些小细节。新添加的页面不会添加到webpack的入口，需要重启npmrundev。总的来说，用mpvue写小程序的可玩性还是挺高的。我也是这两天刚学和卖vue，还不知道怎么写。学了vue，不懂小程序也能写点东西。还是很不错的。大大降低了学习小程序集的成本。