项目预期
由于个人没有任何前端基础或语言基础,所以框架对前端要求不高。花了一周多时间做这个框架。现在项目做得差不多了,回过头来说一说当初原定的基础目标:
- 实现记事本能力,要求至少有3页。主页显示预览并具备翻页能力,每份记事本需要至少有标题、时间、内容,存储在云端,并利用数据库接口实现增删改查。
- 在详情页面可以直接对数据进行更新。
- 在新增事项页面可以新增一条数据。
再给一张师兄最初设计的“概念图”,还是比较小清新的:
后来结合相关目标和美化,陆陆续续加了一些其他的要求。这些在下一篇文档中会做整理。
这三个小目标目前可以说是基本完成了,在师兄要求下中间改了几版,逐渐从重口味往小清新发展。目前展示效果如下:
然后给一下微信小程序开发的设计思想,在资源管理器中可以查看文件夹列表,主要文件有:
- cloudfunctions文件夹用于存储云函数,基本上一个文件夹对应一个云函数。
- pages内的文件夹,基本上一个文件夹对应一个页面,默认情况下index文件夹作为主页,这个可以再app.jaon文件夹中设置。
- 外部app.js/app.json/app.wxss/project.config.json用于配置全局的一些属性。
这一篇先主要讲一下外部app.js/app.json/app.wxss/project.config.json这些文件的用途和一些小技巧。
app.js
先上代码,是JavaScript的语法:
//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
在本项目中,app.js主要用途是获取用户的登录信息,如用户头像、用户id、用户昵称等。里面包含一些授权的逻辑,之所以把登录态判断放在这里,是因为发现,服务端的登录态和我们本地需要wx.checkSession检测的用户登录态是不一样的,所以为了避免其他页面重复操作,在这里统一做了处理。
app.json
先上代码(代码格式是JSON):
{
"pages":[
"pages/index/index",
"pages/newPublish/newPublish",
"pages/detail/detail",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#663",
"navigationBarTitleText": "黄蔷的记事本",
"navigationBarTextStyle":"white"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
这里主要用到的是两块:
pages存储的是页面及其顺序。一般来说主页默认是最上面那个页面。
鼠标指针选中某行后,按住alt+↑或者alt+↓可以比较方便地修改页面上下的顺序。
如果在里面加入新的一行如:
"pages/detail/detail",
那么保存后微信的IDE会自动在pages的页面下新建detail文件夹,并在其中添加必要的四个文件(js,json,wxml,wxss)。这是比较方便地新建文件夹的操作。但是需要注意的是,在这里删除某行并保存后并不会直接删除文件夹。所以这里微信应该是只支持新建文件夹不支持删除文件夹。
下面那块标题是window,是用来设置全局样式的。页面节点的配置可以查看这篇官方文档。
比如我设置的文本模式是“dark”,小程序上面的title是“黄蔷的记事本”,诸如此类。
再下面的style和sitemapLocation不需要去修改。比如把style中的v2修改成v1可能会改变一些按钮的默认样式。
app.wxss
这个文件夹的语法是css,不过看后缀就能猜到,肯定用了一些wx(微信)的SDK。
page {
background: #fff;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
这里相当于是一个全局的设计,我设置的是背景白色,可以竖向滑动拉动。顺便一提,设置颜色有两种方法,一种是输入black、pink这种单词系统会自动识别转化成颜色,也可以输入16进制的RGB来度量,如#fff就是白色,#000就是黑色。
project.config.json
这个我没有对其进行修改,基本都是自己生成的代码。
.gitignore
微信小程序中有些额外生成的文件不需要在git上同步。在网上找到的一个“配方”,可以直接使用。
# Windows image file caches
Thumbs.db
ehthumbs.db
# Folder config file
Desktop.ini
# Recycle Bin used on file shares
$RECYCLE.BIN/
# Windows Installer files
*.cab
*.msi
*.msm
*.msp
# Windows shortcuts
*.lnk
# =========================
# Operating System Files
# =========================
# OSX
# =========================
.DS_Store
.AppleDouble
.LSOverride
# Thumbnails
._*
# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk