一站式指南：微信小程序

虽然酱瓜比较喜欢部署 Web App，但不可否认的是，微信小程序是某些类型应用程序最好的托管平台（比如多人协作日历 Calendarry），所以这个坑还是要来跳一跳。

技术选型

Calendarry 项目开始于 2021 年 4 月，最终选用了 UCloud 的 uni-app 框架。因为我平时写的都是 Vue.js 项目，这个框架恰好又是由 Vue 魔改而来，不怎么需要重新学习。但其实 uni-app 是一个坑很多的项目，官方文档有些部分也没有涉及到，或者官方文档有的时候是错的（可能是更新不及时导致）。

而彼时，Taro 的 TaroUI Vue 版本不支持 JavaScript 项目，只支持 TypeScript 项目，并且 Bug 更多了。故没有选用。

下文大部分东西都是回忆版了，可能有些步骤就遗漏了。

创建项目

参考 通过 Vue CLI 创建项目，选默认模板即可。

一般还要装 uni-ui 和 LeanCloud 等。

CSS 预处理器

下面是它们在 Calendarry 项目中的版本，不知道是不是有讲究的，纯当备份一下。

1
2
3
4

"stylus": "^0.54.8",
"stylus-loader": "^3.0.2",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.1",

配置文件

src\pages.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

{
	"easycom": {
		"autoscan": true,
		"custom": {
				"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "页面TITLE",
                "enablePullDownRefresh": true		// 启用下拉刷新
			}
		},
        // ...
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "全局TITLE",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

获取用户信息

唯一 ID

本例中是通过 LeanCloud 的库获取的，反正也是存在 LeanCloud 的数据库。记得：this. 不要漏了。

1
2
3
4

this.AV.User.loginWithMiniApp()
  .then((user) => {
     const userId = user.attributes.username;
  }

用户头像、昵称等

直接用 uni.getUserProfile() 就行，也不需要预登录啥的。

1
2
3
4
5
6
7
8
9

uni.getUserProfile({
  desc: "登录以显示您的头像",
  success: function (r) {
             const userinfo = r.userInfo
             const avatar = userinfo.avatarUrl
             const nickname = userinfo.nickName
           },
  fail: (e) => { console.log(e) },
})

Uni UI

uni-calendar

需要魔改 NPM 包。

若设置 startDate 在今天之后，会不起效，默认设置是 今天之后的日期不能设置禁用。

node_modules\@dcloudio\uni-ui\lib\uni-calendar\util.js 文件，去掉日期禁用那一行注释下面的

1

let dateCompBefore = this.dateCompare(this.startDate, fullDate)

改为

1

let dateCompBefore = true