云开发_云计算开发和云平台开发 - CSDN
  • 微信小程序开发实战入门,学习小程序云开发,摆脱后台,自己实现后台数据,从此就可以愉快的写小程序,自己实现小程序后台了。
  • 本套课程带领大家零基础入门小程序云开发。 通过10小时的学习,你可以获得下面收获 1,学会小程序云开发 2,摆脱后台自己实现小程序后台 3,学会音视频小程序的开发 4,学会小程序...
  • 我知道这篇文章你可能读不懂,但是它值得你去分享,未来就在那。如你所见,在过去的几年里,发生了快速的变化(这句话,我已经说烂了)。好比如说:编程门槛的降低。大量的低编程能力水平可以进入这个...

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

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

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

    • 基础设施的完善。只需要执行 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数据存入云数据库里面
    小程序云开发实战六:云数据库读取的数据显示在小程序端列表里
    小程序云开发实战七:云开发首页列表跳转详情页

    展开全文
  • 本课程使用腾讯目前最为推荐的云开发技术,通过学习本课程,学员可快速掌握Node.js云函数的开发和部署、Mongodb云数据库的设计和操作以及云存储中文件的上传和管理,从未具备快速迭代产品的能力,不论是在面试中...
  • 虽然不会后台开发,但是也想自己做项目,正好云开发出现了。开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。 社区作为一个交流的平台,可以通过发布自己、别人喜欢的文字、图片的...

    原创:龙衣

    前言

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

    【社区小程序】功能实现

    首页【广场】

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

    消息【发布】

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

    个人中心【我的】

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

    一、首页【广场】

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

    实现的效果

    实现要点

    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%的码农都做不了架构师?>>> ...

    1、在app.js确认读取用户列表

    //app.js
    App({
      onLaunch: function() {
    
        if (!wx.cloud) {
          console.error('请使用 2.2.3 或以上的基础库以使用云能力')
        } else {
          //在用户管理中会显示使用云能力的小程序的访问用户列表,默认以访问时间倒叙排列,访问时间的触发点是在小程序端调用 wx.cloud.init 方法,且其中的 traceUser 参数传值为 true。
          wx.cloud.init({
            traceUser: true,
          })
        }
    
        this.globalData = {}
      },
    
    })

    2、在小程序端开始使用云能力前,需先调用 wx.cloud.init 方法完成云能力初始化

    这个当你新建云开发的时候,会自动生成的呢。

    转载于:https://my.oschina.net/TAOH/blog/3011493

    展开全文
  • 小程序云开发

    2019-07-05 15:37:20
    云开发的认识 什么是云开发 云开发和传统模式的区别 三大基本功能的支持认识 开通云开发二.云数据库 云数据库认识 类型支持 控制云数据库权限 控制云数据库的方式 云数据库管理管理 ...

    一. 云开发的认识

      1. 什么是云开发
      2. 云开发和传统模式的区别
      3. 三大基本功能的支持认识
      4. 开通云开发二.云数据库
      1. 云数据库认识
      2. 类型支持
      3. 控制云数据库权限
        1. 控制云数据库的方式
        2. 云数据库管理管理
        3. 云开发初始数据的代码三.云数据库测试
      1. 测试准备工作
        1. 运行时进入相应页面
        2. 在云数据库中创建一个集合
      2. 添加功能
        1. 准备一个添加按钮
        2. 初始数据库与操作
        3. 点击按钮查看结果
        4. 监听添加的结果
      3. 修改功能
        1. 准备按钮
        2. 实现方法
      4. 查询功能
        1. 准备按钮
        2. 查询数据
        3. 查询需知
      5. 删除员工
        1. 准备按钮
        2. 删除代码四.云函数
      1. 云函数的认识
        1. 什么是云函数
        2. 安装node.js
        3. 云函数的位置
      1. 云函数的使用
        1. 完成index.js中的函数
        2. 上传云函数
        1. 调用云函数
      1. 获取openid
        1. 小程序已有login函数
        2. 准备代码
      2. 云函数操作数据库
        1. 准备云函数
        2. 准备按钮
        3. 调用方法
        4. 最终效果五 云存储
      1. 完成图片的上传
        1. 准备按钮
        2. 准备选择图片的功能
        3. 准备上传的功能
        4. 查看云控制台
      2. 保存文件id到云数据库中
        1. 云数据库加一个集合
        2. 把数据保存到云集合中
      3. 获取图片并展示
        1. 获取图片路径

    5.3.1 准备显示组件

      1. 下载图片
        1. 下载图片的按钮
        2. 下载方法实现

    一. 云开发的认识

     

      1. 什么是云开发

    开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。

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

    云开发提供了几大基础能力支持:

     

    能力

    作用

    说明

    云函数

    无需自建服务器

    在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码

    数据库

    无需自建数据库

    一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库

    存储

    无需自建存储和 CDN

    在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理

    云调用

    原生微信服务集成

    基于云函数免鉴权使用小程序开放接口的能力,包括服务端调用、获取开放数据等能力

     

    1. 2云开发和传统模式的区别

     

     

    #

    传统模式

    云开发

    开发效率

    开发成本

    #

    传统模式

    云开发

    Serverless

    不支持

    支持

     

    总之,云开发可以让我们把更多关注度放到业务中来,对于小应用实在是太合适了。但是如果是开发大型的项目的话,现在传统开发的优势还是无法替代的!

    1. 3三大基本功能的支持认识

     

     

    名称

    功能

    云函数

    获取用户信息等,获取appid,openid,生成分享图,调用腾讯云SDK,操作数据库等...

    云数据库

    noSql数据库,完成数据CRUD

    云储存

    文件上传,下载(控制台可视化操作)

    1. 4开通云开发

     

    二.云数据库

    2.1云数据库认识

    开发提供了一个JSON数据库,有2GB免费存储空间

    要查询复杂的关系的话(关系型数据库更好),频繁的操作的话(文档型数据库更合适)

     

    关系型数据库

    文档型数据库

    表:table

    集合:collection

    行:row

    记录:record/doc

    列:column

    字段:field

     

    2.2类型支持

    String:字符串

    Number:数字

    Object:对象

    Array:数组

    Bool:布尔值

    GeoPoint:地理位置点(比较特殊,需要经纬度)

    Date:时间(使用的是客户端的时间)

    Null:空值

     

    2.3 控制云数据库权限

     

    2.3.1 控制云数据库的方式

    小程序控制(读写数据库受权限控制的限制) 云函数控制(拥有所有读写数据库的权限) 控制台控制(拥有所有读写数据库的权限)

    2.3.2 云数据库管理管理

    仅创建者可写,所有人可读仅创建者可读写

    仅管理端可写

    权管理端可读写

    2.3.3云开发初始数据的代码

    初始化:

    const db = wx.cloud.database();

    切换环境:

    const myDB = wx.cloud.database({env:'text'});

    三.云数据库测试

     

    3.1测试准备工作

    3.1.1运行时进入相应页面

    运行时直接进入我的测试页面(即我的云开发页面)

    3.1.2在云数据库中创建一个集合

    3.2添加功能

    3.2.1准备一个添加按钮

    <button bindtap="insertEmp" type="primary">添加员工</button>

    3.2.2初始数据库与操作

     

     

    //初始化咱们的数据库(后面就可以使用db这个常量来代表咱们的云数据库) const db = wx.cloud.database();
    
    Page({
    
        /**
        * 页面的初始数据
        */ data: {
    
        },
            //添加一条数据
            insertEmp(){
                //数据库中拿到employee集合并且进行数据添加
                db.collection("employee").add({
                    data:{
                        name:"杀死给", 
                        age:23
                }
            })
        },
        ...
    }
    

    3.2.3点击按钮查看结果

    3.2.4监听添加的结果

    使用回调的方式拿到成功与失败的结果

     

     

    //添加一条数据
    insertEmp(){
        //数据库中拿到employee集合并且进行数据添加
        db.collection("employee").add({
        data:{
            name:"杀死给", 
            age:23
        },
        //操作成功后的回调方法
        //成功返回添加的结果success(res){
        console.log(res);
        },
        //操作失败后的回调方法
        // 失败返回错误的编码
        fail(errorcode){ console.error(errorcode);
        }
    })
    },

     

    用Promise风格拿到成功失败的结果

    insertEmp() {
        //数据库中拿到employee集合并且进行数据添加
        db.collection("employee").add({
            data: {
                name: "杀死给", age: 23
            }
        }).then(res =>{
            //成功后执行
            console.log(res);
        }).catch(err=>{
            //失败后执行
            console.error(err);
        })
    }

    3.3修改功能

    3.3.1准备按钮

    <button bindtap="updateEmp" type="primary">修改员工</button>

     

     

    3.3.2实现方法

    //修改员工
    updateEmp(){
        //doc 中 写 的 是 需 要 修 改 的 数 据 的 id
             db.collection("employee").doc("3b07eb945d058a250228ef8315115a0d").update({
            data:{
                name:"阿里多", age:26
            }
            }).then(res=>{ console.log(res);
            })
            .catch(err=>{ console.error(err);
        })
    },
    

    3.4查询功能

    3.4.1准备按钮

    <button bindtap="findEmp" type="primary">查询员工</button>

    3.4.2查询数据

     

     

     

    findEmp(){
    //where里面添加的查询条件
    db.collection("employee").where({_id:"3b07eb945d0585a50226de3b4c3a7430"
    }).get().then(res=>{
        console.log(res);
    }).catch(err=>{
        console.error(err);
    })
    }
    
        1. 查询需知

    查询的时候只能查询到有openid的数据,如果是自己添加的数据查询需要修改相应的权限

     

       

     

     

     

     

     

     

     


     

     

     

    ​​​​​​​3.5删除员工

    删除所有的话需要使用云函数

    3.5.1删除按钮

    <button bindtap="deleteEmp" type="primary">删除员工</button>

    3.5.2删除代码

    //删除员工deleteEmp(){
    db.collection("employee").doc("3b07eb945d0585a50226de3b4c3a7430")
    .remove()
    .then(res=>{console.log(res)})
    .catch(err=>{console.error(err)})
    }
    

    四.云函数

    ​​​​​​​4.1云函数的认识

    ​​​​​​​4.1.1什么是云函数

    云函数即在云端(服务器端)运行的函数。在物理设计上,一个云函数可由多个文件组成,占用一定量的 CPU 内存等计算资源;各云函数完全独立;可分别部署在不同的地区。开发者无需购买、搭建服务器,只需编写函数代码并部署到云端即可在小程序端调用,同时云函数之间也可互相调用。

    ​​​​​​​4.4.2安装node.js

    云函数需要node的支持(需要安装node.js)

    下载node安装包(至少是node v8.0以上的版本
    安装后在 控制台/终端 输入node-v 与 npm -v有效果代表安装成功

    ​​​​​​​4.1.13云函数的位置

    本地的位置

    云端的位置

     

    4.1.3 创建云函数

    创建云函数

     

       

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    自动上传云函数

    云开发位置查看云函数

    云函数结构

    package.json:一些模块与配置信息

    index.js 云函数的入口文件

     

    其它注意点

    早期:wx-server-sdk错误,点击安装即可

    调用时提示未安装

    云函数右键,终端中打开输入

    npm install ‐‐save wx‐server‐sdk@latest

    ​​​​​​​4.2云函数的使用

    ​​​​​​​4.2.1完成index.js中的函数​​​​​​​

    
    // 云函数入口文件
    //这里拿到云端信息,我们现在暂时用不到,可以把它进行注释或者删除
    // const cloud = require('wx‐server‐sdk')
    // cloud.init()
    
    // 云函数入口函数
    /**
    * event:小程序端调用这个方法传过来的相应的参数
    * context:上下文环境,也包括当前登录用户的一些信息
    */
    exports.main = async (event, context) => {
        //返回一个对象,对象中包括咱们求和的函数
        return {
            sum:event.num1 + event.num2
        }
    }
    

    4.2.2上传云函数

     

    每次修改完成后,都需要进行上传部署右键云函数,选择上传并部署

    上传并部署:云端安装依赖(不上传node modules) -> 云端安装环境

    上传并部署:所有文件 -> 把环境传上去可以在云控制台中进行云函数的功能测试

    4.2.3调用云函数

     

    准备按钮

    <view>云函数</view>
    <button bindtap="sum" type="primary">调用云函数</button>
    

    准备函数

    sum(){
        wx.cloud.callFunction({ 
            name:"sum",
            data:{
                num1:4, num2:8
            }
        })
        .then(res => {console.log(res)})
        .catch(err=>{console.error(err)})
    }

    调用结果查看

    查看函数调用状态

    4.3获取openid

    取openid对以后的登录功能是非常有用的

    我们不需要像传统方式那样再通过code去后台拿对应的id

    ​​​​​​​4.3.1小程序已有login函数

    咱们依然需要先把login函数上传

    ​​​​​​​4.3.2准备代码

    按钮准备

    <button bindtap="getOpenId" type="primary">获取openId</button>

    功能代码完成

    getOpenId(){ wx.cloud.callFunction({
        name: "login"
        }).then(res => { console.log(res) })
        .catch(err => { console.error(err) })
    }
    

    结果查看

    4.4云函数操作数据库

    咱们可以通过云函数批量删除数据库信息

    ​​​​​​​4.4.1准备云函数

    不要忘了完成后上传

    // 云函数入口文件
    const cloud = require('wx‐server‐sdk') cloud.init()
    
    // 云函数入口函数
    exports.main = async (event, context) => 
        { const wxContext = cloud.getWXContext(); const db = cloud.database();
        //此处把年纪大于20的都删除掉
        // await只能在async函数中,代表完成后再返回
        try{
            return await db.collection("employee").where({ name:"阿里
        }).remove();
        }catch(e){
            console.error(e);
        }
    }

    4.4.2​​​​​​​准备按钮

     

    <button bindtap="batchDelete" type="primary">批量删除</button>

    4.2.3调用方法

    batchDelete(){ wx.cloud.callFunction({
        name:"deleteData"
        }).then(res => {
            console.log(res)
        })
        .catch(err => {
            console.error(err)
        })
    }
    

    4.4.4最终结果

    五、云存储

    咱们云存储主要是完成文件的上传下载等操作

    图片可以从相册中获取,也可以直接拍照

    ​​​​​​​5.1完成图片的上传

    5.1.1准备按钮

    <button bindtap="uploadImg" type="primary">上传图片</button>

     

    5.1.2准备选择图片的功能

     

    在相应的页面js中拿到图片

    文档 -> api -> 媒体 -> 图片(chooseImage)

    uploadImg(){
        //选择一张图片
        wx.chooseImage({
        //可以选择几张图片(最多9张,多张的话涉及到异步的问题)
        count: 1,
        //sizeType:确定是以源文件的形式还是压缩文件形式上传
        sizeType: ['original', 'compressed'],
        //sourceType:图片来源,是本地图库还是从相机会获取
        sourceType: ['album', 'camera'],
        success(res) {
            // tempFilePath可以作为img标签的src属性显示图片
            // 这个是成功后图片的临时路径(后面上传到云存储就需要用到) 
            const tempFilePaths =res.tempFilePaths
            console.log(tempFilePaths);
            }
        })
    }
    

    5.1.3准备上传的功能

     

    文档 -> 云开发 -> 存储(uploadFile)

    uploadImg(){
        //选择一张图片
        wx.chooseImage({
            //可以选择几张图片(最多9张,多张的话涉及到异步的问题)
            count: 1,
            //sizeType:确定是以源文件的形式还是压缩文件形式上传
            sizeType: ['original', 'compressed'],
            //sourceType:图片来源,是本地图库还是从相机会获取
            sourceType: ['album', 'camera'],
            success(res) {
                // 这个是成功后图片的临时路径(后面上传到云存储就需要用到)
                const tempFilePaths =res.tempFilePaths
                console.log(tempFilePaths);
                //上传到云存储的功能
                wx.cloud.uploadFile({
                    //存放的云存储路径(一样的路径会覆盖)
                    cloudPath: 'example.png',
                    //特别注意:获取的临时路径是个数组
                    filePath: tempFilePaths[0], // 文件路径
                }).then(res => {
                    // 得到文件的id值(下一步我们把这个id存在数据库,方便以后获取) 
                    console.log(res.fileID)
                }).catch(error => {
                    console.error(error);
            }
        })
    }

    ​​​​​​​5.1.4查看云控制台

    5.2保存文件id到云数据库中

    ​​​​​​​5.2.1云数据库加一个集合

    5.2.2​​​​​​​​​​​​​​把数据保存到云集合中

    下面是整个上传文件的完整代码

    uploadImg(){
    //选择一张图片wx.chooseImage({
    //可以选择几张图片(最多9张,多张的话涉及到异步的问题) count: 1,
    //sizeType:确定是以源文件的形式还是压缩文件形式上传sizeType: ['original', 'compressed'],
    //sourceType:图片来源,是本地图库还是从相机会获取sourceType: ['album', 'camera'],
    success(res) {
    // tempFilePath可以作为img标签的src属性显示图片
    // 这个是成功后图片的临时路径(后面上传到云存储就需要用到) const tempFilePaths = res.tempFilePaths console.log(tempFilePaths);
    //上传到云存储的功能wx.cloud.uploadFile({
    //存放的云存储路径(使用时间缀,以免传上去的文件产生覆盖)) cloudPath: new Date().getTime()+'.png',
    //特别注意:获取的临时路径是个数组filePath: tempFilePaths[0], // 文件路径
    }).then(res => {
    // 得到文件的id值
    console.log(res.fileID)
    //把文件的fileID保存到云数据库中db.collection("images").add({
    data:{
    fileID:res.fileID
    }
    }).then(res=>{ console.log(res);
    }).catch(err=>{ console.error(err);
    })
    }).catch(error => { console.error(error);
    })
    }
    })
    }
    

    5.3获取图片并展示

    5.3.1获取图片路径

    //初始化咱们的数据库(后面就可以使用db这个常量来代表咱们的云数据库) const db = wx.cloud.database();
    Page({
    
    /**
    * 页面的初始数据
    */ data: {
    imagesPath:[]
    },
    ...
    //显示相应的图片showImg:function(){
    //1.拿到当前登录用户的openid wx.cloud.callFunction({
    //执行去函数login方法name:"login"
    }).then(res=>{
    //拿到对应的openid属性
    var openid = res.result.openid;
    //2.根据openid拿到对应的图片db.collection("images").where({
    _openid: openid
    }).get().then(res2=>{
    //查看所有的结果console.log(res2);
    //把结果交给全局的imagesPath数据this.setData({
    imagesPath:res2.data
    })
    })
    })
    },
    //...
    })
    

    5.3.1 准备显示组件

    <button bindtap='showImg' type='primary'>显示图片</button>
    <!‐‐ block相当于咱们的div,但是它只模板,不会直接展示出来 ‐‐>
    <block wx:for="{{imagesPath}}" wx:key="{{index}}">
    <image src='{{item.fileID}}'></image>
    </block>
    

    5.4下载图片

    ​​​​​​​5.4.1下载图片的按钮

    <button bindtap='showImg' type='primary'>显示图片</button>
    <!‐‐ block相当于咱们的div,但是它只模板,不会直接展示出来 ‐‐>
    <block wx:for="{{imagesPath}}" wx:key="{{index}}">
    <image src='{{item.fileID}}'></image>
    <button bindtap='downloadImg' data‐fileid="{{item.fileID}}">下载图片</button>
    </block>
    

    5.4.2下载方法实现

     

    云开发 -> 小程序端API文档 -> 存储 -> downloadFile API -> 媒体 -> 图片 - > saveImageToPhotosAlbum API -> 界面 -> 交互

     


     

    //下载图片的功能
    downloadImg:function(event){
        //从云存储中拿到图片
        var fileid = event.target.dataset.fileid;
        //下载功能
        wx.cloud.downloadFile({
            fileID: fileid
        }).then(res => {
            //这里可以拿到临时文件路径
            wx.saveImageToPhotosAlbum({
                //准备图片的路径
                filePath: res.tempFilePath,
                success(res) {
                    //成功后弹出相应的效果
                    wx.showToast({
                        title: '成功',
                        icon: 'success',
                        duration: 2000
                    })
                }
            })
        })
    }
    

     

    展开全文
  • 云开发

    2019-06-09 13:31:54
    云开发模型云用开发华为云解决方案 云用开发 云这两年是一个火爆的技术,那么如何开发云产品。从技术角度上讲,技术没有很大的革新,只是开拓了应用方式,因此要介入云产品开发,了解云的构建模式和一定的开发模型...
  • 云服务搭建搭建 JAVA Web 环境
  • 云开发平台,是阿里云面向广大开发者提供的云上研发工作平台,助力研发团队实现工作的在线化(团队在线、环境在线、代码在线、协同在线)以及研发模式Serverless化,帮助研发团队实现对行业架构经验及架构服务的高效...
  • 开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速...
  • 【系】微信小程序云开发实战坚果商城 目录 开篇 【系】微信小程序云开发实战坚果商城-开篇 基础篇 【系】微信小程序云开发实战坚果商城-弹性盒子 【系】微信小程序云开发实战坚果商城-ES6 简单入门 【系】...
  • 首先我们新建小程序项目,填写申请的appID如果没有需要注册一个,微信为我们提供了一个云开发快速启动的模板,这里我们勾选进去看看云开发为我们提供的案例。     首次进入控制台会报cloud init error (云...
  • 微信小程序云开发之初体验 小程序云开发是微信最近推出的新的一项能力,它弱化了后端以及运维的概念,开发者无需搭建服务器,使用微信平台提供的api即可完成核心的业务开发。 目前提供三大基础能力支持: 云函数:...
  • 开通云开发 创建了第一个云开发小程序后,在使用云开发能力之前需要先开通云开发。在开发者工具工具栏左侧,点击 “云开发” 按钮即可开通云开发云开发开通后自动获得一套云开发环境,各个环境相互隔离,每个环境...
  • 上一章:《微信小游戏:云开发(二)默认云开发模板运行问题》 创建了一个小游戏交流群,加群或者有问题交流可以加我微信 备注“微信小游戏” 前言 Cocos Creator现阶段尚不支持微信云开发,但是对于个人开发者而言...
  • 开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力,6的一匹。 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可...
  • 第 3-2 课:云开发开篇 1 初识云开发 云开发是微信团队和腾讯云团队共同研发的一套小程序基础能力,简言之就是:云能力将会成为小程序的基础能力。 小程序云开发目前提供三大基础能力支持: 云函数:在云端运行的...
  • 云开发 quickstart 这是云开发的快速启动指引,其中演示了如何上手使用云开发的三大基础能力: 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 文档型数据库 文件存储:在小程序前端直接上传/下载...
1 2 3 4 5 ... 20
收藏数 378,236
精华内容 151,294
关键字:

云开发