微信小程序开发技巧：Promise、如何写scss、如何搭建Webstorm

1.潜在陷阱和Tips

本来想写一点小技巧，结果总结了一下。在开始之前，我并不知道开发微信小程序的体验如此糟糕。从创作工具微信到所谓的“新语言”，都渗透着浓浓的five的碎片化视野。 ，真是让我emmm……另外，我发现网上的迷你编程文章大多是关于如何使用、如何避免陷阱的实用文章，而不是技术文章，这也是从另一个侧面代表的。小程序中的陷阱很多。

在微信小程序原生开发过程中，我们提出了诸如“拥有如此多技术人才的腾讯为什么要这样释放laji？”等问题。很多方面和长辈都是社区提出来的，两三年前。官方回应据说是定了，但几年过去了，依然没有消息，官方回应依然是冷冰冰的“反馈”？白屏，重置不行，可以强行退出再打开；

2。微信请求修改 Promise

2.1 使用现成的库

安装 Promise 库 wx-promise-pro，记得带上 -s 或 或 ，否则安装将会失败。

npm i -S wx-promise-pro

然后在app.js:

import { promisifyAll } from 'wx-promise-pro'

promisifyAll()  // promisify all wx api

App({ ... })

这样就可以正常使用了：

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

2.2 我们自己实现♷，其实规则很简单。以wx.request原生API为例：

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

如果我们做出一个Promise，那么调用方法应该是：

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

and then 函数返回一个Promise对象，这样这个函数就可以返回一个承诺对象。调用链还在继续，所以我们需要 new 来退出，带着一个 Promise 对象：

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

我们可以进一步改进这段代码，因为 success❀

这里发送的参数是使用方法 resolve, reject 实现，因此可以直接传递到 ›♻

reject 照着做就可以了。

另外，由于原生API格式与其他小程序相同，所以我们可以使用curry方法来操作其他需要promise的API：

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

然后将curry方法的结果作为新的基于Promise的API是在对象wx.pro中实现的：

// 将指定 API 进行 Promise 化
wx.pro.request = promisify(wx.request)

// 使用
wx.pro.request({...})
    .then(...)

然后为了方便使用其他方法，我们可以将方法wx♺作为基于对象的Promise进行循环，如请求、扫码、显示Toast

// utils/api/apis.js 封装所有请求 API

import { 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 }
      })
  })

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

// 先取出要改变的对象，改变数字后 setData 回去
const { info } = this.data
info.height = 155
info.desc[0].age = 12
info.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: '灰色' }]
    }
})

这个方法会帮助我们深入嵌套对象中修改相应的属性值，跳过我们不想修改的数组元素，直接设置属性值即可。以及我们提供的数组对象。这不是会删除很多坏代码吗？阅读能力也非常好。

这就是为什么我在线项目中使用wx-updata而不是setData

wx-updata的原理很简单。例子：

this.upData({
    info: {
        height: 155,
        desc: [{ age: 12 }]
    }
})

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

原来这个转换任务需要我们去做，我们必须手动去做，但是现在wx-updata帮我们做了，对吧！ ？使用 setData 与 upData 相同：

// 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

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