草庐IT

微信小程序云开发 | 城市信息管理

TiAmo zhang 2023-04-05 原文

本文结合一个案例说明云开发的开发步骤,并介绍云开发相关知识的应用。

1、准备工作

1通过云开发控制台增加集合city和记录、上传文件

通过云开发控制台新建集合city、添加一条记录,结果如图1所示。通过云开发控制台将集合的权限设置为“所有用户可读,仅创建者可读写”,结果如图2所示。

 ■ 图1 通过云开发控制台新建集合city、添加一条记录的结果

上传一个城市信息文件,以便于后面的测试。

2实现云函数addcityinfomationfun

实现云函数addcityinfomationfun,修改后的文件index.js代码示例1所示。

【例1】云函数addcityinfomationfun修改后的文件index.js代码示例。

对函数addcityinfomationfun进行本地调试、上传和部署。

3实现云函数deleteacityfun

实现云函数deleteacityfun,修改后的文件index.js代码示例2所示。

【例2】云函数deleteacityfun修改后的文件index.js代码示例。

4修改文件app.json

在项目secondcloud的基础上继续后续的开发。

修改文件app.json,增加代码如例3所示。

【例3】向app.json文件增加代码的示例。

修改代码后编译程序,自动在目录pages下生成homeofcitycloud、listcities、cityoperation、tellerror 4个子目录,且在这4个子目录(每个子目录对应一个页面)下分别自动生成对应页面的4个文件(如homeofcitycloud.wxml等)。

2、4个页面的实现

1修改homeofcitycloud页面的wxml、js文件

修改文件homeofcitycloud.wxml和homeofcitycloud.js。文件homeofcitycloud.wxml修改后的代码如例4所示。

【例4】文件homeofcitycloud.wxml修改后的代码示例。

文件homeofcitycloud.js修改后的代码如例5所示。

【例5】文件homeofcitycloud.js修改后的代码示例。

2修改listcities页面的wxml、js和wxss文件

修改文件listcities.wxml、listcities.js和listcities.wxss。文件listcities.wxml修改后的代码如例6所示。

【例6】文件listcities.wxml修改后的代码示例。

文件listcities.js修改后的代码如例7所示。

【例7】文件listcities.js修改后的代码示例。

文件listcities.wxss修改后的代码如例8所示。

【例8】文件listcities.wxss修改后的代码示例。

3修改cityoperation页面的wxml、js和wxss文件

修改文件cityoperation.wxml、cityoperation.js和cityoperation.wxss。文件cityoperation.wxml修改后的代码如例9所示。

【例9】文件cityoperation.wxml修改后的代码示例。

文件cityoperation.js修改后的代码如例10所示。

【例10】文件cityoperation.js修改后的代码示例。

文件cityoperation.wxss修改后的代码如例11所示。

【例11】文件cityoperation.wxss修改后的代码示例。

4修改tellerror页面的wxml和js文件

修改文件tellerror.wxml和tellerror.js。文件tellerror.wxml修改后的代码如例12所示。

【例12】文件tellerror.wxml修改后的代码示例。

文件tellerror.js修改后的代码如例13所示。

【例13】文件tellerror.js修改后的代码示例。

3、运行程序

1首页

编译程序后模拟器中的输出结果如图3所示。单击图3中的“下载城市信息文件”按钮,控制台中的输出结果如图3所示。

■ 图3 编译程序后模拟器中的输出结果

■ 图4 单击图3中的“下载城市信息文件”按钮后控制台中的输出结果

2显示页

单击图3中的“显示城市信息”按钮,跳转到显示页(与页面listcities对应),模拟器中的输出结果如图5所示。

■ 图5 单击图3中“显示城市信息”按钮后模拟器中的输出结果

3添加页

单击图5中的“添加城市”按钮,跳转到添加页(与页面cityoperation对应),模拟器中的输出结果如图6所示。在图6中,输入有效城市信息,如图7所示,单击“提交”按钮后,成功增加了一条城市信息。

■ 图6 单击图5中“添加城市”按钮后

■图7 输入有效城市信息界面

4错误提示页

在图7中,输入无效城市信息(输入城市id与已有的城市id冲突),如图8所示,单击“提交”按钮,跳转到错误提示页(和页面tellerror对应),如图9所示。

■ 图8 输入无效城市信息界面(输入城市id与已有的城市id冲突)

■ 图9 错误提示页结果

5操作相关页

在图5中,单击第4条记录(无锡)后的“编辑”超链接,结果如图10所示。单击“删除”超链接,结果如图11所示。单击“确定”按钮,成功删除一条记录。

■ 图10 单击图5中第4条记录后的“编辑”超链接后模拟器中的输出结果

■ 图11 单击图5中第4条记录后的“删除”超链接后模拟器中的输出结果

 

有关微信小程序云开发 | 城市信息管理的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序,虽然我自己可以处理一大堆yml文件,但我说的语言(非常)有限,最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器,其中一些翻译器不愿意或无法处理存储库中的100多个文件,处理语言数据。谢谢&问候,安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题,我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前,我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞,我可以在一个地方轻松完成,而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  3. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  4. ruby-on-rails - 获取 inf-ruby 以使用 ruby​​ 版本管理器 (rvm) - 2

    我安装了ruby​​版本管理器,并将RVM安装的ruby​​实现设置为默认值,这样'哪个ruby'显示'~/.rvm/ruby-1.8.6-p383/bin/ruby'但是当我在emacs中打开inf-ruby缓冲区时,它使用安装在/usr/bin中的ruby​​。有没有办法让emacs像shell一样尊重ruby​​的路径?谢谢! 最佳答案 我创建了一个emacs扩展来将rvm集成到emacs中。如果您有兴趣,可以在这里获取:http://github.com/senny/rvm.el

  5. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式? 最佳答案 您可以像这样为日期选择器提供额外的选项,而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义,我们在StackOverflow上找到一个类似的问题: https://s

  6. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  7. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  8. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  9. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  10. ruby - (Ruby || Python) 窗口管理器 - 2

    我想用这两种语言中的任何一种(最好是ruby​​)制作一个窗口管理器。老实说,除了我需要加载某种X模块外,我不知道从哪里开始。因此,如果有人有线索,如果您能指出正确的方向,那就太好了。谢谢 最佳答案 XCB,X的下一代API使用XML格式定义X协议(protocol),并使用脚本生成特定语言绑定(bind)。它在概念上与SWIG类似,只是它描述的不是CAPI,而是X协议(protocol)。目前,C和Python存在绑定(bind)。理论上,Ruby端口只是编写一个从XML协议(protocol)定义语言到Ruby的翻译器的问题。生

随机推荐