小程序、mpvue项目前期准备

一、封装promisify

众所周知，微信小程序api许多方法都是使用回调的方式的
而这在es6出来之后，用习惯了promise和async/await的人来说，实在是太难受了
不说可能会导致回调地狱的问题，回调的写法太累了啊，代码也不优雅

那么就让我们站在巨人的肩膀上看看如何把小程序api转成promis吧

• 在src目录下创建common文件夹，在utils里写promisify
  

/**
* 用于把微信原生callback的api，转换为promise
*
* 示例：
*     import {promisify} from '...' // 这一部可以在全局引入或挂载
*     const res= await promisify(wx.showModal,{content:'确认删除？'})
*/
export function promisify( api, options, ...params ) {
    return new Promise( (resolve, reject) => {
        api( Object.assign( {},  options,  {
            success: resolve,
            fail: reject
        } ), ...params )
    } ).catch( err=>console.log(err) )
}

// 暴露的是一个对象
export default {
    promisify
}

1. 输出

研究源码，首先要知道封装的这个东西输出的是个啥
可以看到return 一个promise
也就是调用的时候,可以

• 1、promisify( ).then( res=>{ } ).catch( err=>{ } )
• 2、const res = await promisify( ).catch( err=>{ } )

2. 输入

输入有3项

• api
  • 微信小程序api对象
  • 如：wx.showModal
• options
  • 微信小程序api要传入的参数
  • 如：{ title:''确认弹窗',content:'你确定删除吗？' }
• params
  • 其他参数
  • 暂时不知道有什么用…

3. 内容

这里用到了Object.assign()，不了解的可以看一下。
简单来说就是一个合并对象的方法

为什么要合并呢，看一下原生小程序api的入参就知道了。
入参是传入的参数和回调函数(success，fail)合起来的

这里是封装起来的方法，回调函数当然是外部来写，也就是回调函数指向promise的resolve和reject对象就可以了

4. 效果

在页面引入这个工具方法即可使用async/await来写小程序api了
兴奋

• promise

const res = await promisify( wx.showModal , { content: '确认删除？' })
if (res.confirm) console.log( '你点击了确认' )
else console.log( '你点击了取消' )

• 原生小程序api

wx.showModal({
content: '确认删除？',
success: res => {
    if (res.confirm) {
        console.log( '你点击了确认' )
    } else {
        console.log( '你点击了取消' )
    }
}

二、封装request

微信小程序请求接口的方法并不能用我们以前用的axios
只能用小程序api的wx.request
那么我们照着axios的功能并且按照大型项目工程化去封装它吧

1. 分为mock和真是接口

• request.js
  
• config.js
  

2. mock数据

原理很简单，将假数据写在一个js里，而不是json
然后把引入写成一个promise，当然这里面不是异步
只是为了写成promise在之后改真实接口的时候，不需要改调用方法

• request.js

// mock请求
function requestMock (url) {
    let {data} = require('@/mock/' + url + '.js')
    return new Promise((resolve, reject) => {
        resolve(data)
    })
}

• mock–>xxx.js

注意：这里只要export就可以直接输出了
这里对封装方法、对象的暴露不太了解可以看这里

export let data = {
    'code': '0',
    'Msg': '',
    'data': [
        {
            'name': '我'
        }
    ]
}

真实接口对小程序api方法的封装主要在
1、请求头
2、请求url，methods
3、错误码拦截
4、loading状态的添加

// 请求真实接口
function requestServer (url, methods, data) {
    return new Promise( ( resolve, reject ) => {
        // 请求头的设置
        let headerParam = {
            // 写不写都行应该，post的时候要用另一种请求头？做判断？
            'Content-Type': 'application/json'
        }
        promisify( wx.request , {
            url: `${webUrl}${url}`,
            methods,
            data,
            header: headerParam
        }).then(res => {
            console.log(url + '接口返回数据', res)
            if (parseInt(res.data.code) === 200) {
                resolve(res.data)
            }
            reject(res.data)
        }).catch(err => console.log(err))
    })
}

三、搭建vuex

mpvue不像vue那样在初始化项目init的时候询问是否安装vuex。

mpvue会默认安装vuex
但是却不会帮我们配置vuex…所以会出现看到明明安装了vuex依赖也创建好了store仓库，却使用不了的情况
第二步是配置vuex的方法

1. 创建store仓库

关于vuex，这里不做过多讲解，详情看vue官方文档

• src目录下，与page同级
  
• index.js
  
• getters.js
  
• user.js
  

2. 全局配置$store

• 最外层的main.js配置vuex
  加入

// 引入 store
import store from './store/index'
// Vue 挂载 store
Vue.prototype.$store = store

3. 使用vuex

• 使用vuex的数据

// 引入getter映射
import { mapGetters } from 'vuex'

// 计算属性
computed: {
    ...mapGetters(['user'])
}

• 数据存入vuex

this.$store.commit ( 'SET_USER' ,  { ... } )

---

如有建议和疑问可联系
QQ：1017386624
邮箱：1017386624@qq.com