mpvue 主要特性
使用 mpvue 开发小程序, 你将在小程序技术体系的基础上获取到这样一些能力:
1. 彻底的组件化开发能力: 提高代码复用性
2. 完整的 vue.js 开发体验
3. 方便的 Vuex 数据管理方案: 方便构建复杂应用
4. 快捷的 webpack 构建机制: 自定义构建策略, 开发阶段 hotReload
5. 支持使用 npm 外部依赖
6. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
7. H5 代码转换编译成小程序目标代码的能力
如果你有过 vue 的开发经历, 相信你会对这个过程非常熟悉, 甚至你都不需要安装其他工具,
直接用 vue-cli 创建项目, 如果你一起没安装过 vue-cli, 那么你要先运行一下命令
npm install --g vue-cli
安装完 vue-cli 以后, 我们就可以运行一下命令, 来自动构建一个项目(期间会询问你是否使用一些工具 / 插件,
请根据自己的实际情况选择 y 或 n, 对于不懂得该选 y 还是 n 的, 统统选 n)
vue init mpvue/mpvue-quickstart test-wxapp
然后 进入我们创建的项目, 并安装依赖
cd test-wxapp npm i
最后, 在运行一下我们的开发服务
npm run dev
项目就跑起来了, 这个时候, 我们打开微信开发者工具, 选择小程序, 然后新建一个, 项目目录填
我们项目目录下的 dist 目录 test-wxapp/dist, 就可以看到效果了
到此为止, 一个基本的项目就完成了
接下来, 我们来删掉几个示例文件, 然后一步步添加页面.
首先, 我们看一下项目的配置文件 /src/main.js 里面的初始内容如下:
- import Vue from 'vue'
- import App from './App'
- Vue.config.productionTip = false
- App.mpType = 'app'
- const app = new Vue(App)
- app.$mount()
- export default {
- // 这个字段走 app.json
- config: {
- // 页面前带有 ^ 符号的, 会被编译成首页, 其他页面可以选填, 我们会自动把 webpack entry 里面的入口页面加进去
- pages: ['pages/logs/main', '^pages/index/main'],
- window: {
- backgroundTextStyle: 'light',
- navigationBarBackgroundColor: '#fff',
- navigationBarTitleText: 'WeChat',
- navigationBarTextStyle: 'black'
- }
- }
- }
这里的 config 字段下面的内容, 就是整个小程序的全局配置了, 其中 pages 是页面的路由, window 则是页面的一些配置(大部分都是顶部栏的配置)
, 这些配置, 最终都会被打包到原生小程序的 app.json, 对这些配置不了解的, 建议看一下微信方法的小程序文档, 这里不做赘述.
我们先把 / src/pages 下面的 counter 和 logs 两个文件夹删掉, 只保留一个 index , 顺便把 /src/components 文件夹下面的文件也全删掉,
然后把 / src/main.js 里面的 config.pages 里面多余的路由也删掉, 只保留一条
['^pages/index/main']
, 这样目前就只有个 index 页面,
然后我们打开
/src/pages/index/index.vue
我们把里面多余的代码删掉, 只保留一个基础骨架
- <template>
- <div class="container">
我是首页
- </div>
- </template>
- <script>
- export default {
- data () {
- return { }
- },
- methods: {},
- created () {}
- }
- </script>
- <style scoped>
- </style>
tip /src/utils/index.js 是一个公共函数库, 里面只有一个简单的格式化日期函数, 不要也可以删掉
到目前为止, 一个干净的空项目就算是 ok 了, 接下来我们来对微信原生的一些反人类的东西来做一下优化.
一, 先用 mptoast 组件代替官方提供的 wx.showToast, wx.showToast 诸多不便我就不说了, 关键是还有坑
小程序基础库比较低的, 不管你怎么设置, 总是会在弹窗里面加一个钩钩, 有时候我想弹出错误消息也是打钩,
严重误导用户, 字数上还有限制有带 icon 的不能超过 7 个字, 你说说, 你说说 7 个字够干嘛的,
那我们来看看 mptoast, 据官方介绍 https://github.com/noahlam/mpvue-toast mptoast 具有轻量, 配置少, 冗余少, 使用简单, 可定制性强等特点
我们开根据官方介绍, 从 npm 引入并配置
- npm i vuex
- npm i mptoast -D
在项目的主配置文件 (一般位于 src/main.js) 加入以下代码
- import mpvueToastRegistry from 'mptoast/registry'
- mpvueToastRegistry(Vue)
在你需要弹窗的页面, 引入组件, 并注册, 然后在页面内加入一个你注册的组件, 就可以在 js 里面调用 this.$mptoast()了, 以下是一个简单的实例
- <template>
- <div>
- <-- 省略其他代码 -->
- <mptoast />
- </div>
- </template>
- <script>
- import mptoast from 'mptoast'
- export default {
- components: {
- mptoast
- },
- data () {
- return {}
- },
- methods: {
- showToast () {
- this.$mptoast('我是提示信息')
- },
- }
- }
- </script>
使用起来还是蛮简单的
二, 用 promise 封装异步请求函数
在小程序的环境下面, 要想发送一个外部请求, 我们只能使用小程序官方提供的 wx.request 方法,
但是该方法的代码风跟跟 Jquery 年代的 Ajax 一样, 都散靠回调来处理请求响应, 如果有很多层回调,
就会有很多层嵌套, 这让我们这些平时被 async-await 惯坏的人怎么接受?
所以, 建完基本项目, 我们要做的第一件事, 就是用 wx.request 自己封装一个基于 promise 的异步请求方法.
我们先来看一下 wx.request 的一个官方示例代码
- wx.request({
- url: 'test.php', // 仅为示例, 并非真实的接口地址
- data: {
- x: '' ,
- y: ''
- },
- header: {
- 'content-type': 'application/json' // 默认值
- },
- success: function(res) {
- console.log(res.data)
- }
- })
可以看到, 每次请求都要发送一大堆的东西, 重点少这些东西里面, 很可能对于一个项目来说,
绝大部分都是固定不变的, 那这样, 不是冗余了么.
tip: 更多 wx.request 参数, 请参考 微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/network-request.html
我们分析一下, 第一个参数是 url, 也就是我们请求的地址, 这个应该是每次都不一样的, 但是, 不一样的应该也只是 url 的最后一部分,
接口名称的位置不一样, 前面的服务器地址一般都是一样的, 例如
http://www.abc.com/api/member/login
对于同一个项目的所有接口
服务器地址
http://www.abc.com/api/
应该都是一样的, 不一样的只是后面的接口名称 member/login,
那我们可以把 url 拆分成 服务器地址 + 接口名称, 这样做也方便后期上线的时候, 切换服务器地址.
第二个参数是请求的参数, 请求的参数应该是每次都不一样的, 所以这个我们就不做修改(事实上实际应用中,
经常有可能出现需要每个接口都带一个 token 的, 我们也可以在这里统一加上去, 不过这里就不做深入)
第三个参数是 请求头, 这个一般同一个项目里面, 这些都是一样的, 所以我们就写死. 这里还有一个参数 method 请求方法,
这里因为使用默认值 GET, 所以就没列出, 我们这边需要做设置, 因为现在前后分离的模式, 现在基本上大部分都是 POST 请求, 所以我们这边也写死成 method:'POST'
最后一个就是处理请求结果回调函数, 示例里面只有一个请求成功的回调, 其实我们应该再加一个请求实例的处理函数,
fail, 而我们封装这个函数的重点, 就是要用 promise 来处理这两个回调函数, 使它们可以用 async-await 的语法
- // 假设以下代码在 `/src/utils/requestMethod.js`
- let serverPath = 'http://www.abc.com/api/'
- export function post(url,body) {
- return new Promise((resolve,reject) => {
- wx.request({
- url: serverPath + url // 拼接完整的 url
- data: body
- method:'POST',
- header: {
- 'content-type': 'application/json'
- },
- success(res) {
- resolve(res.data) // 把返回的数据传出去
- },
- fail(ret) {
- reject(ret) // 把错误信息传出去
- }
- })
- })
- }
有了这样的封装, 我们就可以在其他地方引入 上面这个文件, 然后使用 post 函数请求
- import {post} from '/src/utils/requestMethod.js'
- // 需要注意的是, 这行代码必须要在 async 修饰的函数里面才能正确调用
- let res = await post('member/login',{name:myname})
如果你觉得每次都要 import 这个文件很麻烦, 那我们也可以把它挂在到 Vue(mpvue)的原型 (prototype) 上, 我们打开 / src/main.js 文件, 然后在里面加入以下代码
- import {post} from '/src/utils/requestMethod.js'
- Vue.prototype.$post = post
这样, 我们就可以在 Vue(mpvue)的所有实例里面, 直接使用 this.$post()来调用, 只要一行代码,
- // 这行代码同样需要在 async 修饰的函数里面才能正确调用
- let res = await this.$post('member/login',{name:myname})
怎么样? 是不是比原生的方便很多呢?
当然, 跑起来以后, 你可能还会遇到各种问题, 这里我有对我自己遇到的问题做了一些总结
美团小程序框架 mpvue 蹲坑指南 https://www.cnblogs.com/xzqyun/p/9199797.html , 希望对你有帮助,
还有官方文档 http://mpvue.com/mpvue/#_2 也是很不错的哦
来源: http://www.bubuko.com/infodetail-2650740.html