【微信小程序】学习拾遗四（Promise、全局数据/全局状态、自定义Tabbar、引入Vant组件）

世间小学徒

已于 2023-01-05 23:00:28 修改

阅读量290

点赞数

分类专栏：微信小程序文章标签：微信小程序学习 javascript

于 2022-12-20 17:09:18 首次发布

本文链接：https://blog.csdn.net/cscw333/article/details/128373070

版权

API Promise化方式

安装

miniprogram-api-promise包在Github的地址
1、安装miniprogram-api-promise包。

npm i --save miniprogram-api-promise@1.0.4

2、删除小程序项目中的“miniprogram_npm”文件夹。
3、使用小程序的“工具”->“构建Npm”操作，重新生成“miniprogram_npm”文件夹。

使用

1、在app.js中引入并定义。

// app.js
import {
   promisifyAll} from 'miniprogram-api-promise'
const wxp = wx.p = {
   }
promisifyAll(wx,wxp)

2、在页面中定义一个触发请求事件的按钮；
3、在js文件中定义请求事件的代码；

async getInfo(){
   
  const{
   data:res} = await wx.p.request({
   
    method:'GET',
    url:'https://www.***/api/get',
    data:{
   
      name:'name',
      age:20
    }
  })
  console.log(res)
}

全局数据共享

为实现小程序的全局数据共享，可以使用mobx-miniprogram和mobx-miniprogram-bindings两个外部包。
mobx-miniprogram的使用文档
1、安装：

cnpm i --save mobx-miniprogram mobx-miniprogram-bindings

安装完成，重新构建npm。
2、在根目录下新建store文件夹，其内再建store.js文件。
3、在store.js文件中，编写代码。

import{
    observable,action} from 'mobx-miniprogram'
export const store = observable({
   
 numA:1,
 numB:2,
 get sum(){
   
   return this.numA + this.numB
 },
 //actions方法
 updateNuma: action(function(step){
   
   this.numA += step
 }),
 updateNumb: action(function(step){
   
   this.numB += step
 }),
})

4、将store中定义的成员绑定到页面中。

//pages/index/index.js 导入store成员
import {
   createStoreBindings} from 'mobx-miniprogram-bindings'
import{
   store} from '../../store/store'
//在onload周期加载
onLoad: function (options) {
   
   this.storeBindi