0%

微信小程序（云开发）

Posted on Edited on In Valine:

​ 微信小程序+云开发的入门讲解。

开始

搭建云开发环境

  1. 新建一个文件夹

  2. 在微信开发者工具中新建一个小程序，注册AppID，选择云开发

  3. 点击云开发按钮，开通云开发

  4. 创建资源环境，并在miniprogram/app.js中配置环境

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    //app.js
    App({
      onLaunch: function () {
        if (!wx.cloud) {
          console.error('请使用 2.2.3 或以上的基础库以使用云能力')
        } else {
          wx.cloud.init({
            // env 参数说明：
            //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
            //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
            //   如不填则使用默认环境（第一个创建的环境）
            env: 'test-6ga7apra89fe93e5',
            traceUser: true,
          })
        }

        this.globalData = {}
      }
    })

  5. 云开发环境搭建完成，后续可根据指引浏览小程序。

目录结构

云开发小程序一经搭建，就提供一个基础框架。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.
├── README.md
├── cloudfunctions				//云函数根目录
│   ├── callback
│   ├── echo
│   ├── login
│   └── openapi
│
├── miniprogram					//小程序根目录
│   ├── components					//自定义组件目录
│   ├── images						//图片目录
│   ├── pages						//页面目录
│   ├── style						//样式目录
│
│   ├── app.js						//小程序逻辑
│   ├── app.json					//小程序公共配置
│   ├── app.wxss					//小程序公共样式表
│   └── sitemap.json				//sitemap配置
│ 
└── project.config.json

用户登录

用户登录主要是要获取用户的userInfo和openid，流程如下

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
Page({

  data: {
    userInfo: {}
  },

  onLoad() {
    // 获取本地缓存的userInfo
    this.setData({
      userInfo: wx.getStorageSync('userInfo')
    })
  },

  // 授权登录
  // 1.getUserProfile获取userInfo
  // 2.获取userInfo成功，再通过云函数getOpenid获取openid，将openid添加进userInfo中
  // 3.将userInfo加入本地缓存
  login(){
    // 1.获取userInfo
    wx.getUserProfile({
      desc: '用于完善用户资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: res => {
        this.setData({
          userInfo: res.userInfo
        })
        // 2.获取OpenID
        wx.cloud.callFunction({
          name: "getOpenid",
          success: res => {
            this.data.userInfo.openid = res.result.openid
            // 3.加入本地缓存
            wx.setStorageSync('userInfo', this.data.userInfo)
          },
          fail: res => {
            this.setData({
              userInfo: {}
            })
            console.log("获取OpenID登录失败")
          }
        })
      }
    })
  },

  // 登出
  logout(){
    // 清空用户信息缓存
    wx.removeStorageSync('userInfo')
    this.setData({
      userInfo: null
    })
  }

})