基于云开发的微信小程序实战教程(一)

发布时间:2024-01-29 19:16:25 来源:ub8登录1.0 作者:ub8登录1.0 ub8登录1.0

  PS: 实战篇已开启~手把手带你体验小程序开发+上线全流程体验,文章内容戳

  最近刚开发了款小程序,在开发过程中发现,基于云开发的教程资源不是很多,而且很不详细。所以边实战边总结了下云开发的简单教程,希望对你有所帮助。

  微信小程序是个啥,就不多说了,大多数人应该都知道。如果不知道,看下面这个图也就明白什么是小程序了。

  因为有了微信小程序,我们大家可以不用下载 app,就能够访问同程、携程、腾讯会议、青桔单车、拼多多等,这些都属于企业的小程序。

  小程序其实就等于我们平常访问的网站或 app,只不过区别是它必须在微信中打开。所以其实小程序的开发和其他网站的开发原理是一样的,不仅仅需要一个前端页面的样式展示,还需要有服务器来存放用户个人信息、商品信息等数据。

  而小程序必须基于微信打开这一特点,同样也给我们开发小程序带来了很多便利,因为我们大家可以直接用微信给提供的一些方法,很容易的实现上传图片、微信支付、打开相机等功能。

  刚刚提到,一个完整的网站肯定是需要有交互的,最基础的比如用户的登录、注册,我们肯定需要把用户的信息存到某个地方,这样才可以去拿用户的输入和你存下来的信息做匹配,看用户名和密码是不是正确的,再告诉用户登录成功或失败。

  这个存储用户个人信息的地方就是服务器,正常的网站搭建是要求我们自己购买服务器、搭建环境等一系列流程,对于后端开发者而言,这些环境配置、数据库开发等也许很简单,但是没接触过后端语言的人想要完成一个完整的网站,就有一定的难度。

  如果要搭建个人网站,对服务器使用感兴趣的,可以借鉴知乎这篇文章:如何免费从 0 用服务器 配置和搭建个人网站?

  而微信小程序的云开发则免费给我们的小程序提供了一个云服务器环境,直接就可以用,对前端开发者以及未接触过开发行业的人而言,就非常容易上手完成自己的小程序了。

  我们需要去「微信公众平台」注册一个小程序账号,一个账号对应一个小程序。注册完成之后,我们就可以在微信公众平台登录,进入自己的小程序配置后台,可以在这里修改自己小程序的名字,头像,简介等信息,还能够正常的看到自己小程序的编号 AppID 和 小程序的密钥 AppSecret,后面创建小程序项目的时候,会用到这两个值。

  有了这两个值,微信就能区分出来哪个小程序是你的小程序了。因我们开发完之后要把代码提交给微信,然后他们审核觉得没有违规的地方,审核通过后,你做的小程序就能上线了,上线后大家就可以访问你的小程序了。

  完成信息填写后,点击提交,就会弹出来个框,提示你注册成功,点击跳转到小程序。

  这个就是小程序的后台,以后能通过「微信公众平台」,通过你刚刚绑定的微信或邮箱进行登录。

  在这个管理后台中,你可以完善和修改你的小程序的头像、简介和名称。补全完整信息后,我们就能够直接进行开发了。

  这里以个人开发举例,默认只能管理员,也就是你自己一个人进行开发,若需要和其他人一块开发,就要点击上图中的「添加开发者」把其他开发人的微信录入进来。

  点击上图中的「普通小程序开发者工具」,下载「微信开发者工具」,后续我们开发和预览小程序都是要使用到这个编辑器的。

  运行微信开发者工具后,会出现如下界面,用你刚才注册小程序的微信,扫码完成登录。

  选择新建小程序,项目名称和储存目录能自己修改,也可以用它默认的项目名称和储存位置。必须要格外注意的是,后端服务这一项选择「小程序·云开发」

  修改完项目名和存储位置后,我们还需要把刚刚注册的小程序编号,AppID 填写上去,这样子创建的项目就能和我们的小程序关联起来了。

  AppID 可以去微信开放平台,登录我们刚注册的小程序的后台,左侧导航最下面的「设置」页,滑到页面最底部,查看账号信息,找到我们的小程序编号,如下图。

  信息输入完成后,点击新建,会自动构建一个基于云开发的小程序项目的官方例子。

  点击新建完成后,微信开发者工具的编辑器会出现上方的界面,左侧是我们的小程序页面的预览窗口,第二栏资源管理器能够正常的看到我们的项目代码文件夹。最右侧是我们编辑代码和查看输出日志的区域。

  我们能够正常的看到,刚刚新建的项目有一个错误,错误信息是「没有权限,请先开通云服务」,可以猜测,我们还需要去开通云服务。很简单,点击左上角的「云开发」,会出来下方的窗口。

  选择「预付费」,给你的云服务环境起个名字,然后点击开通,就完成了云环境的创建。

  这时候,返回我们刚刚的编辑器页面,点击编译,就能看到刚刚的报错信息已无了,代表我们的云环境可以用了。

  PS: 实战篇已开启~手把手带你体验小程序开发+上线全流程体验,文章的主要内容戳

上一篇:松江这些优质企业正在招实习生→ 下一篇:2020最新微信小程序学习资源汇总包括文档、视频、系列教程、开源项目、结构!