[微信小程序开发]全局综述篇

项目预期

由于个人没有任何前端基础或语言基础，所以框架对前端要求不高。花了一周多时间做这个框架。现在项目做得差不多了，回过头来说一说当初原定的基础目标：

1. 实现记事本能力，要求至少有3页。主页显示预览并具备翻页能力，每份记事本需要至少有标题、时间、内容，存储在云端，并利用数据库接口实现增删改查。
2. 在详情页面可以直接对数据进行更新。
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