强烈推荐的几个简单又实用微信小程序开发小技巧

npm i -S wx-promise-pro复制代码

import { promisifyAll } from 'wx-promise-pro'promisifyAll()  // promisify all wx apiApp({ ... })复制代码

wx.pro.showLoading({    title: '加载中',    mask: true})
  .then(() => console.log('in promise ~'))复制代码

// 原生 API 使用方式wx.request({    url: '',     // 请求的 url
    data: {},    // 参数
    method: '',  // post、get
    success: res => {        // 请求成功回调函数，res为回调参数
    },    fail: res => {        // 请求失败回调函数，res为回调参数
    }
})复制代码

// Promise 化后的期望使用方式wx.pro.request({    url: '',     // 请求的 url
    data: {},    // 参数
    method: ''   // post、get})
  .then(res => {      // 请求成功回调函数，res为回调参数
  })
  .catch(res => {      // 请求失败回调函数，res为回调参数
  })复制代码

function request(opt) {    return new Promise((resolve, reject) => {
        wx.request({
            ...opt,            success: res => { resolve(res)},            fail: res => {reject(res)}
        })
    })
}复制代码

function promisify(api) {    return (opt = {}) => {        return new Promise((resolve, reject) => {
            api({
                ...opt,                fail: reject,                success: resolve
            })
        })
    }
}复制代码

// 将指定 API 进行 Promise 化wx.pro.request = promisify(wx.request)// 使用wx.pro.request({...})
    .then(...)复制代码

// utils/api/fetch.js 封装请求方法、请求拦截器const app = getApp()const BaseUrl = 'http://172.0.0.1:7300/mock'const TokenWhiteList = [    '/app/user/get-by-code'     // 不需要鉴权的api手动添加到这里]/**
 * 设置请求拦截器
 * @param params 请求参数
 */const fetch = (params = {}) => {    // 拦截器逻辑
    if (!TokenWhiteList.includes(params.url)) {
        params.header = {            'content-type': 'application/json',             // 默认值
            'token': app.globalData.token || ''
        }
    }    if (params.url.startsWith('/')) {    // 拼接完整URL
        params.url = BaseUrl + params.url
    }    // 返回promise
    return wx.pro.request({ ...params })
      .then(({ data: { code, message, data } }) => {          // ... 各种异常情况的逻辑处理
          // 与后端约定 code 20000 时正常返回
          if (code === 20000) return Promise.resolve(data)          return Promise.reject(message)
      })
}export { fetch }复制代码

// utils/api/apis.js 封装所有请求 APIimport { fetch } from './fetch'/* 根据微信code获取用户信息 */const appUserGetByCode = ({ code } = {}) => fetch({    url: '/app/user/get-by-code',    data: { code }
})/* 扫码登录 */const appUserQrLogin = ({ qrCode } = {}) => fetch({    method: 'POST',    url: '/app/user/qr-login',    data: { qrCode }
})/* 个人信息 */const appUserInfo = () => fetch({    url: '/app/user/info'})/* 系统参数获取，数据字典 */const appSysParamListByParam = () => fetch({    url: '/app/sys-param/list-by-param'})/* 数据字典所有 */const appSysParamListAll = () => fetch({    url: '/app/sys-param/list-all'})export {
    appSysParamListAll,   // 数据字典所有
    appSysParamListByParam,   // 系统参数获取，数据字典
    appUserGetByCode,   // 根据微信code获取用户信息
    appUserQrLogin,   // 扫码登录
    appUserInfo   // 个人信息}复制代码

import * as Api from '../../utils/api/apis.js'   // 相对路径// 使用方式Api.appSysParamListAll()
  .then(({ dataList }) => this.upData({ sysParamList: dataList }))
  .then(() => {      const keyList = this.data.sysParamList.map(T => T.key)      this.upData({
          keyList,          formData: { keys: keyList }
      })
  })复制代码

// 你的 datadata: {    name: '蜡笔小新',    info: { height: 140, color: '黄色' }
}复制代码

// 这样会把 info 里其他属性整不见了this.setData({ info: { height: 155 } })// 你需要取出 info 对象，修改后整个 setDataconst { info } = this.data
info.height = 155this.setData({ info })复制代码

data: {    name: '蜡笔小新',    info: {        height: 140, color: '黄色',        desc: [{ age: 8 }, '最喜欢大象之歌', '靓仔', { dog: '小白', color: '白色' }]
    }
}复制代码

// 先取出要改变的对象，改变数字后 setData 回去const { info } = this.data
info.height = 155info.desc[0].age = 12info.desc[3].color = '灰色'this.setData({ info })// 或者像某些文章里介绍的，这样可读性差，也不太实用this.setData({    'info.height': 155,    'info.desc[0].age': 12,    'info.desc[3].color': '灰色'})复制代码

this.upData({    info: {        height: 155,        desc: [{ age: 12 }, , , { color: '灰色' }]
    }
})复制代码

this.upData({    info: {        height: 155,        desc: [{ age: 12 }]
    }
})// 会被自动转化为下面这种格式，// this.setData({//    'info.height': 155,//    'info.desc[0].age': 12,// })复制代码

// app.js 中挂载import { updataInit } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径App({
    onLaunch() {
        Page = updataInit(Page, { debug: true })
    }
})// 页面代码中使用方式this.upData({    info: { height: 155 },    desc: [{ age: 13 }, '帅哥'],    family: [, , [, , , { color: '灰色' }]]
})复制代码

// 页面代码中import { objToPath } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径Page({    data: { a: { b: 2}, c: [3,4,5]},    // 自己封装一下
    upData(data) {        return this.setData(objToPath(data))
    },    // 你的方法中或生命周期函数
    yourMethod() {        this.upData({ a: { b: 7}, c: [8,,9]})
    }
})复制代码

*.scss
*.wxss.map复制代码

"easysass.formats": [
  {    "format": "expanded",    "extension": ".wxss"
  },
  {    "format": "compressed",    "extension": ".min.wxss"
  }
]复制代码

*.scss复制代码

@import "styles/iconfont.wxss";复制代码

<text class="iconfont icon-my-edit" style="color: blue"></text>复制代码