微信小程序的几个实用小知识

本文会记录一些我在微信小程序开发中，感觉比较好用的一些小知识点，希望也能给大家带来方便。

路径别名 resolveAlias

app.json 配置

json 复制代码

{
    "resolveAlias": {
        "@utils/*": "utils/*",
        "@api/*": "api/*",
        "@config/*": "config/*",
        "@behaviors/*": "behaviors/*"
    }
}

other.js 使用

ts 复制代码

import { tokenStorage } from '@utils/storage'
// 这个方法配置了之后，就可以在别的地方这样方便的引用

缓存 storage

当缓存使用的地方，或者缓存很多的时候，如何让缓存的使用看起来不那么凌乱。以下是我的使用方法

storage.js

ts 复制代码

export interface StorageInstance {
  set: (value: any) => void;
  get: () => any;
  remove: () => void;
}

/**
 * 本地存储基本方法
 * @param key 
 * @param defaultVal 
 */
export const initStorage = (key: string, defaultVal: any = ''): StorageInstance => {
  return {
    set: (value: any) => {
      wx.setStorageSync(key, value)
    },
    get: () => {
      return wx.getStorageSync(key) || defaultVal
    },
    remove: () => {
      wx.removeStorageSync(key)
    }
  }
}

export const tokenStorage = initStorage('token')

login.js

ts 复制代码

import { tokenStorage } from '@utils/storage'
import { login } from '@api/user'

Page({
    data: {},
    methods: {
        onLogin() {
            const res = await login()
            tokenStorage.set(res.data.token)
        }
    }
})

request.js

ts 复制代码

import { tokenStorage } from '@utils/storage'

wx.request({
    headers: { Authorization: `Bearer ${tokenStorage.get()}` }
})

behaviors

behaviors 是微信小程序的一个概念，它可以让多个页面或者组件复用代码，减少重复。

eg：订单列表、订单详情都有取消订单的功能，那么就可以使用 behaviors

order-behavior.js

ts 复制代码

import { orderCancelApi } from '@api/order';

Behavior({
    data: {},
    methods: {
        orderCancel() {
            wx.showModal({
                title: '提示',
                content: '确定取消订单吗？',
                success: function (res) {
                    if (res.confirm) {
                        orderCancelApi().then(() => {
                            wx.showToast({ title: '取消成功', icon: 'none' })
                            this.refresh && this.refresh(); // 调用页面中的方法刷新数据
                        })
                    }
                }
            })
        }
    }
})

order-list.js

ts 复制代码

import { orderBehavior } from '@behaviors/order-behavior';

Page({
    behaviors: [orderBehavior],
    data: {},
    methods: {
        refresh() {
            // 刷新列表
        },
        // 取消订单
        onCancel() {
            // 调用 behaviors 中的方法
            this.orderCancel()
        },
    }
})

order-detail.js

ts 复制代码

import { orderBehavior } from '@behaviors/order-behavior';

Page({
    behaviors: [orderBehavior],
    data: {},
    methods: {
        refresh() {
            // 刷新详情
        },
        // 取消订单
        onCancel() {
            // 调用 behaviors 中的方法
            this.orderCancel()
        },
    }
})

注意点：behaviors 中的数据、方法，会被引用页面/组件的同名数据、方法覆盖。

计算属性 miniprogram-computed

app.js

ts 复制代码

import { behavior as computedBehavior } from 'miniprogram-computed'

// 挂在到全局上
wx.computedBehavior = computedBehavior

App({})

page.js

ts 复制代码

Page({
    behaviors: [wx.computedBehavior],
    data: {
        price: 12,
        count: 3,
    },
    computed: { 
        totalAmount(data) {
            return data.price * data.count
        }
    }
})