微信公众号开发

微信小程序云开发笔记

本文主要是介绍微信小程序云开发笔记,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

微信小程序云开发笔记

  • 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. 微信小程序基本知识

在学习微信小程序之前,建议先掌握一些HTMLCSS以及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模块”勾选
勾选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)
      }
    })
这篇关于微信小程序云开发笔记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!