用mpvue写个玩意儿玩玩

lauren_liuling 发布于2019-08-22 16:32 / 537人阅读

摘要：微信开发工具仅用于调试。下面可以配置一个微信小程序的参数，文件就是我们要编辑的页面了。补充一下，调用之后获取了经纬度之后，还可以玩玩微信的组件。试着用微信写一个组件。

下周公司要搞黑客马拉松了，组里可能会做个小程序。然后看到了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

写完了组件，再写src/pages/todolist/index.vue

src/pages/todolist/index.vue

这里我用wx.getStorageSync存储了todolist的数据。

接下来我们再写一个weather组件和weather页面吧，名字被我取的一样，罪过。

src/components/weather.vue

src/pages/weather/index.vue

这里用到的接口

https://api.seniverse.com/v3/...${location}&language=zh-Hans&unit=c

大家去www.seniverse.com自己注册一个就可以了。
这里我们现在用wx.getLocation获取地理位置，我们会用到经纬度。然后再wx.request()去调接口获取天气数据。
你以为这样就完了，事情不是这样的。我们还要在小程序官网上填写服务器域名。如下图

最后我们可以把这两个page用起来了

我们在src/pages/index/index.vue下加上两个按钮

methods里写上页面跳转的方法。


export default {
    methods: {
        onTodo() {
          const url = "../todolist/main"
          wx.navigateTo({url})
        },
        onWeather() {
          const url = "../weather/main"
          wx.navigateTo({url})
        },
    }
}

到此结束。原谅我不会写flex布局，不会写小程序，样子惨不忍睹?。
补充一下，调用wx.getLocation()之后获取了经纬度之后，还可以玩玩微信的map组件。试着用微信map写一个vue组件。

另外还可以玩玩微信的camera和canvas组件。
以下是一些小细节
新增的页面不会添加进webpack的 entry，需要重新 npm run dev。
总体上来说用mpvue写小程序，可玩性还是挺高的。vue我也是这两天刚刚现学现卖的，还不大会写。
学完vue之后，在不了解小程序的情况下，你看就可以写出点玩意儿来了。还是挺不错的吧。大大降低了学小程序那一套东西的成本。

GPU云服务器云服务器用java写个日历用 Java 写个塔防游戏「GitHub mpvue 玩意儿

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94435.html

用mpvue写个玩意儿玩玩

摘要：微信开发工具仅用于调试。下面可以配置一个微信小程序的参数，文件就是我们要编辑的页面了。补充一下，调用之后获取了经纬度之后，还可以玩玩微信的组件。试着用微信写一个组件。下周公司要搞黑客马拉松了，组里可能会做个小程序。然后看到了mpvue感觉还不错，于是就打算试试水。用vue写小程序听上去美滋滋。那么先开始吧！全局安装 vue-cli $ npm install --global vu...

HackerShell 2019-08-02 10:13 评论0 收藏0
用mpvue写个玩意儿玩玩

摘要：微信开发工具仅用于调试。下面可以配置一个微信小程序的参数，文件就是我们要编辑的页面了。补充一下，调用之后获取了经纬度之后，还可以玩玩微信的组件。试着用微信写一个组件。下周公司要搞黑客马拉松了，组里可能会做个小程序。然后看到了mpvue感觉还不错，于是就打算试试水。用vue写小程序听上去美滋滋。那么先开始吧！全局安装 vue-cli $ npm install --global vu...

miguel.jiang 2019-08-29 15:05 评论0 收藏0
关于开发的一些思考

摘要：毕业了差不多半年了，参加工作也有一年多，回顾一下生活，对自己做一些思考。特别是出来了之后，越发的感觉到做程序开发单个人的能力的有限，有再好的想法，靠一个人是实现不了的，而也因此觉得做开发的反而没多少地位感，也没太多成就感。毕业了差不多半年了，参加工作也有一年多，回顾一下生活，对自己做一些思考。大四的时候，在佛山工作，忙活了一年，基本上天天都是在加班中度过的，造成了现在想到加班两个字...

weknow619 2019-08-19 17:09 评论0 收藏0
关于开发的一些思考

摘要：毕业了差不多半年了，参加工作也有一年多，回顾一下生活，对自己做一些思考。特别是出来了之后，越发的感觉到做程序开发单个人的能力的有限，有再好的想法，靠一个人是实现不了的，而也因此觉得做开发的反而没多少地位感，也没太多成就感。毕业了差不多半年了，参加工作也有一年多，回顾一下生活，对自己做一些思考。大四的时候，在佛山工作，忙活了一年，基本上天天都是在加班中度过的，造成了现在想到加班两个字...

aervon 2019-08-28 18:25 评论0 收藏0
关于开发的一些思考

摘要：毕业了差不多半年了，参加工作也有一年多，回顾一下生活，对自己做一些思考。特别是出来了之后，越发的感觉到做程序开发单个人的能力的有限，有再好的想法，靠一个人是实现不了的，而也因此觉得做开发的反而没多少地位感，也没太多成就感。毕业了差不多半年了，参加工作也有一年多，回顾一下生活，对自己做一些思考。大四的时候，在佛山工作，忙活了一年，基本上天天都是在加班中度过的，造成了现在想到加班两个字...

microcosm1994 2019-06-27 11:45 评论0 收藏0