uniapp 云开发笔记

uniapp云开发官方文档icon-default.png?t=N7T8https://uniapp.dcloud.io/uniCloud/learning.html

新建

关联云空间

 

 

 云函数获取用户openID

uniCloud API列表icon-default.png?t=N7T8https://uniapp.dcloud.io/uniCloud/cf-functions.html#unicloud-api%E5%88%97%E8%A1%A8

自建云函数login

event中包含前端传来的参数

uniCloud.httpclient.request(URL,requestOptions)

云函数中通过http连接其他系统

httpclienticon-default.png?t=N7T8https://uniapp.dcloud.io/uniCloud/cf-functions.html#httpclient

微信openID

请求地址

GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

请求参数

属性类型默认值必填说明
appidstring小程序 appId
secretstring小程序 appSecret
js_codestring登录时获取的 code
grant_typestring授权类型,此处只需填写 authorization_code

返回值

Object

返回的 JSON 数据包

属性类型说明
openidstring用户唯一标识
session_keystring会话密钥
unionidstring用户在开放平台的唯一标识符,若当前小程序已绑定到微信开放平台帐号下会返回,详见 UnionID 机制说明
errcodenumber错误码
errmsgstring错误信息

前端页面

uni.login(OBJECT)

登录

OBJECT 参数说明

参数名类型必填说明平台差异说明
providerString登录服务提供商,通过 uni.getProvider 获取,如果不设置则弹出登录列表选择界面
scopesString/Array见平台差异说明授权类型,默认 auth_base。支持 auth_base(静默授权)/ auth_user(主动授权) / auth_zhima(芝麻信用)支付宝小程序
timeoutNumber超时时间,单位ms微信小程序、百度小程序、京东小程序
univerifyStyleObject一键登录页面样式App 3.0.0+
onlyAuthorizeBoolean微信登录仅请求授权认证App 3.2.6+
successFunction接口调用成功的回调
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数名说明平台差异说明
authResult登录服务商提供的登录信息,服务商不同返回的结果不完全相同微信登录配置onlyAuthorize:true则此项为空,App 3.2.6+
code用户登录凭证。开发者需要在开发者服务器后台,使用 code 换取 openid 和 session_key 等信息微信登录配置onlyAuthorize:true才会返回,App 3.2.6+、京东小程序
appleInfoObject
errMsg描述信息

uniCloud.callFunction()客户端调用云函数 见下;云函数中调用另一个云函数 见下

普通云函数方式

uni-app的前端代码,不再执行uni.request联网,而是通过uniCloud.callFunction调用云函数,callFunction方法的参数和返回值如下:

方法参数

callFunction需要一个json对象作为参数,其中包含2个字段

字段类型必填说明
nameString云函数名称
dataObject客户端需要传递的参数

返回json

字段类型说明
resultObject云函数执行结果
requestIdString请求序列号,用于错误排查

前端示例代码

假使云服务空间有一个云函数名为“test”,那么前端可以通过如下方式调用这个云函数

uniCloud.callFunction({
	name: 'test',
	data: { a: 1 },
	success(){},
	fail(){},
	complete(){}
});

公共模块

公共模块依赖

 

云函数获取用户信息

前端页面

云数据库icon-default.png?t=N7T8https://uniapp.dcloud.net.cn/uniCloud/hellodb.html#base

uniCloud.database()客户端访问云数据库,获取云数据库对象引用 

// 获取 `user` 集合的引用
const collection = db.collection('user');

#集合 Collection

通过 db.collection(name) 可以获取指定集合的引用,在集合上可以进行以下操作

类型接口说明
add新增记录(触发请求)
计数count获取符合条件的记录条数
get获取集合中的记录,如果有使用 where 语句定义查询条件,则会返回匹配结果集 (触发请求)
引用doc获取对该集合中指定 id 的记录的引用
查询条件where通过指定条件筛选出匹配的记录,可搭配查询指令(eq, gt, in, ...)使用
skip跳过指定数量的文档,常用于分页,传入 offset
orderBy排序方式
limit返回的结果集(文档数量)的限制,有默认值和上限值
field指定需要返回的字段

查询及更新指令用于在 where 中指定字段需满足的条件,指令可通过 db.command 对象取得。

 

uni.getUserProfile(OBJECT)

获取用户信息。每次请求都会弹出授权窗口,用户同意后返回 userInfo。为保证用户隐私,不能直接调用,必须由点击按钮才可以调用。

OBJECT 参数说明

参数名类型必填说明
descString声明获取用户个人信息后的用途,不超过30个字符
langString指定返回用户信息的语言,默认为 en。更多值请参考下面的说明。
successFunction接口调用成功的回调
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

lang 值说明

说明
zh_CN简体中文
zh_TW繁体中文
en英文

**注意:**可以使用 if(uni.getUserProfile) 判断uni.getUserProfile是否可用。

success 返回参数说明

参数类型说明
userInfoOBJECT用户信息对象
rawDataString不包括敏感信息的原始数据字符串,用于计算签名。
signatureString使用 sha1( rawData + sessionkey ) 得到字符串,用于校验用户信息。
encryptedDataString包括敏感数据在内的完整用户信息的加密数据,详细见加密数据解密算法。
ivString加密算法的初始向量,详细见加密数据解密算法。
cloudIDString敏感数据对应的云 ID,开通云开发的小程序才会返回,可通过云调用直接获取开放数据,详细见云调用直接获取开放数据
errMsgString描述信息

userInfo 参数说明

参数类型说明
nickNameString用户昵称
avatarUrlString用户头像
genderNumber用户性别
countryString用户所在国家
provinceString用户所在省份
cityString用户所在城市
languageString显示 country,province,city 所用的语言

gender 的合法值

说明
0未知
1男性
2女性

language 的合法值

说明
en英文
zh_CN简体中文
zh_TW繁体中文

更新云数据库信息

 

 建立索引

 db.command 

查询筛选指令 Query Command

以下指令挂载在 db.command 下

类型接口说明
比较运算eq字段等于 ==
neq字段不等于 !=
gt字段大于 >
gte字段大于等于 >=
lt字段小于 <
lte字段小于等于 <=
in字段值在数组里
nin字段值不在数组里
逻辑运算and表示需同时满足指定的所有条件
or表示需同时满足指定条件中的至少一个

如果你熟悉SQL,可查询mongodb与sql语句对照表 (opens new window)进行学习。

#字段更新指令 Update Command

以下指令挂载在 db.command 下

类型接口说明
字段set设置字段值
remove删除字段
inc加一个数值,原子自增
mul乘一个数值,原子自乘
push数组类型字段追加尾元素,支持数组
pop数组类型字段删除尾元素,支持数组
shift数组类型字段删除头元素,支持数组
unshift数组类型字段追加头元素,支持数组

 查

 

 

### 如何使用 UniApp 开发记事本应用程序 #### 1. 记事本应用的核心功能分析 开发一个基于 UniApp 的记事本应用,其核心功能通常包括笔记创建、编辑、删除和存储等功能。这些功能可以通过 Vue.js 和 UniApp 提供的跨平台能力实现[^3]。 #### 2. 初始化项目并设置基础配置 通过官方推荐的 HBuilderX 工具来初始化一个新的 UniApp 项目[^2]。完成项目的初始化后,需修改 `manifest.json` 文件中的基本信息,例如应用名称和标识符等[^1]。 #### 3. 数据存储方案设计 为了保存用户的笔记数据,可以选择本地存储方式(如 Storage API),或者更复杂的云端数据库服务(如云函数)。对于简单的记事本应用,建议先采用本地存储方法: ```javascript // 使用 uni.setStorageSync 存储单条笔记 uni.setStorageSync('note_' + id, noteContent); // 获取某一条笔记的内容 const noteContent = uni.getStorageSync('note_' + id); ``` 上述代码展示了如何利用同步版本的 Storage 方法进行数据存取操作[^4]。 #### 4. 页面结构规划与组件化开发 按照 MVVM 架构模式构建页面逻辑层与视图层分离的设计思路。以下是可能涉及的主要几个页面及其对应的功能描述: - **首页 (Home)**: 展示所有已有的笔记列表; - **详情页 (Detail)**: 查看具体某篇笔记内容; - **新增/编辑页 (Edit)**: 创建新笔记或修改已有记录; 每个页面都可以被封装成独立的小型模块以便重用性和管理便利性提升。 #### 5. 实现基本CRUD功能 下面给出一段简化版的新建笔记功能示范代码片段: ```html <template> <view class="container"> <input v-model="title" placeholder="请输入标题"/> <textarea v-model="content" auto-height placeholder="在这里输入您的想法..."></textarea> <button @click="saveNote">保存</button> </view> </template> <script> export default { data() { return { title: '', content: '' }; }, methods:{ saveNote(){ const now = Date.now(); let notesList = []; try{ notesList = JSON.parse(uni.getStorageSync('notes_list')) || []; }catch(e){ console.error("解析失败", e); } notesList.push({ id:now, timestamp:now, title:this.title.trim(), content:this.content.trim() }); uni.setStorageSync('notes_list',JSON.stringify(notesList)); this.resetForm(); // 清空表单项 uni.showToast({icon:"success",title:"保存成功"}); }, resetForm(){ this.title=''; this.content=''; } } } </script> ``` 此部分实现了用户界面交互以及将填入的信息持久化至设备内存之中。 #### 6. 测试与调试 借助 HBuilderX 自带的一键预览功能快速验证各个场景下的表现情况,并及时调整优化用户体验[^5]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值