微信小程序云开发笔记

• 1. 微信小程序基本知识
• • 1.1 小程序框架
  • 1.2 开发工具
  • 1.3 WXML基本语法
• 2. 导航栏操作
• • 2.1 改变导航栏背景颜色
  • 2.2 改变导航栏标题
  • 2.3 改变导航栏的标题字体颜色
  • 2.4 自定义导航栏
• 3. 分页栏操作
• • 3.1 创建分页栏
  • 3.2 不同页面之间的数据传递
• 4. 获取用户信息
• 5. 云数据库
• • 5.1 实例化云数据库连接
  • 5.2 数据库的增删改查操作
  • • 5.2.1 添加数据
    • 5.2.2 查找数据
    • 5.2.3 修改数据
    • 5.2.4 删除数据
• 6. 云函数
• • 6.1 云函数创建
  • 6.2 云函数初始化
  • 6.3 云函数调试
  • 6.4 前端调用云函数

1. 微信小程序基本知识

在学习微信小程序之前，建议先掌握一些HTML和CSS以及Javascript的语法和基本知识。在掌握了这些基础知识之后，学习起微信小程序也相对较为简单。

1.1 小程序框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

在微信小程序开发过程中，主要有四种文件，.js文件，.json文件，.wxml文件和.wxss文件，其中wxml与wxss文件主要在视图层发挥作用，而.js文件则在逻辑层发挥重要作用。json文件是配置文件，之后将详细说明。在此只需知道有这些文件即可。

1.2 开发工具

在微信小程序开发过程中，我们主要用的开发工具为微信开发者工具，我们也可以使用VSCode来加快我们的代码编写速度。微信开发者工具的详细使用说明见微信小程序开发文档

1.3 WXML基本语法

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。
同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。

需要注意的是，在WXML中，与HTML中的<div>标签对应的是<view>标签。因此，我们在对小程序界面进行布局时，可以通过使用<view>来构造出盒子模型。还有一些其他的标签在这不一 一列举，在我们开发的过程中，可以通过查看微信小程序开发文档来进行学习。

2. 导航栏操作

导航栏是小程序的最上层部分

我们可在相应页面对导航栏进行改变，也可以对全局页面进行改变。若在单独某一页面进行改变，则可到相应的页面json文件中添加代码；若全局改变，则直接在app.json文件中的"window"对象中添加相应语句。

2.1 改变导航栏背景颜色

在相应的json文件中添加如下代码"navigationBarBackgroundColor": "十六进制颜色代码"即可成功修改导航栏的背景颜色。

2.2 改变导航栏标题

在相应的json文件中添加如下代码"navigationBarTitleText": "Weixin"即可成功修改导航栏的标题。

2.3 改变导航栏的标题字体颜色

在相应的json文件中添加如下代码"navigationBarTextStyle":"black"即可成功修改导航栏的标题字体颜色。值得注意的是，颜色只能改成白色或黑色，改成其他颜色则会报错。

2.4 自定义导航栏

在相应的json文件中添加如下代码"navigationStyle": "custom"即可使导航栏消失并且不占用整体空间。

3. 分页栏操作

3.1 创建分页栏

分页栏可以将我们的小程序的每个界面独立展示给用户，用户通过触击分页栏来显示不同的界面。
可在app.json中添加以下代码来使分页栏可以独立显示两个页面。

"tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
        "text": "主页1",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "pagePath": "pages/index1/index1",
        "text": "主页2",
        "iconPath": "",
        "selectedIconPath": ""
      }
    ]
  },

3.2 不同页面之间的数据传递

使用系统路由API可以实现小程序中不同页面之间的跳转，详情见微信开发者文档。需要注意的是，在给页面传递参数的方法中，传递的数据应紧跟页面路径之后使用?隔开，不同数据之间用&隔开，如：'path?key=value&key2=value2'。

4. 获取用户信息

通过调用微信API接口来实现获取用户信息，但是，该方法只能通过点击事件来获取。如：在界面中添加一个Button按钮，给其绑定一个点击事件，那么想要获取用户信息只能在该事件函数中调用代码wx.getUserProfile来获取用户信息。
其次，wx.getSetting已经不能获取到用户是否授权的信息。因此，只能当用户每次进入小程序都向用户询问授权信息，但这样难免会影响用户体验。我们可以想出一种方法来解决此问题。若想要知道用户是否授权，可调用微信小程序的数据缓存API,通过此方法，可以实现在获取到用户信息的同时，向用户本地缓存中添加缓存值，用户下次进入小程序时，只需程序判断用户本地相应的缓存值是否存在，若存在，则通过<\open-data>标签来将用户信息直接展示出来，不存在，则显示授权按钮，让用户点击按钮进行授权。对应js代码如下：

// 授权登录按钮绑定
    go_log: function (e) {
        console.log(e)
        wx.getUserProfile({
            desc: '展示用户信息',
            success: res => {
                console.log(res.userInfo)
                wx.setStorageSync('storage_info', true)
                this.setData({
                    logged: true,
                    nickName: res.userInfo.nickName,
                    gender: res.userInfo.gender,
                    avatarUrl: res.userInfo.avatarUrl
                })
            }
        })
    }

在用户进入小程序界面时进行判断：

onLoad: function (options) {
        // 查看用户是否已经授权
        if (wx.getStorageSync('storage_info')){
            this.setData({
                logged: true
            })
        }
    },

若想要获取用户的其他权限（如相机），可以通过调用wx.authorize来实现，该方法可以唤起相应的授权框，详情见微信小程序API。但是不能通过该方法唤起用户信息授权框。

5. 云数据库

5.1 实例化云数据库连接

调用系统函数wx.cloud.database()可与云数据库建立联系，通常将其定义为一个常量来方便使用，即定义const db = wx.cloud.database()。注意：若在云函数中实例化数据库连接，则无需在“cloud”之前添加"wx."，即const db = cloud.database()即可。

5.2 数据库的增删改查操作

首先，在开发者工具的左上角点击云开发可进入云开发控制台，进入控制台后点击数据库进入数据库界面，然后向当中添加集合，这里我添加text集合来进行测试。
注意：由于在云函数中执行的函数都是异步的，因此，在实际应用中，应根据云函数中各个函数的执行逻辑顺序来给函数之前添加await字段，使其同步执行。但在以下测试中，由于每次测试只执行一个操作（添加或删除等），故未添加await语句。

5.2.1 添加数据

在云数据库中添加数据操作的代码如下：

// 实例化数据库连接
    const db = cloud.database()
    db.collection('text').add({
        //data为要添加的数据对象
        data:{
            a: 1,
            b: 2
        }
    })
    .then(res =>{
        console.log("添加成功", res)
    })
    .catch(res =>{
        console.log("添加失败", res)
    })

其中collection里的字符串对应数据库中的集合。

5.2.2 查找数据

查找单条数据的代码如下：

//查找单条数据
    db.collection('text').doc('cbddf0af60f28bdd177195f6172f8c9b').get()
    .then(res =>{
        console.log("查找成功", res)
    })
    .catch(res =>{
        console.log("查找失败", res)
    })

其中doc中的内容为要查找数据的_id值。

若想要查找符合条件的一条或多条数据，则可使用如下代码：

//查找符合条件的数据
    db.collection('text').where({ //满足的条件
        a: 1
    }).get()
    .then(res =>{
        console.log("查找成功", res)
    })
    .catch(res =>{
        console.log("查找失败", res)
    })

也可使用指令来使where中的条件不局限于等于:

//查找符合条件的数据
	// 实例化指令
    const _ = db.command
    db.collection('text').where({ //满足的条件
        a: _.gt(0)
    }).get()
    .then(res =>{
        console.log("查找成功", res)
    })
    .catch(res =>{
        console.log("查找失败", res)
    })

5.2.3 修改数据

修改数据的代码如下：

// 修改数据
    // 定义修改后的数据
    after_modify = {
        a: 2
    }
    db.collection('text').where({
        a: 1
    }).update({
        data: after_modify
    })
    .then(res =>{
        console.log("修改成功", res)
    })
    .catch(res =>{
        console.log("修改失败", res)
    })

5.2.4 删除数据

删除数据的代码如下：

//删除数据
    db.collection('text').where({
        a: 2
    }).remove()
    .then(res => {
        console.log("删除成功", res)
    })
    .catch(res => {
        console.log("删除失败", res)
    })

6. 云函数

6.1 云函数创建

首先在project.config.json文件中添加如下代码"cloudfunctionRoot": "文件夹路径"

然后新建文件夹命名与文件夹路径中的文件夹名相同。若该文件夹前出现云朵（如下图），则代表云函数初始化成功。

右键点击我们新创建好的云函数文件夹，选择新建Node.js云函数，即可成功创建云函数

6.2 云函数初始化

建议在app.js文件的OnLaunch函数中初始化云函数（添加如下系统函数）wx.cloud.init()，函数详细用法参见云函数端初始化。

6.3 云函数调试

首先安装npm，安装完成后在本地设置中将“使用npm模块”勾选

然后重启开发者工具，右键点击要调试的云函数的.js文件并选择“在内建终端中打开”

然后在终端中输入以下内容npm install --save wx-server-sdk@latest安装依赖。安装完成后即可右键云函数文件夹并点击“开启云函数本地调试”进入调试界面，勾选开启本地调试，并将请求方式选择为手动触发

6.4 前端调用云函数

当需要调用云函数的时候，只需在需要调用的地方使用函数wx.cloud.callFunction()即可。该函数中包含name字段（云函数名）和data字段（传递给云函数的参数）。代码如下：

wx.cloud.callFunction({
      name: 'cloudfunction',
      data:{
        a: 1,
        b: 2
      },
      success: res=>{
        console.log(res)
      }
    })