一站式指南：微信小程序

文章目录

1. 1. 技术选型
2. 2. 创建项目
   1. 2.1. CSS 预处理器
3. 3. 配置文件
4. 4. 获取用户信息
   1. 4.1. 唯一 ID
   2. 4.2. 用户头像、昵称等
5. 5. Uni UI
   1. 5.1. uni-calendar

虽然酱瓜比较喜欢部署 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 项目中的版本，不知道是不是有讲究的，纯当备份一下。

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

配置文件

src\pages.json

{
	"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. 不要漏了。

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

用户头像、昵称等

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

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 文件，去掉日期禁用那一行注释下面的

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

改为

let dateCompBefore = true