微信小程序云开发笔记

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字段，使某些变为同步的异步函数先于其他异步函数执行。

5.2.1 添加数据

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

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

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

5.2.2 查找数据

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

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

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

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

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

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

//查找符合条件的数据// 实例化指令const _ = db.commandawait 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}await db.collection('text').where({a: 1}).update({data: after_modify}).then(res =>{console.log("修改成功", res)}).catch(res =>{console.log("修改失败", res)})

5.2.4 删除数据

删除数据的代码如下：

//删除数据await 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)}})

微信小程序云开发笔记相关推荐

【小程序】微信小程序云开发笔记详细教程（建议收藏）
1- 前言 1.1 微信云开发是什么? 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建 ...
微信小程序云开发学习
1.参考视频教程:微信小程序云开发基础到实战云数据库云函数云存储云调用[新视觉]_哔哩哔哩_bilibili 2.参考笔记: 本来想自己做一份笔记的,后来发现已经有人做了份非常不错的笔记了,再 ...
微信小程序云开发---vant组件 van-uploader 实现视频文件上传到云存储，发动态功能
pages/upVideo.wxml //获取用户的头像和昵称展示 <view class="headerBox"><image src="{{user ...
python操作微信小程序云端数据库_微信小程序云开发之数据库操作
本文实例为大家分享了微信小程序云开发之数据库操作的具体代码,供大家参考,具体内容如下新建集合 1.打开云开发控制台,数据库 2.添加集合users 添加代码 onAdd: function () { ...
微信小程序云开发不完全指北
微信小程序云开发不完全指北首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...
python操作微信小程序云端数据库_微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序...
微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序浏览量:1120 时间:2020-04-06
微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发
微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...
基于微信小程序云开发（校园许愿墙app）2.0稳定版，以发布上线
大家好~我是c站的一个小博主,我会定期更新博文,本篇是围绕微信小程序基于腾讯云开发展开的一个项目,如果看着还不错,或者对您有帮助的话,可以进我的专栏看看我的小程序的其他作品https://blog.c ...
微信小程序云开发实战：网上商城（二）
微信小程序云开发实战:网上商城(二) 主页面入口页面云函数与云数据库代码实现云端实现小程序端实现选择UI组件库 WeUI Vant 整合UI组件库以扩展包的方式引入weui 接下来主页 ...

微信小程序云开发笔记

微信小程序云开发笔记

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 前端调用云函数

微信小程序云开发笔记相关推荐

最新文章

热门文章