云开发_云开发数据库 - CSDN
精华内容
参与话题
  • 微信小程序开发实战入门,学习小程序云开发,摆脱后台,自己实现后台数据,从此就可以愉快的写小程序,自己实现小程序后台了。
  • 云开发:未来的软件开发方式

    千次阅读 多人点赞 2019-12-24 01:13:09
    我知道这篇文章你可能读不懂,但是它值得你去分享,未来就在那。如你所见,在过去的几年里,发生了快速的变化(这句话,我已经说烂了)。好比如说:编程门槛的降低。大量的低编程能力水平可以进入这个...

    我知道这篇文章你可能读不懂,但是它值得你去分享,未来就在那。

    如你所见,在过去的几年里,发生了快速的变化(这句话,我已经说烂了)。好比如说:

    • 编程门槛的降低。大量的低编程能力水平可以进入这个行业(如上一篇文章)

    • 基础设施的完善。只需要执行 git push,便能完成 push to production(尽管四年前我们在项目上实践过)

    • 云主机开发。远程开发机器,代码不在本地机器上。

    • 多人实时开发编辑技术。诸如于 Visual Studio Live Share,可以多人实时协作编程。

    • 5G。更快速的网络连接,更好的通信质量。

    • ……。

    在经历了与公司大佬、同事、社区大佬等的一系列的技术讨论之后,以及近年来开始云代码开发,我又有了一些新的顿悟。于是,我就撸了这篇文章。

    在你失去继续往下阅读的兴趣之前,让我先说第一个结论:

    云开发,是一种生于云上的闭环 + 代码化的软件开发方式。它可以让业务人员、开发人员、运营人员等在同一个云端共同协作透明化地完成整个软件的生命周期(需求、设计、编码、构建、部署、运营),而非相互隔离,又或者是借助于多个软件才能完成工作。

    因此云开发是一种解决方案,它解决的问题是:如何以更高效地方式进行软件开发?

    作为 v0.1.0 的定义,我对它的定义可能还不是非常准确,但是重点有这么几个:

    • 共同协作的方式开发软件

    • 软件开发的在线闭环

    • 应用生命周期的代码化和可追溯

    你看吧,我们过去解决了一个又一个的线下协作问题,现在构建新的线上协作平台的时机已经逐渐成熟了,是时候开始准备构建你们的云开发平台。

    我知道你想说市面上已经有这样的工具,比如 xx 的 xx。但是,一来它朝着一个错误的方向前进,你知道的某公司更懂 2B;二来,它包含了大量的功能,但是却没有闭上环。当然了,我只是从官方的首页看到的功能,一眼得到这个所谓的结论。

    PS:只要是它们没办法体现我总结的核心三要素,笑~。套不上我的理论,他们一定是错的,手动滑稽,逃~。

    引子 1:核心三要素

    这三个要素是软件开发的要素,只有深入要素本身,才能成为真正的云平台。

    我不想多说废话了,手疼。

    如果基础设施真的已经是基础设施,那么你不应该在云平台强调它们。这就是为什么尽管基础设施很重要,但是却不是核心要素之一。基础设施已经是一个通用域,作为一家时髦的公司,如果你们还没有……。

    微架构

    微架构,即以模块化的组合方式协同构建大型应用(前端、后端、APP等)的架构方式。每个微应用都可以独立开发、独立部署、独立运行,对应的替换的方式有模块化、子模块的方式,微服务、APP 插件化(独立构建、独立运行)、微前端等。

    微架构是一个模式,它不是银弹,它以技术的方式拆解了复杂软件架构,适合于复杂场景下的问题,还有人类脑容易不够大的问题。

    后端:服务导向架构

    五年前,Martin Fowler 和 James Lewis 一起写下了那篇《微服务架构》,微服务成为了今天新项目的主流架构之一。最近几年来,它结合着《领域驱动设计》这把锤子,已经成为了一个利器。

    作为服务导向架构的一种实现方式,掌握它背后的设计与实现模式,是云开发中不可或缺的重要一环。

    后端:函数即服务

    两年多以前,我在 GitHub 写下了我的第 N 本电子书《Serverless 架构应用开发指南》,而在最近 Serverless 终于在国内慢慢有一点的热度。两年前,我陆续收到阿里云、腾讯云的 Serverless 尝鲜体验(作为一个 MVP 还是没白混),但是它们并不成熟,甚至于无法调用自己的云服务。而今天,越来越多的云厂商的 Serverless 终于可以跑起来了,

    同理于服务导向架构 BAAS (Backend as a service)又或者是 Serverless,也是如此,它们进一步拆解了复杂问题到人能 handle 的范围。

    APP:应用即『插件』

    最近几年,对于 APP 来说,开发者也探索出了大量的微架构方案。我习惯地称它们为应用即『插件』,因为 APP 作为一个基座,提供了各式各样的能力。就目前来说有三种展现方式:

    • APP 内 Web 应用。

    • APP 插件化。市面上已经有大量这一类的方案,诸如于 RePlugin、Atlas、VirtualAPK、DynamicAPK。

    • APP 小程序。即功能以小程序的运行在容器化,即可以像 Web 容器一样实现远程更新,还能有效地控制开发商的权限,培养自己的生态。

    尽管让人们下载 APP 的成本越来越高,APP 平台化成为了一种趋势。

    哪怕 APP 的原生仍占很重要的一部分,但是 App 平台的方案 + 应用插件化模式的生态构建,也是云开发要考虑的重要因素。

    前端:微前端与应用组件化

    今年是微前端开始火爆的一年,微前端框架层出不穷:SingleSPA、Mooa、qiankun、ngx-planet,还有诸如于《前端架构:从入门到微前端》这样的书籍。它让越来越多的企业开始思考前端架构的未来,也完善丰富的微前端相关的基础设施。从某种意义上来说,这是组件化的一种方式,只是原先的组件只是简单的 UI 组件,而现在的组件是一个完整功能的应用。只需要设计好对应的 pipe,就能完成一个应用的开发。

    而随着 5G 的到来,微 “服务化” 前端应用、Web Component 的体积已经变得让人可以接受。进行功能编排,将成为云开发的一个重要组成——毕竟,插件市场地不断火爆,可以看出一些端倪。

    代码化

    对于这部分的一句话总结是:

    • Given Future[Dev]

    • When Everything as Code,

    • Then you can Guard

    • Then you can Refactoring or Rewrite it.

    然后,以下大概就是三种完全不同的模式。

    设计到代码:填空式开发

    起先我只有两种模式,直到月初在公司内部听到了相关的分享,Get 了第三种模式:面向于大型组织的类型流 (https://github.com/notyy/TypeFlow) 开发。

    这种方式颇为适合大型组织的软件开发模式,由高级工程师设计出基本的模型与软件架构,生成对应的方法名称,以及其所需要的返回结果。这种模式事实上在过去已经有了,剩下的就是普通的开发人员去填充对应的代码。再结合 Serverless 等基础设施,便可以直接集成上线。

    它表面上看它是设计生成的代码,实则设计即代码。

    需求到上线:无代码编程

    年初,我写下了那篇《无代码编程》,通过这篇文章,我结交了更多无代码/低代码已经有大量的案例表明,这是一种可行的开发模式。

    无代码编程的本质是业务模式 + 编程模式的抽象化,以领域特定的场景解决领域特定的问题。所以,低代码编程 / 无代码编程它只能解决领域特定、简单场景的需求,无法解决大部分的问题。

    无代码编程做了一件了解不起的事情是,直接对于业务和设计即需求的抽象,实现了直接由需求到代码的直达。

    代码化:DSL as DSL

    DSL 即 DSL,即把每件事物都变成 DSL。考虑到我正在编写一篇关于 DSL 如何设计的文章,我就不展开详细的讨论:

    1. 汲取领域名词

    2. 模型分析与抽象

    3. 模型行为抽象

    4. 寻找关键抽象

    5. 场景代入

    6. 实现 DSL

    7. 迭代优化

    而代码本身也应该是一种 DSL,才能进一步完成云平台的建议。需求、设计、代码、构建、部署、运营都应该抽象成 DSL,才能完成真正意义上的云平台。

    协作设计文化

    软件开发是一个集体行为,软件设计也是一个集体行为。所以,一个好的云开发平台应该要融入共同协作的基因

    软件开发文化

    采用了敏捷,却始终敏捷不起来,有一部分的原因在于:部门墙。对于非互联网公司来说(对于大部分互联网公司也是如此),开发一个软件往往需要在多个部门甩锅:业务部门、技术部门、测试部门、市场部门……。

    业务(领域)驱动设计

    以我多年的读书经验来看,人们采用开发出失败软件的原因,无非就是两点:『缺少协作设计』和『知识传递』。对了,还有技术水平不行,这个反而不是那么重要。

    而 《DDD (领域驱动设计)》和事件风暴,正是软件开发文化的一种实践,通过协作设计的方式,传递知识,以妥协出符合大家需要的应用。

    服务端服务中台与客户端组件中台

    可能是我对于中台的误解,我习惯性称中台为『不可清空的垃圾回收站』。但是,它做了一件不可思议的事件,将 “基础设施服务” 化,成为了一个 common 的 common 的 common。好了,调侃到此结束。

    随着中台建设的进一步完善,大量的基础设施,将从原先的各个业务部分,统一到了这个 ~~垃圾回收站~~ 大平台。

    有了这个基础部分,我们才能迈向下一步。

    引子 2:编程的本质

    好了,我要继续瞎扯了,首先再次回答那个问题,如何以更高效地方式进行软件开发?那么,首先我们需要找到一个解决方案,以应对那个问题:如何解决人类智商不够的问题?

    解决复杂问题

    于是,首先,让我们引入 Cynefin 框架来解决复杂问题。

    PS:复制和粘贴大法好啊,一时爽一直爽

    简单(Simple),该域中的因果关系显而易见,方法是感知——分类——响应(Sense - Categorise - Respond),我们能够应用最佳实践。

    繁杂(Complicated),该域中的因果关系需要分析,或者需要一些其他形式的调查和 / 或专业知识的应用,方法是感知——分析——响应(Sense - Analyze - Respond ),我们能够应用好的实践。

    复杂(Complex),该域中的因果关系仅能够从回想中感应,不能提前,方法是探索——感知——响应(Probe - Sense - Respond ),我们能够感知涌现实践(emergent practice)。

    混沌(Chaotic),该域中没有系统级别的因果关系,方法是行动——感知——响应(Act - Sense - Respond ),我们能够发现新颖的实践(novel practice)。

    第 5 个域是失序,该域中不清楚存在什么样的因果关系,这种状态下人们将会恢复到自己舒服的域做决定。Cynefin 框架拥有子域,简单和混乱之间的一线之隔是灾难性的:骄傲自满导致失败。

    有了这个框架之后,我们便来到了第一个结论。对于编程来说,我们的关键性问题在于:如何将复杂问题繁杂化?。因为简单的问题便简单,繁杂的问题也容易解决。

    复杂问题的应对之道

    什么是复杂问题?

    引用公司大佬的三句话:

    1. 场景多且复杂

    2. 人类的智商不够

    3. 语言不统一

    这三个问题的答案暂不免费公开,有意者可以咨询我 —— 其实都在本文里。

    看完文章后,回过头来回顾一下这个问题。

    大型组织的软件开发模式

    为了解决上述的问题,对于大型组织来说,采用的第一个模式就是:拆解。

    • 资深开发人员,设计架构

    • 中级开发人员,review 代码

    • 普通开发人员,完成开发

    • 新手开发人员,写写测试

    而就当前而言,这几个部分存在一些割裂。代码反应架构,架构实现代码。缺少相应的架构守护、质量门禁等等,并且诸如于 review 的工作是由机器完成的。

    云开发

    好了,看到这里不容易。因为剩下的内容已经不重要了。

    什么是云开发?

    再一次地,让我们看一下定义:

    云开发,是一种生于云上的闭环 + 代码化的软件开发方式。它可以让业务人员、开发人员、运营人员等在同一个云端共同协作透明化地完成整个软件的生命周期(需求、设计、编码、构建、部署、运营),而非相互隔离,又或者是借助于多个软件才能完成工作。

    于是乎,它不同于云主机 / 远程主机开发模式,只需要一个浏览器 / 客户端 / IDE,便可以在线完成:

    • 实例化需求

    • 架构、交互的设计

    • 编码的代码化

    • 自动集成与构建

    • 无环境部署

    • 人工智能运营

    举起我的炒板栗:

    1. (调试)输入一个 console.log 或者 fmt.Println 便可以在生产环境对应地打出日志。

    2. (需求直接上线)改一个 Icon 的需求,在图标上传到 Kanban 的时候。NLP 后,自动提交到代码库,部署到生产环境。

    3. (代码创建需求)把默认字体的色彩,由 #000 改成 #384452 的时候,能反触发对应的需求变更——不过就是 commit message,反向地创建需求嘛。

    4. (设计同步)模型上添加一个新的字段,对应的完成前端、后端模型的自动化更新。

    5. (代码构建同步)新的分支,新的 pipeline,用完即删。

    6. ……

    它基于这么一些原则:

    1. 代码化优于过程化数据。

    2. 流程自闭环优于交互。

    3. 度量内建优于可视化

    要的就是这么简单,对于开发来说,只是对应于领域建模、详细设计、填空式开发等。

    如何构建云开发平台

    成熟度模型

    就定义来说,我们可以将其划分为五个阶段:

    1. 具备基本的远程编程能力及自动化部署。即代码无需在本地

    2. 在云端能完成软件开发的完整生命周期。能在云端完成所有的软件开发的工作,并且配套

    3. 云开发平台上的云开发平台。(自举)

    4. 借助于代码化的方式,将软件开发的每一个步骤都变成代码

    5. 实现开发全流程的自动优化。如自动化的蓝绿部署,自动化选择方案,自动化优化。

    6. 无人编程。Human Over

    第一个阶段。靠人海战术就可以实现了。

    第二个阶段。依赖于抽象软件开发模式。

    第三个阶段。证明自己,体力劳动。

    第四个阶段。进一步抽象软件开发。

    第五个阶段。抽象人工部分,智能完成。

    所以,嗯,大概要 N 的时间才能完成这个系统的设计。毕竟,云开发是一个复杂问题,我们需要不断拆解系统,结合微架构、代码化、协作设计三个核心要素,以免我们在历史的长河中消失。

    云开发平台基石

    虽然,我一直在强调实现只是一个细节,但是还是得大致了解一下实现机制。

    集成开发环境

    编码环境 + 设计环境。

    微信小程序、支付宝小程序、在线 Web IDE,VS Code / Monaco Editor 几乎已经当前成为了定制编辑器 / IDE 的最好选择。这样一看,JetBrains 再不努力,可能会失去未来,就像当年的 Delphi 一样,笑~。

    这方面的技术在业内已经相当成熟了,不就是加一些插件嘛。

    不过呢,它们只是在堆砌一些功能,缺乏闭环上的设计:

    1. 需求关联设计,关联代码

    2. 代码展示设计,关联需求

    3. 构建关联代码,连接部署

    如你所知的提交信息规范是一种形式,它可以关联到需求;如你所知的领域建模是一种形式,让代码关联到设计上;

    基础设施

    尽管,在文章开头的时候,我说了基础设施不重要。但是到真正需要实施的时候,我们不得不强调它的重要性。我们需要的东西有:

    • 微架构支持

    • 部署和构建支持

    • 自动配置化管理

    • ……

    而围绕在它背后的是各种模式的提炼。

    模式提炼

    无论是在哪个行业,值钱的东西在于原则与模式。原则与模式是用来快速提升能力的方式,换句话来说,就是让新手能像以大牛一样的方式工作——尽管会烂用模式。所以:

    • 代码的模式类库

    • 开发流程模式

    • 用户体验设计模式

    • ……

    这些是核心所在,抽象、提取、模式化。

    全流程闭环

    如你所猜想的一样,构建这样一个平台的难点,不在于实现功能,而在于设计。只需要保证在当前阶段的信息,能够传递到下一阶段即可,而不在于你使用什么工具。

    你可以使用 Jira、Trello、Mingle 或者基于 Git + DSL 的方式,只需要保证它们能关联到下一阶段,即可。一步步往下,将信息关联到设计、代码、构建、部署、运营,运营再反应到需求上,就能完成上的设计。

    So?

    原型设计与关键因子

    作为模式的拆解,我做了一个简单的分级,以便于一步步实现整个系统:

    需求

    事实上,采用诸如 Cucumber 一样的 Given-When-Then 三段式设计就够了。所以在我的 story 工具里,利用了注释作为额外的信息扩充。Cucumber 使用的 DSL 已经有丰富的

    # id: OGr9CObWR
    # startDate: 2019-11-21T23:44:27Z
    # endDate: 2019-11-21T23:44:27Z
    # priority:
    # status:
    # author:
    # title: add executable bin file
    # language: zh-CN
    @math
    功能:add executable bin file
     场景:
     假设:
     当:
     并且:
     那么:
    

    有了这个设计,我们可以将这个设计结合到我们的下一步设计中。

    设计

    其实 UML 本身也是一个不错的原型,只需要创建一个 DSL 将其中的一部分转成 UML,再结合一下 UI 上的 DSL 便能实现流程上的设计:

    flow login {
     SEE HomePage
     DO [Click] "Login".Button
     REACT Success: SHOW "Login Success".Toast with ANIMATE(bounce)
     REACT Failure: SHOW "Login Failure".Dialog
     SEE "Login Failure".Dialog
     DO [Click] "ForgotPassword".Button
     REACT: GOTO ForgotPasswordPage
     SEE ForgotPasswordPage
     DO [Click] "RESET PASSWORD".Button
     REACT: SHOW "Please Check Email".Message
    }
    

    最近,我们在做一个对应的架构设计平台:

    结合我的 https://github.com/phodal/design 用于代码生成设计,设计转为代码。

    代码

    代码生成并不是一件新鲜的事物,有大量的人在做大量的事件。编写一个 DSL,用这个 DSL 结合编程语言描述 DSL 来生成不同的编程语言,这便是我最近在做的事情之一。它并不复杂,只是繁琐。

    嗯,我花了很多时间在设计这个步骤的两个 DSL,其中一个是生成语言的 DSL,一个则是独立的编程 DSL。

    与此同时,对于代码来说,我们关注于:验收标准和适应度函数。

    验收标准

    • 设计生成代码,代码反应设计

    • DSL 生成代码

    适应度函数

    • 软件质量门槛

    • 自动化架构守护

    • 自动化测试生成(回录)

    • 系统演进设计

    借助于此,我们才能承上启下。

    构建

    对于持续集成来说,需要手动去配置是一个糟糕的事情。所以,我们 Jenkins 使用了 Pipeline as Code 来抽象流水线的构建。但是,它没有真正解决问题,因为现实的软件开发是非常复杂的。对于一个项目来说,它存在过多的分支,不同的构建。所以,真正意义上的持续构建,应该采用诸如于 Pipeline as Pipeline 这样的方式。

    部署

    事实上,DevOps 技术已经足够的成熟,我们已经能实施相关的步骤:

    1. 部署自动化

    2. 部署代码化

    3. 提交即上线

    4. 部署自治

    代码质量的控制,自动化测试,决定了部署成熟度。

    运营

    这一步,我还不是非常擅长,以我有限的经验来看,现有的工具就够了。唯一要做的事情是,收集数据,抽象模式,构建 DSL,串联起来。

    1. 运营可视化

    2. 运营中心化

    3. 代码化运营

    4. 运营需求化

    需求 -> 代码 -> 运营,运营反馈需求。

    云开发平台成熟度模型

    嗯,看标题就够了。

    Level 1:可追述、电子化

    Level 2:全流程闭环

    Level 3:云平台上的云平台

    Level 4:代码化云平台

    Level 5:自动化优化流程

    level 6:human over

    结论

    最后,再让我们回到这张图上:

    这就是核心所在。

    哦,对了,做平台是一件苦逼的事情。

    我的微信号:

    哦,不对~,这才是我的:growth-ren

    引用:

    • Cynefin 框架部分:https://www.infoq.cn/article/2013/10/cynefin-framework-playing-lego

    • GitHub 上的类型流:https://github.com/notyy/TypeFlow

    • 无代码编程:https://www.phodal.com/blog/low-code-programming/

    • 微前端如何落地:https://www.infoq.cn/article/xm_AaiOTXmLpPgWvX9y9

    • 需求 DSL:https://github.com/phodal/story

    • 设计 DSL:https://github.com/phodal/design

    • 编码 DSL:https://github.com/phodal/code

    展开全文
  • 在学习云开发的时候将自己的学习过程记录下来了,放在了网上,收获了一波好评,今天下午在办公室没有事情,也发现之前有人在博客里面评论,你这个教程还有一半哩,可能是csdn的自动搬运功能出来一点小问题,没有搬运...
        

    前言:

    在学习云开发的时候将自己的学习过程记录下来了,放在了网上,收获了一波好评,今天下午在办公室没有事情,也发现之前有人在博客里面评论,你这个教程还有一半哩,可能是csdn的自动搬运功能出来一点小问题,没有搬运成功吧,这里就手动复制粘贴成为一篇了,篇幅比较长,如果有不足或者不注意写错的地方,欢迎大家提出纠正哦。

    小程序云开发实战一:小程序扫一扫获取到图书ISBN码(图书条形码)

    5640239-8581f4b9e9b618bc.png

    接触到云函数已经有一段时间了,之前一直在看api,现在自己跟着网络上的资料和视频学习,做了一个小项目,类似于豆瓣读书系列。
    具体是这样的一个流程,后面会一步步的实现。

    小程序扫码实现读取isbn,获取图书的各种信息
    1:用户端小程序调用 wx.scanCode接口,获取到ISBN码
    2:使用ISBN码调用云函数,在请求云函数的时候,云函数会请求豆瓣的API,获取豆瓣图书信息。
    3:图书信息请求到之后,会将其中无用的信息返回给小程序中,小程序中再拿出获取到的信息,创建图书条目
    4:将对应的数据直接存储到云开大的数据库里面

    之前用过微信扫一扫功能,调用二维码,扫描自己生成的二维码,并将二维码的内容显示在界面的两个例子:

    微信小程序扫一扫的功能实现:https://www.jianshu.com/p/e00b44293fe0
    小程序扫码成功后带着参数跳转到指定页面:https://www.jianshu.com/p/413c5831ddd6

    现在是用户端小程序调用 wx.scanCode接口,获取到图书ISBN码(图书条形码),在办公室找了一圈,找到了一本图书ISBN码,可以自动忽略我这渣渣的像素。

    5640239-fd2a615a8fb5ca48.jpg

    demo的示例:

    在下面的示例代码里面,我是使用了小程序的组件库的,如果有遇到引入库的问题的可以查看:小程序动端组件库Vant Weapp的使用https://www.jianshu.com/p/10d75a3ca3d0

    1:wxml

    <van-button type="primary" bind:click="scanCode">扫码加书</van-button>
    

    2:json

    {
     "usingComponents": {
      "van-button": "../../vant/button/index"
    }
    }
    

    3:js(page自动生成默认的各个函数,可以自己手动删除)

    // pages/scanCode/scanCode.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
       
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      },
    
    scanCode: function (event) {
    console.log(1)
      // 允许从相机和相册扫码
      wx.scanCode({
       onlyFromCamera:true,
       scanType:['barCode'],
       success:res=>{
         console.log(res.result)
       },
       fail:err=>{
         console.log(err);
       }
      })
      }
    
    })
    

    ok,获取到信息


    5640239-2d76a64bc0498c62.png

    关于参考的视频资料:可以跟着视频后面学习一下:https://cloud.tencent.com/developer/edu/learn-100005-1244/3154

    小程序云开发实战二:小程序云开发云函数安装依赖步骤

    1:安装nodejs,准备好环境,这一步就不细说了,没有安装的可以自行百度,不知道有没有安装的可以输入 node -v 查看一下。

    2:新建一个云函数模板,在cloudfunctions目录底下,新建一个云函数的文件bookinfo。


    5640239-1ca19063ef5ead22.png

    3:在新建文件上右击文件,选择在终端打开。


    5640239-5fbdc2e5180c7c4c.png

    这个时候会弹出一个cmd窗口。


    5640239-9016702e019d119f.png

    4:在cmd 打开云函数目录中,安装依赖。
    输入命令:

    npm install --production
    

    依赖安装成功之后,文件里面多会出现package-lock.json这个文件。

    5640239-41ad6e8128f31cf4.png

    5:由于要请求网络,所以要安装请求网络的库,请求网络的库可以使用node.js中的request库,方便快捷:https://github.com/request/request

    在小程序里面要使用的云函数是同步的,所以使用promise,因为使用传统的callback没有办法在控制台之中返回数据。

    5640239-40a7204723ffc66e.png

    https://github.com/request/request-promise
    安装方法:
    通过这两行命令进行安装,复制命令

    npm install --save request
    npm install --save request-promise
    
    5640239-a37708e20a5065ad.png
    5640239-71aa4915fd9bb41f.png

    ok,完成,依赖已经放置在package.json文件之中了

    5640239-9b467b557287f1f9.png

    ok,当文件上传到云端的时候,就会自动安装相关依赖了。

    小程序云开发实战三:编写云函数代码

    1:在云函数之中,拿到小程序端扫一扫获取到的传的编码,该如何传参?

    云函数API:
    https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/functions/callFunction.html

    通过看文档可以学会,在云函数里,我们可以通过传递一份data来获取这里面的数据,然后再通过event来拿到对应的数据。


    5640239-bbab403cbd90867c.png

    2:复制这个api里面的方法:

    5640239-e35e01fc4c2764b6.png
    图片.png

    打开实战一里面写的小程序端的扫码的js界面,把这个方法放在success里面。
    要调用的云函数的名称name:要改成成实战二教程里面建立的云函数bookinfo

    5640239-c7c0fa9da6ab2b4e.png

    3:继续修改我们要传递的参数
    传递的参数是isbn,结果是扫码得到的result

    5640239-90ceaa34b653a77f.png

    4:将result的结果打印出来,ok,用户端(小程序端)代码写好了。

    5640239-b7482168d4129582.png

    用户端(小程序端)代码写完了,就这些:

    // pages/scanCode/scanCode.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
      },
    
    scanCode: function(event) {
        console.log(1)
        // 允许从相机和相册扫码
        wx.scanCode({
          onlyFromCamera: true,
          scanType: ['barCode'],
          success: res => {
            console.log(res.result)
    
            //
            wx.cloud.callFunction({
              // 要调用的云函数名称
              name: 'bookinfo',
              // 传递给云函数的参数
              data: {
                isbn: res.result
              },
              success: res => {
                console.log(res)
             
              },
              fail: err => {
                console.error(res)
              }
            })
          },
          fail: err => {
            console.log(err);
          }
        })
      }
    
    })
    

    5:然后开始写云函数端代码

    打开bookinfo里面的index.js,将event结果打印出来,请求云函数,将云函数之中的isbn返回回来

    5640239-dcad4d78a51a0f57.png

    写好了

    // 云函数入口文件
    // const cloud = require('wx-server-sdk')
    // cloud.init()
    
    
    
    // 云函数入口函数
    
    //var rp = require('request-promise')
    
    exports.main = async (event, context) => {
     console.logI(event);
    return event.isbn
      
      // var res = rp('https://api.douban.com/v2/book/isbn/' + event.isbn).then(html => {
      //   return html;
      // }).catch(err => {
      //   console.log(err)
      // })
      //return res
      // const wxContext = cloud.getWXContext()
      // return {
      //   event,
      //   openid: wxContext.OPENID,
      //   appid: wxContext.APPID,
      //   unionid: wxContext.UNIONID,
      // }
    }
    

    右击,上传并且部署云函数


    5640239-f75589091c9daae4.png

    测试一下,云函数调用成功,返回的结果(控制台打印)是isbn。


    5640239-b4cdf387b4669a93.png

    好的,云函数代码编写已经完成。
    接下来就是实战四,调用豆瓣的API,实现具体的数据。

    小程序云开发实战四:调用豆瓣API获取具体的数据

    在网上找了一下,找到了一个可以用的豆瓣API:
    https://api.douban.com/v2/book/isbn/:9787111128069

    1:打开云函数文件夹,index.js里面编写代码,引用request promise。

    var rp = require('request-promise')
    

    2:自定义的isbn,使用一个+号来连接,在传递一个catch来处理错误情况。

    var res = rp('https://api.douban.com/v2/book/isbn/'+event.isbn).then(html=>{
    return html;
    }).catch(err=>{
    console.log(err)
    })
    

    3:return resres就是对应的html,将html传给用户端。

    5640239-d294d78de2306058.png
    图片.png
    // 云函数入口文件
    // const cloud = require('wx-server-sdk')
    // cloud.init()
    
    // 云函数入口函数
    var rp = require('request-promise')
    exports.main = async(event, context) => {
      // console.logI(event);
      // return event.isbn
    
      var res = rp('https://api.douban.com/v2/book/isbn/' + event.isbn).then(html => {
        return html;
      }).catch(err => {
        console.log(err)
      })
    
      return res
      // const wxContext = cloud.getWXContext()
    
      // return {
      //   event,
      //   openid: wxContext.OPENID,
      //   appid: wxContext.APPID,
      //   unionid: wxContext.UNIONID,
      // }
    }
    

    4:写完之后上传云函数。


    5640239-ad318eb74941f19d.png
    5640239-38647355554f219a.png
    图片.png

    好了,继续测试一下,拿到这个条形码的信息了(书本的信息)。


    5640239-eb9e2f56cdd312b0.png
    5640239-e26219ea9fdc7c32.png

    5:对于这些信息,进一步处理,拿到自己想要的信息:,打开小程序端scanCode.js。

      //进一步的处理方法
            var bookString=res.result;
            console.log(JSON.parse(bookString))
    
    5640239-bd07e0d97fef7f3c.png

    看到了整本图书上面的所有信息,修改这些信息,存入云数据库之中即可。

    小程序云开发实战五:如何将获取到的API数据存入云数据库里面

    之前的文章里面已经详细写过像云数据库里面插入数据的方法,现在用在实际项目里面再写一遍。

    1:使用数据库的时候,首先要进行初始化
    云开发数据库文档:

    https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/init.html
    2:打开云开发控制台
    老规矩,创建一个集合
    books

    5640239-0b04d2f5df359aee.png

    3:打开小程序端js,
    初始化数据库

     //云数据库初始化
             const db = wx.cloud.database({});
             const book = db.collection('books');
    

    4:添加数据(插入数据)
    js代码流程

    // pages/scanCode/scanCode.js
    Page({
      data: {
      },
    
      scanCode: function (event) {
        console.log(1)
        // 允许从相机和相册扫码
        wx.scanCode({
          onlyFromCamera: true,
          scanType: ['barCode'],
          success: res => {
            console.log(res.result)
    
            //
            wx.cloud.callFunction({
              // 要调用的云函数名称
              name: 'bookinfo',
              // 传递给云函数的参数
              data: {
                isbn: res.result
              },
              success: res => {
                //  console.log(res)
                //进一步的处理
                var bookString = res.result;
                console.log(JSON.parse(bookString))
    
    
                //云数据库初始化
                const db = wx.cloud.database({});
                const book = db.collection('books')
    
                db.collection('books').add({
                  // data 字段表示需新增的 JSON 数据
                  data: JSON.parse(bookString)
    
                }).then(res => {
                  console.log(res)
                }).catch(err => {
                  console.log(err)
                })
              },
              fail: err => {
                console.error(res)
              }
            })
          },
          fail: err => {
            console.log(err);
          }
        })
      }
    
    })
    

    5:代码逻辑
    1:点击按钮之后调用扫一扫scanCode
    2:读取照相机传递过来的图片,拿到barCode的代码
    3:将拿到的barCode代码传递给云函数中的bookinfo,传递后将结果获取到本地
    4:用云数据库的示例去创建新的字段添加到数据库之中

    6:测试一下,好了,小程序端获取的豆瓣API数据存入云数据库里面了。

    5640239-41af1d0e4a96352b.png
    5640239-406c9454b293729a.png

    附上:

    主要思路:
    1:通过调用小程序的扫码的api
    2:调用云函数获取到图书的信息,并将图书信息传递到小程序
    3:在小程序中 调用云数据库来添加
    
    
    可能会有很多人有问,为啥不直接在云函数中完成添加?会更加简单方便啊,暂时留个悬念啊啊哈。
    
    
    

    小程序云开发实战六:云数据库读取的数据显示在小程序端列表里

    读取数据在之前也有详细的写过案例了,现在用在项目里面,很容易就能理解了。

    参考的读取api,请点击:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html

    1:初始化
    实例和book方法

      //云数据库初始化
        const db = wx.cloud.database({});
        const book = db.collection('books')
    

    2:复制API这段代码获取多个记录的数据的方法,放在项目到onload方法之中


    5640239-61ab3334275a334b.png
    5640239-f1a1e3c190a80d60.png
    const db = wx.cloud.database({});
    const cont = db.collection('books');
    Page({
      data: {},
      onLoad: function(options) {
        db.collection('books').get({
          success(res) {
            console.log(res.data)
          }
        })
      },
    
    })
    
    

    3:打印在控制台


    5640239-192455093c4945fd.png

    4:拿到res.data之后,要赋值给page实例里面的data
    所以在data里面设置一个默认的空数组


    5640239-263e8a82fb828848.png

    5:创建一个变量来保存页面page示例中的this,方便后续使用
    也可以使用箭头函数
    来打印一下this,看是不是page示例

    const db = wx.cloud.database({});
    const cont = db.collection('books');
    Page({
      data: {
        book_list:[]
      },
      onLoad: function(options) {
       // 创建一个变量来保存页面page示例中的this, 方便后续使用
        var _this=this;
        db.collection('books').get({
          success: res =>{
             console.log(res.data);
             console.log(this);
          } 
        })
      },
    })
    
    5640239-41133ea2d890a88c.png

    6:直接使用this来设置data


    5640239-761db86a02da477c.png

    7:显示和布局:
    使用组件库引入,可以省略自己写很多代码的样式,简单方便,当然也可以自己写。https://youzan.github.io/vant-weapp/#/card

    因为数据不止一条,循环,所以要用到小程序框架的列表渲染
    https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

    写好之后
    wxml如下:

    <text>私家书柜</text>
    <view wx:for="{{book_list}}">
      <van-card num="2" price="2.00" desc="描述信息" title="商品标题" />
    </view>
    

    8:先在js里面打印一条具体的数据,方便渲染的时候写出item.xxx的内容


    5640239-64948db769149a85.png
    5640239-56d1d58914636f8c.png

    9:小程序wxml界面

    主要demo
    wxml:

    <view wx:for="{{book_list}}">
      <van-card num="2" 
      price="{{item.price}}" 
      desc="{{item.author}}" 
      title="{{item.title}}"  
      thumb="{{item.image }}" />
    </view>
    

    js

    const db = wx.cloud.database({});
    const cont = db.collection('books');
    Page({
      data: {
        book_list:[]
      },
      onLoad: function(options) {
       // 创建一个变量来保存页面page示例中的this, 方便后续使用
        var _this=this;
        db.collection('books').get({
          success: res =>{
            console.log(res.data[0]);
           
            this.setData({
              book_list:res.data
            })
          } 
        })
      },
    })
    

    ok,云数据库读取的数据显示在小程序端列表里.


    5640239-a9fc3303be1678b2.png

    附录:更多的云开发参考资料和视频
    一个云开发的demo:https://github.com/LWJcoder/qiupihu
    云开发图书私房柜:https://cloud.tencent.com/developer/edu/learn-100005-1244/3148

    小程序云开发实战七:云开发首页列表跳转详情页

    1:实战六之中,列表页已经完成,现在新建一个详情页,打开app.json,"pages/details/details",,自动生成了一个详情页

    5640239-bf1cc83db4af3fdd.png

    2:打开首页列表页代码,绑定详情按钮跳转事件
    wxml:

    <view wx:for="{{book_list}}">
      <van-card num="2" price="{{item.price}}" desc="{{item.author}}" title="{{item.title}}" thumb="{{item.image }}">
        <view slot="footer">
          <van-button size="mini" bind:click="viewitem">详情按钮</van-button>
        </view>
      </van-card>
    </view>
    
    5640239-d006e2c161252df4.png

    3:继续写js里面的绑定事件,在控制台打印一下event,方便后续测试

      viewitem: function(event) {
        console.log(event)
      }
    
    5640239-fbcbeac743949484.png

    4:如何知道要跳转列表图书中的哪个详情页?要在云开发里面写一个特定的id,打开云开发控制台,数据库,需要用到这个下划线是_id的字段

    5640239-9d026738bfd519da.png

    5:给这个字段设置一个值,data-id="{{item._id}}"

    5640239-e46400c60cf0c5f7.png
    图片.png

    点击按钮,可以看到,点击不同的列表,打印的是不同的id,通过不同的id就可以看到不同的内容了。


    5640239-169f6ba41b9ac959.png

    6:下面实现点击详情按钮跳转详情页面,看到想要的具体的内容,看完控制台,因为具体数据是来自于event,currentTarget

    5640239-f75fbf9e96818a14.png

    所以js里面声明一下

     var id = event.currentTarget.dataset.id;
    
    5640239-d8ffef1eb2deec6c.png

    并且写好跳转页面的跳转方法和url,带参数跳转

    7:在detail.js的onLoad方法里面打印接收到的参数


    5640239-89ea9999d553a3e5.png

    8:测试,列表界面带参数跳转成功


    5640239-719d053f54c524c9.png

    分割线======分割线=======分割线=======分割线

    开始写详情页的一些代码

    1:初始化db的实例

    const db = wx.cloud.database({});
    
    5640239-5f8790d306a4373a.png

    2:打开云函数文档里面的读取数据apihttps://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html
    复制此段读取数据记录的代码,放在onload里面

    5640239-711d529ffdde21ab.png
       onLoad: function (options) {
       // console.log(options)
        db.collection('books').doc(options.id).get({
          success(res) {
            // res.data 包含该记录的数据
            console.log(res.data)
          }
        })
      },
      
    

    可以看到,具体数据已经打印过来了


    5640239-e9339b6c6e447c3a.png
    图片.png

    这个时候还没有将数据传递到一个具体的页面实例中


    5640239-6e0c13d24616ee64.png

    所以,success开始改成使用箭头函数

    // pages/details/details.js
    const db = wx.cloud.database({});
    Page({
      /**
       * 页面的初始数据
       */
      data: {
    
      },
      onLoad: function (options) {
        //  console.log(options)
        db.collection('books').doc(options.id).get({
          success: res => {
            console.log(res.data)
            this.setData({
              book: res.data
            })
          }
        })
      },
    })
    

    ok,进入页面的时候,可以看到appdata里面的book


    5640239-6846eff83c7bd9ba.png

    3:具体展示
    在wxml里面写上想要拿到的数据,ok,详情页面展示的数据


    5640239-d94b74747a2da599.png

    4:效果如下


    5640239-9a704da7af23c33c.gif

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq群聊来问我:473819131。

    小程序云开发入门实战课程总结:

    小程序云开发实战一:小程序扫一扫获取到图书ISBN码(图书条形码)
    小程序云开发实战二:小程序云开发云函数安装依赖步骤
    小程序云开发实战三:编写云函数代码
    小程序云开发实战四:调用豆瓣API获取具体的数据
    小程序云开发实战五:如何将获取到的API数据存入云数据库里面
    小程序云开发实战六:云数据库读取的数据显示在小程序端列表里
    小程序云开发实战七:云开发首页列表跳转详情页

    展开全文
  • 5小时零基础入门小程序云开发

    千人学习 2020-03-09 11:17:21
    本套课程带领大家零基础入门小程序云开发。 通过10小时的学习,你可以获得下面收获 1,学会小程序云开发 2,摆脱后台自己实现小程序后台 3,学会音视频小程序的开发 4,学会小程序...
  • 微信小程序云开发 初学者入门教程一(云开发环境搭建) 本教程适合刚刚入门的小白,云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速...

    微信小程序云开发 初学者入门教程一(云开发环境搭建)

    本教程适合刚刚入门的小白,云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html#%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98

    1:在桌面新建一个文件夹,命名为cloud

     

     

    2:填写小程序appid,选择建立云开发快速启动模板,点击确定按钮。

     

    3:完成之后,界面如下所示,默认好的项目目录和一系列的代码,可以仔细阅读和学习这些官方默认的文档

     

     

    4:点击云开发按钮,申请开通

     

     

    5:创建创建资源环境,填写环境名称,每个小程序帐号可免费创建两个环境。填写相关信息,环境名称

     

     

    6:成功开通之后进入;创建完成之后的界面。

     

     

    7:仔细看一下新建的云项目之后发现,新建项目中一个简单的获取用户openId的云函数示例

     

     

    8:在cloudfunctions路径下的login文件夹上点击右键,选择创建并部署

     

    9:在云开发控制台里,找到自己的环境ID,复制准备

     

     

    10:在miniprogram目录下的app.js配置环境ID

     

     

    示例代码:

    //app.js
    App({
      onLaunch: function () {
        
        if (!wx.cloud) {
          console.error('请使用 2.2.3 或以上的基础库以使用云能力')
        } else {
          wx.cloud.init({
            env: 'wang-t6e372',
            //我刚刚从云开发控制台里复制过来的自己的环境ID,
            traceUser: true,
          })
        }
    
        this.globalData = {}
      }
    })
    

    11:再次回到云开发控制台,依次点击云函数->login函数->右上角的测试按钮

     

     

    11:测试成功

     

     

    我们可以查看一下结果

    打开云开发控制台,切换到“用户管理”标签页,查看小程序的用户列表

     

     

    再来测试一下上传图片的功能
    在本地桌面选一张图片上传,然后打开云开发控制台,查看存储管理,里面多了一张图片的记录,也就是刚刚我上传的自己的图片

     

    微信小程序云开发 初学者入门教程二-前端操作数据库模块

    如何操作数据库,作为一名前端,如果对数据的知识不够熟悉也没关系,从现在开始好好学习就行,数据库的操作内容差不多涉及增删改查四大模块,花一些业余的时间在上面,也必有所得。

    数据库操作大多数需要用户openid,需要先配置好吧login云函数,如果已经配置好了,获取用户的openid之后,开始步骤:

    数据库操作API:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/database/index.html

    步骤

    1:打开云开发控制台,进入到数据库管理模块

     

    2:选择添加集合,集合名称为counters,添加完成之后的界面

     

    3:可以看到counters集合出现在左侧集合列表中

    注:集合必须在云开发控制台中创建

    4:新增一条记录试一试

    a. 打开pages/databaseGuide/databaseGuide.js文件,定位到 onAdd 方法

     

    b:选中所有注释过的代码,ctrl+/快捷键,解除注释

      onAdd: function () {
        const db = wx.cloud.database()
        db.collection('counters').add({
          data: {
            count: 1
          },
          success: res => {
            // 在返回结果中会包含新创建的记录的 _id
            this.setData({
              counterId: res._id,
              count: 1
            })
            wx.showToast({
              title: '新增记录成功',
            })
            console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
          },
          fail: err => {
            wx.showToast({
              icon: 'none',
              title: '新增记录失败'
            })
            console.error('[数据库] [新增记录] 失败:', err)
          }
        })
      },
    

    c. onAdd 方法会往 counters 集合新增一个记录,新增如下格式的一个 JSON 记录

    { "_id": "数据库自动生成记录 ID 字段",
     "_openid": "数据库自动插入记录创建者的 openid", "count": 1 }
    

    在桌面新建一个json文件,将这段代码复制黏贴进去,备用

     

    导入之后显示的界面

     

     

    d: 点击按钮:新增记录

     

     

    e:在云开发 -> 数据库 -> counters 集合中可以看到新增的记录

     

     

    微信小程序云开发数据库操作一添加记录实例演示

    官方文档解读:

    <!-- 新增记录 -->
      <view class="guide" wx:if="{{step === 3}}">
        <text class="headline">新增记录</text>
        <text class="p">1. 打开 pages/databaseGuide/databaseGuide.js 文件,定位到 onAdd 方法</text>
        <text class="p">2. 把注释掉的代码解除注释</text>
        <image class="code-image" src="../../images/code-db-onAdd.png" mode="aspectFit"></image>
        <text class="p">3. onAdd 方法会往 counters 集合新增一个记录,新增如下格式的一个 JSON 记录</text>
        <text class="code">
        {
          "_id": "数据库自动生成记录 ID 字段",
          "_openid": "数据库自动插入记录创建者的 openid",
          "count": 1
        }
        </text>
        <text class="p">4. 点击按钮</text>
        <button size="mini" type="default" bindtap="onAdd">新增记录</button>
        <text class="p" wx:if="{{counterId}}">新增的记录 _id 为:{{counterId}}</text>
        <text class="p">5. 在云开发 -> 数据库 -> counters 集合中可以看到新增的记录</text>
    
        <div class="nav">
          <button class="prev" size="mini" type="default" bindtap="prevStep">上一步</button>
          <button class="next" size="mini" type="default" bindtap="nextStep" wx:if="{{counterId}}">下一步</button>
        </div>
      </view>
    

    做一个小demo

    效果如下:点击新增记录的按钮的时候,会出现提示,新增的记录为多少,并且有弹框提示,新增记录成功。

     

     

    打开云开发控制台,点击数据库模块,可以看到刚刚添加的记录

     

    wxml代码:

    <button size="mini" type="default" bindtap="onAdd">新增记录</button>
    <text class="p" wx:if="{{counterId}}">新增的记录 _id 为:{{counterId}}</text>
    

    js代码:

    // pages/databaseGuide/databaseGuide.js
    
    const app = getApp()
    
    Page({
    
      data: {
        step: 1,
        counterId: '',
        openid: '',
        count: null,
        queryResult: '',
      },
    
      onLoad: function (options) {
        if (app.globalData.openid) {
          this.setData({
            openid: app.globalData.openid
          })
        }
      },
    
      onAdd: function () {
        const db = wx.cloud.database()
        db.collection('counters').add({
          data: {
            count: 1
          },
          success: res => {
            // 在返回结果中会包含新创建的记录的 _id
            this.setData({
              counterId: res._id,
              count: 1
            })
            wx.showToast({
              title: '新增记录成功',
            })
            console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
          },
          fail: err => {
            wx.showToast({
              icon: 'none',
              title: '新增记录失败'
            })
            console.error('[数据库] [新增记录] 失败:', err)
          }
        })
      },
    })
    

    对于数据库的增删改查
    后续会有更加细致的文章:
    1:微信小程序云开发数据库操作一添加记录
    2:微信小程序云开发数据库操作二查询记录
    3:微信小程序云开发数据库操作三删除记录
    4:微信小程序云开发数据库操作四更新记录

    下班之后带着电脑回家,在地铁上拥挤非常,感觉电脑都要被挤坏了,这几天反思了一下从前,每天上班下班,完成老板给的任务就可以潇洒走人了,总觉得自己不够努力,又或者每天重复着老旧的技术,周而复始,早已落后于前端发展的潮流,不觉开始惶恐。每天晚上开始学习,戒掉游戏和手机,让自己尽快达到一个沉迷于代码不可自拔的境界。

     

    小程序云开发三:创建第一个界面

     

    前面说到:微信小程序云开发 初学者入门教程一(云开发环境搭建)https://www.jianshu.com/p/5df4d51125e3,开通环境,部署环境之后,现在开始创建第一个界面。

    1:把小程序版本更新到最新,在桌面上创建一个文件夹,选择云开发模板,我们可以看到文件目录结构,默认的代码和架构。这些代码和目录结构不要删除,后面会用到

     

    默认的代码和目录如下:

     

    2:创建一个main文件夹

     

     

    3:修改app.json文件
    打开app.json文件,添加"pages/main/main",
    我这里放在第一行,方便打开就进入main界面。

     

    4:完成之后,运行,开始在main.wxml,main.js里面写页面代码
    wxml

    <view>
      <input style='margin-top: 40rpx;' placeholder="请输入姓名" value="{{name}}" bindinput="bindKeyInputName" />
      <input style='margin-top: 40rpx;' placeholder="请输入年龄" value="{{age}}" bindinput="bindKeyInputAge" />
      <button style='margin-top: 40rpx;' bindtap='insertData'>插入数据</button>
      <input style='margin-top: 40rpx;' placeholder="请输入记录ID" value="{{recordId}}" bindinput="bindKeyInputId" />
    
      <button style='margin-top: 40rpx;' bindtap='queryData'>查询数据</button>
    
      <text style='margin-top: 40rpx;'>
         姓名:{{nameResult}}
      </text>
      <text style='margin-top: 80rpx;'>
         年龄:{{ageResult}}
      </text>
    </view>
    

    wxss

    暂时没写
    

    js

    // miniprogram/pages/main/main.js
    const app = getApp()
    Page({
    
      /**
       * 页面的初始数据
       */
      db:undefined,
      test:undefined,
      data: {
        name:'',
        age:'',
        recordId:'',
        nameResult:'',
        ageResult:''    
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that = this
        //  调用login云函数获取openid
        wx.cloud.callFunction({
          name: 'login',
          data: {},
          success: res => {
            console.log('[云函数] [login] user openid: ', res.result.openid)
            app.globalData.openid = res.result.openid
            wx.cloud.init({ env: 'minicloud' })
            that.db = wx.cloud.database()
            that.test = that.db.collection('test')
          },
          fail: err => {
            console.error('[云函数] [login] 调用失败', err)
            wx.navigateTo({
              url: '../deployFunctions/deployFunctions',
            })
          }
        })
    
      },
      // 单击“插入数据”按钮调用该函数
      insertData:function() {
        var that = this
        try
        {
         //  将年龄转换为整数类型值
          var age = parseInt(that.data.age)
         //  如果输入的年龄不是数字,会显示错误对话框,并退出该函数
          if(isNaN(age))
          {
            //  显示错误对话框
            wx.showModal({
              title: '错误',
              content: '请输入正确的年龄',
              showCancel: false
            })
            return
          }  
          //  向test数据集添加记录
          this.test.add({
            // data 字段表示需新增的 JSON 数据
            data: {
              name: that.data.name,
              age:  age
            },
            //  数据插入成功,调用该函数
            success: function (res) {
              console.log(res)
              wx.showModal({
                title: '成功',
                content: '成功插入记录',
                showCancel:false
              })
              that.setData({
                name:'',
                age:''
              })
            }
          })
        }
        catch(e)
        {
          wx.showModal({
            title: '错误',
            content: e.message,
            showCancel: false
          })
    
        }
      },
     //  单击“查询数据”按钮执行该函数
      queryData:function() {
        var that = this
         //  根据记录ID搜索数据集  
        this.db.collection('test').doc(this.data.recordId).get({
          // 找到记录集调用
          success: function (res) {  
             //  将查询结果显示在页面上  
            that.setData({
              nameResult:res.data.name,
              ageResult:res.data.age
            })
    
          },
         //  未查到数据时调用
          fail:function(res) {
            wx.showModal({
              title: '错误',
              content: '没有找到记录',
              showCancel: false
            })
          }
        })
    
      },
     //  下面的函数用于当更新input组件中的值时同时更新对应变量的值
      bindKeyInputName: function (e) {
        this.setData({
          name: e.detail.value
        })
      },
      bindKeyInputAge:function(e) {
        this.setData({
          age: e.detail.value
        })
      },
      bindKeyInputId:function(e) {
        this.setData({
          recordId:e.detail.value
        })
      },
    
    })
    

    5:打开云开发控制台,添加一个test集合

     

    6:回到main的界面,填写姓名和年龄信息,点击插入数据,弹框显示插入数据成功

     

    7:再次查看云数据库

    在test里面我们可以看到刚刚插入的数据

     

    8:关于查询,根据id进行查询

     

    9:查询到我所得到的数据

     

     

     小程序云开发四:向云数据库插入一条数据

    上一篇的文章里,有提到像数据库里面插入一条数据,今天主要是把《小程序云开发:向云数据库插入一条数据》单独拉出来写个小的demo,方便记忆和理解。
    参考文档:
    https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/add.html

    1:方法在小程序的api里面说的很清楚,通过在集合对象上调用 add 方法往集合中插入一条记录,方法如下:

    db.collection('todos').add({
      // data 字段表示需新增的 JSON 数据
      data: {
        // _id: 'todo-identifiant-aleatoire', // 可选自定义 _id,在此处场景下用数据库自动分配的就可以了
        description: 'learn cloud database',
        due: new Date('2018-09-01'),
        tags: [
          'cloud',
          'database'
        ],
        // 为待办事项添加一个地理位置(113°E,23°N)
        location: new db.Geo.Point(113, 23),
        done: false
      },
      success(res) {
        // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id
        console.log(res)
      }
    })
    

    2:打开云开发控制台,添加一个todos集合,插入的数据会在这个集合里面显示。

     

    3:例子,在昨天的项目中接着main文件写

    main.wxml

    <view>
      <button  bindtap='insertData'>插入数据</button>
    </view>
    

    main.js

    const app = getApp()
    Page({
    
      data: {
      },
      onLoad: function (options) {
    
      },
      // 单击“插入数据”按钮调用该函数
      insertData: function () {
        const db = wx.cloud.database({});
        const cont = db.collection('todos');
    
        cont.add({
    
          data: {
            description: "向云数据库插入一条数据",
            due: new Date('2018-12-25'),
            tags: [
              "cloud",
              "database"
            ],
          },
          success: function (res) {
            console.log(res._id)
            wx.showModal({
              title: '成功',
              content: '成功插入记录',
              showCancel: false
            })
          }
        });
      },
    
    })
    

    4:打开界面,点击插入数据按钮,插入成功会出现提示弹框提示成功,插入的id也会在界面打印出来。

     

    5:打开云开发控制台,我们可以看见自己刚刚插入的数据

     

    6:那该如何从云数据库读取刚刚插入的这条数据,打印在前端界面?且看明天的博客。

    小程序云开发五:从云数据库读取数据

     

    1:接着昨天的《小程序云开发四:向云数据库插入一条数据》,今天要写的是读取那条插入的数据。

    参考的api,请点击:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html

    2:主要方法:点击请求数据按钮的时候向数据库请求,cont.doc("XCIGn8DR1TiNF-Pt").get里面要填写插入的数据的时候标记的id。

     //  单击“请求数据”按钮执行该函数
      queryData: function () {
        const db = wx.cloud.database({});
        const cont = db.collection('todos');
        cont.doc("XCIGn8DR1TiNF-Pt").get({
          success: function (res) {
            console.log(res.data)
          }
        }) 
      },
    

    3:效果如下

     

    4:demo的示例:
    main.wxml

    <view>
      <button  bindtap='insertData'>插入数据</button>
      <button  bindtap='queryData'>请求数据</button>
    </view>
    

    main.js

    
    const app = getApp()
    Page({
      data: {
      
      },
      onLoad: function (options) {
      
      },
      // 单击“插入数据”按钮调用该函数
      insertData: function () {
        const db = wx.cloud.database({});
        const cont = db.collection('todos');
    
        cont.add({
    
          data: {
            description: "向云数据库插入一条数据",
            due: new Date('2018-12-25'),
            tags: [
              "cloud",
              "database"
            ],
          },
          success: function (res) {
            console.log(res._id)
          }
        });
      },
      //  单击“请求数据”按钮执行该函数
      queryData: function () {
        const db = wx.cloud.database({});
        const cont = db.collection('todos');
        cont.doc("XCIGn8DR1TiNF-Pt").get({
          success: function (res) {
            console.log(res.data)
          }
        }) 
      },
    })
    

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见

    • 关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源200G(包括小程序全套开发)干货大全。

     

    展开全文
  • 虽然不会后台开发,但是也想自己做项目,正好云开发出现了。开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。 社区作为一个交流的平台,可以通过发布自己、别人喜欢的文字、图片的...

    原创:龙衣

    前言

    虽然不会后台开发,但是也想自己做项目,正好云开发出现了。开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。 社区作为一个交流的平台,可以通过发布自己、别人喜欢的文字、图片的方式进行交流分享。 刚学完云开发,正好可以用社区小程序项目练练手~

    【社区小程序】功能实现

    首页【广场】

    ●显示用户发布的内容
    ●管理员发布的一些教程
    复制代码

    消息【发布】

    ●发布图文
    ●水平图片的滑动显示
    复制代码

    个人中心【我的】

    ●显示用户的登录信息
    ●用户的收藏列表
    ●发布历史
    ●邀请好友
    ●产品意见
    复制代码

    一、首页【广场】

    • 显示用户发布的内容
    • 管理员发布的一些教程

    实现的效果

    实现要点

    1.WXML 不同类别数据的显示

    通过 if-elif-else 实现,在 wxml文件中通过 <block></block>渲染,因为它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。也就是说可以通过属性来控制页面是否要渲染这部分的内容,可以减少页面渲染时间。

    2.云开发数据的获取

    先开通云开发功能 ,参考官方文档,然后在创建项目的时候勾选上 使用云开发模板(看个人吧,我直接使用后点击项目中的 login)就可以获取到用户的 oppenid,之后就可以使用云数据库了。

    • 云开发登录:

    • 云数据的获取:
    /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
        console.log('onload');
        this.getData(this.data.page);    
      },
      /**
       * 获取列表数据
       * 
       */
      getData: function(page) {
        var that = this;
        console.log("page--->" + page);
        const db = wx.cloud.database();
        // 获取总数
        db.collection('topic').count({
          success: function(res) {
            that.data.totalCount = res.total;
          }
        })
        // 获取前十条
        try {
          db.collection('topic')
            .where({
              _openid: 'oSly***********vU1KwZE', // 填入当前用户 openid
            })
            .limit(that.data.pageSize) // 限制返回数量为 10 条
            .orderBy('date', 'desc')
            .get({
              success: function(res) {
                // res.data 是包含以上定义的两条记录的数组
                // console.log(res.data)
                that.data.topics = res.data;
                that.setData({
                  topics: that.data.topics,
                })
                wx.hideNavigationBarLoading();//隐藏加载
                wx.stopPullDownRefresh();
                
              },
              fail: function(event) {
                wx.hideNavigationBarLoading();//隐藏加载
                wx.stopPullDownRefresh();
              }
            })
        } catch (e) {
          wx.hideNavigationBarLoading();//隐藏加载
          wx.stopPullDownRefresh();
          console.error(e);
        }
      },
    复制代码
    • 云数据的添加:
    /**
       * 保存到发布集合中
       */
      saveDataToServer: function(event) {
        var that = this;
        const db = wx.cloud.database();
        const topic = db.collection('topic')
        db.collection('topic').add({
          // data 字段表示需新增的 JSON 数据
          data: {
            content: that.data.content,
            date: new Date(),
            images: that.data.images,
            user: that.data.user,
            isLike: that.data.isLike,
          },
          success: function(res) {
            // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id
            // 清空,然后重定向到首页
            console.log("success---->" + res)
            // 保存到发布历史
            that.saveToHistoryServer();
            // 清空数据
            that.data.content = "";
            that.data.images = [];
    
            that.setData({
              textContent: '',
              images: [],
            })
    
            that.showTipAndSwitchTab();
    
          },
          complete: function(res) {
            console.log("complete---->" + res)
          }
        })
      },
    复制代码

    3.数据列表的分页

    主要就是定义一个临时数组存放加载上来的数据,然后通过传递给对象,最后传递到布局中去。

    /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function() {
        var that = this;
        var temp = [];
        // 获取后面十条
        if(this.data.topics.length < this.data.totalCount){
          try {
            const db = wx.cloud.database();
            db.collection('topic')
              .skip(5)
              .limit(that.data.pageSize) // 限制返回数量为 5 条
              .orderBy('date', 'desc')	// 排序
              .get({
                success: function (res) {
                  // res.data 是包含以上定义的两条记录的数组
                  if (res.data.length > 0) {
                    for(var i=0; i < res.data.length; i++){
                      var tempTopic = res.data[i];
                      console.log(tempTopic);
                      temp.push(tempTopic);
                    }
    
                    var totalTopic = {};
                    totalTopic =  that.data.topics.concat(temp);
    
                    console.log(totalTopic);
                    that.setData({
                      topics: totalTopic,
                    })
                  } else {
                    wx.showToast({
                      title: '没有更多数据了',
                    })
                  }
    
    
                },
                fail: function (event) {
                  console.log("======" + event);
                }
              })
          } catch (e) {
            console.error(e);
          }
        }else{
          wx.showToast({
            title: '没有更多数据了',
          })
        }
        
      },
    复制代码

    二、消息【发布】

    • 发布图文
    • 水平图片的滑动显示(效果不是很好,可以改为九宫格实现)

    发布页面效果如下:

    分析如何实现

    • 导航栏的实现很简单就不说了,可参考我之前的文章
    • 重点是中间的 ② 是内容区域
    • 区域三是功能操作区

    内容区域的实现

    • 第一个是文本区域
    • 第二个是水平的图片展示区域

    在图片的右上角有关闭按钮,这里使用的是 icon组件。

    主要的实现代码如下:

    <view class="content">
      <form bindsubmit="formSubmit">
        <view class="text-content">
          <view class='text-area'>
            <textarea name="input-content" type="text" placeholder="说点什么吧~" placeholder-class="holder" value="{{textContent}}" bindblur='getTextAreaContent'></textarea>
          </view>
    
        </view>
        <scroll-view class="image-group" scroll-x="true">
          <block wx:for='{{images}}' wx:for-index='idx'>
          <view>
            <image src='{{images[idx]}}' mode='aspectFill' bindtap="previewImg"></image>
            <icon type='clear' bindtap='removeImg'  data-index="{{idx}}" ></icon>
          </view>
          </block>
          
        </scroll-view>
        <view class='btn-func'>
          <button class="btn-img" bindtap='chooseImage'>选择图片</button>
          <button class="btn" formType='submit'  open-type="getUserInfo">发布圈圈</button>
          <!-- <image hidden=''></image> -->
        </view>
      </form>
    
    </view>
    复制代码

    布局样式如下:

    .content {
      height: 100%;
      width: 100%;
    }
    
    textarea {
      width: 700rpx;
      padding: 25rpx 0;
    }
    
    .text-content {
      background-color: #f3efef;
      padding: 0 25rpx;
    }
    
    .image-group {
      display: flex;
      white-space: nowrap;
      margin-top: 30px;
    }
    
    .image-group view{
      display: inline-block;
      flex-direction: row;
      width: 375rpx;
      height: 375rpx;
      margin-right: 20rpx;
      margin-left: 20rpx;
      background-color: #cfcccc;
    }
    
    .image-group view image{
      width: 100%;
      height: 100%;
      align-items: center;
    }
    
    .image-group view icon{
      display: inline-block;
      vertical-align: top;
      position: absolute
    }
    .btn-func {
      display: flex;
      flex-direction: column;
      width: 100%;
      position: absolute;
      bottom: 0;
      margin: 0 auto;
      align-items: center;
    }
    
    .btn-img {
      width: 220px;
      height: 45px;
      line-height: 45px;
      margin-top: 20px;
      margin-bottom: 20px;
      background-color: rgb(113, 98, 250);
      color: #fff;
      border-radius: 50px;
    }
    
    .btn {
      width: 220px;
      height: 45px;
      line-height: 45px;
      background-color: #d50310;
      color: #fff;
      border-radius: 50px;
      margin-bottom: 20px;
    }
    复制代码

    页面布局之后就该从 js中去处理数据了,在 js中主要实现的功能有:

    • 文本内容的获取
    • 图片的选择
    • 图片的阅览
    • 图片的删除
    • 将结果发布到云数据库中

    1.文本内容的获取

     /**
       * 获取填写的内容
       */
      getTextAreaContent: function(event) {
        this.data.content = event.detail.value;
      },
    复制代码

    2.图片的选择

     /**
       * 选择图片
       */
      chooseImage: function(event) {
        var that = this;
        wx.chooseImage({
          count: 6,
          success: function(res) {
            // tempFilePath可以作为img标签的src属性显示图片
            const tempFilePaths = res.tempFilePaths
    
            for (var i in tempFilePaths) {
              that.data.images = that.data.images.concat(tempFilePaths[i])
            }
            // 设置图片
            that.setData({
              images: that.data.images,
            })
          },
        })
      },
    复制代码

    3.图片的预览

     // 预览图片
      previewImg: function(e) {
        //获取当前图片的下标
        var index = e.currentTarget.dataset.index;
    
        wx.previewImage({
          //当前显示图片
          current: this.data.images[index],
          //所有图片
          urls: this.data.images
        })
      },
    复制代码

    4.图片的删除

    /**
       * 删除图片
       */
      removeImg: function(event) {
        var position = event.currentTarget.dataset.index;
        this.data.images.splice(position, 1);
        // 渲染图片
        this.setData({
          images: this.data.images,
        })
      },
    复制代码

    5.发布内容到数据库中

    数据发布到数据中,需要先开启云开发,然后在数据库中创建集合也就是表之后就是调用数据库的增删改查API即可。

     /**
       * 添加到发布集合中
       */
      saveToHistoryServer: function(event) {
        var that = this;
        const db = wx.cloud.database();
        db.collection('history').add({
          // data 字段表示需新增的 JSON 数据
          data: {
            content: that.data.content,
            date: new Date(),
            images: that.data.images,
            user: that.data.user,
            isLike: that.data.isLike,
          },
          success: function(res) {
            // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id
            console.log(res)
          },
          fail: console.error
        })
      },
    复制代码

    三、个人中心【我的】

    • 【显示用户的登录信息】主要就是调用小程序接口,获取用户的微信公开信息进行展示
    • 【用户的收藏列表】获取数据库中的收藏列表进行展示
    • 【发布历史】在发布页面,当发布成功将数据存到发布历史表中,需要的时候获取该表的数据进行展示
    • 【邀请好友】调用小程序的分享接口,直接分享给微信群,或者个人
    • 【产品意见】一个类似于发布页的页面,实现思路和发布页实现是一样的。

    实现的效果

    实现分析

    1.要实现的效果

    • 在用户进入个人中心,直接弹出获取用户信息弹窗
    • 显示圆形的用户头像

    2.授权弹窗

    官方获取用户信息文档调整

    为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。正式版暂不受影响。

    也就是以前的 wx.getUserInfo不直接弹出授权窗口了,而且在新版中调用会直接返回fail,现在的做法呢就是通过点击一个button 去实现用户授权功能。

    文档中说明了有两种方式能够获取用户信息。

    • 一个是利用 <open-data>获取公开的用户信息:
    <open-data type="userNickName" lang="zh_CN"></open-data>
    <open-data type="userAvatarUrl"></open-data>
    <open-data type="userGender" lang="zh_CN"></open-data>
    复制代码
    • 另一个是利用button 组件将 open-type 指定为 getUserInfo类型:
      <!-- 需要使用 button 来授权登录 -->
      <button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
      <view wx:else>请升级微信版本</view>
    
    Page({
      data: {
        canIUse: wx.canIUse('button.open-type.getUserInfo')
      },
      onLoad: function() {
        // 查看是否授权
        wx.getSetting({
          success (res){
            if (res.authSetting['scope.userInfo']) {
              // 已经授权,可以直接调用 getUserInfo 获取头像昵称
              wx.getUserInfo({
                success: function(res) {
                  console.log(res.userInfo)
                }
              })
            }
          }
        })
      },
      bindGetUserInfo (e) {
      // 获取到用户信息
        console.log(e.detail.userInfo)
      }
    })
    复制代码

    3.中实现圆形头像

    <view class='amountBg'>
      <view class='img'>
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <view class='account'>
        <view class='nick-name'>
          <open-data type="userNickName" lang="zh_CN"></open-data>
        </view>
        <view class='address'>
          <open-data type="userCountry" lang="zh_CN"></open-data>·
          <open-data type="userProvince" lang="zh_CN"></open-data>·
          <open-data type="userCity" lang="zh_CN"></open-data>
        </view>
      </view>
    </view>
    复制代码

    css 样式如下:

    .amountBg {
      display: flex;
      flex-direction: row;
      height: 100px;
      background-color: #5495e6;
      align-items: center;
    }
    
    .img {
      overflow: hidden;
      display: block;
      margin-left: 20px;
      width: 49px;
      height: 49px;
      border-radius: 50%;
    }
    
    .account {
      width: 70%;
      color: #fff;
      margin-left: 10px;
      align-items: center;
    }
    
    .nick-name{
      font-family: 'Mcrosoft Yahei';
      font-size: 16px;
    }
    
    .address{
      font-size: 13px;
    }
    .nav {
      width: 15px;
      color: #fff;
    }
    复制代码

    可能存在的一些问题

    • 其他用户发布的内容,有时候显示不出来? 将数据库的权限设置为全部人可见。
    • 发布内容之后返回首页没有自动刷新? 在广场首页 onShow 的时候获取数据库的数据进行展示。
    • clone 源码后运行不起来? 需要在自己的云数据库中创建对应的表。

    转载于:https://juejin.im/post/5ca1720ff265da30717fc953

    展开全文
  • 云开发步骤

    2019-06-12 13:08:15
    为什么80%的码农都做不了架构师?>>> ...
  • 小程序云开发之用户注册登录(带云数据库配置)

    万次阅读 多人点赞 2019-02-18 22:25:37
    注册界面和文件 登录界面和文件 这里的UI使用iviewUI 不懂可以看我的另一篇文章IviewUI 先说注册界面 json如下 wxml如下 &lt;!--pages/register/index.wxml--&gt; &... autof...
  • 云开发

    千次阅读 2019-06-09 13:31:54
    云开发模型云用开发华为云解决方案 云用开发 云这两年是一个火爆的技术,那么如何开发云产品。从技术角度上讲,技术没有很大的革新,只是开拓了应用方式,因此要介入云产品开发,了解云的构建模式和一定的开发模型...
  • 云开发是一个已经存在了很多年的概念,但在过去未能真正成为主流。然而,由于云和软件即服务的宏观趋势的结合,以及技术的进步,如容器技术 Docker 和 Kubernetes,云开发现在有机...
  • 微信小程序云开发-新手环境配置

    万次阅读 2018-10-08 21:04:59
    首先我们新建小程序项目,填写申请的appID如果没有需要注册一个,微信为我们提供了一个云开发快速启动的模板,这里我们勾选进去看看云开发为我们提供的案例。     首次进入控制台会报cloud init error (云...
  • 微信小程序云开发之初体验(详细教程)

    万次阅读 多人点赞 2019-03-15 08:45:24
    微信小程序云开发之初体验 小程序云开发是微信最近推出的新的一项能力,它弱化了后端以及运维的概念,开发者无需搭建服务器,使用微信平台提供的api即可完成核心的业务开发。 目前提供三大基础能力支持: 云函数:...
  • 借助小程序云开发获取小程序用户openid

    万次阅读 多人点赞 2019-06-11 16:22:33
    我们之前获取用户的openid,如下图官方文档说明,是通过该wx.login先获取临时凭证,然后再用临时凭证去换取用户的openid,这样做无可厚非,但是小程序出了云开发之后,再用这种方法获取用户openid就显得有些麻烦了,...
  • 小程序云开发demo详解

    万次阅读 2018-09-27 09:18:15
    1、新建小程序——选择建立云开发快速启动模板 2、多了云开发按钮   3、随便命名: 用户管理、数据库、存储管理、云函数。用上面第二步中的用demo对应解释。 4、用户管理: 获取到的用户信息会存储到...
  • 【系】微信小程序云开发实战坚果商城-目录

    万次阅读 多人点赞 2020-04-10 09:04:01
    【系】微信小程序云开发实战坚果商城 目录 开篇 【系】微信小程序云开发实战坚果商城-开篇 基础篇 【系】微信小程序云开发实战坚果商城-弹性盒子 【系】微信小程序云开发实战坚果商城-ES6 简单入门 【系】...
  • 小程序云开发(一)微信登录实现

    万次阅读 2019-05-17 15:30:41
    云开发下微信登录流程 云开发登录实现 1)miniprogram文件夹下app.js设置env和traceUser:true,跟踪用户信息 wx.cloud.init({ env: 'my-zh8la',//环境ID traceUser: true, }) 2)获取用户信息: exports.main...
  • 【网易课堂2019】微专业 – Java高级开发工程师(完整版)
  • 如题,我感觉应该很简单,但是没找到方法,希望有了解的大佬可以指点一下
  • 小程序 · 云开发快速入门与实战

    万次阅读 2018-08-27 17:36:01
    日前,微信公众平台小程序开发平台开放了一个全新的功能:云开发。 自从2018年1月 “跳一跳”等小游戏在大量微信用户中开始传播,小程序日活用户大幅增长到 2.8 亿,占用内存小以及下拉入口的便捷性也让小程序备受...
  • 微信小程序云开发使用方法新手初体验

    万次阅读 多人点赞 2018-10-08 10:16:41
    开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力,6的一匹。 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可...
1 2 3 4 5 ... 20
收藏数 386,933
精华内容 154,773
关键字:

云开发