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

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条记录后的“删除”超链接后模拟器中的输出结果

微信小程序云开发 | 城市信息管理相关推荐

微信小程序云开发及背后的云服务支持。
文章目录导语什么是微信小程序云开发? 云开发的优势云开发的技术生态支持微信云开发主要能力特性云数据库: 云函数: 云存储: 身份认证: 云调用: 云开发与传统开发的模式区别小程序云开发带来 ...
微信小程序云开发|基于微信小程序实现房产中介平台系统
作者主页:编程千纸鹤作者简介:Java.前端.Python开发多年,做过高程,项目经理,架构师主要内容:Java项目开发.毕业设计开发.面试技术整理.最新技术分享收藏点赞不迷路关注作者有好处 ...
python操作微信小程序云端数据库_微信小程序云开发之数据库操作
本文实例为大家分享了微信小程序云开发之数据库操作的具体代码,供大家参考,具体内容如下新建集合 1.打开云开发控制台,数据库 2.添加集合users 添加代码 onAdd: function () { ...
微信小程序云开发不完全指北
微信小程序云开发不完全指北首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...
python操作微信小程序云端数据库_微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序...
微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序浏览量:1120 时间:2020-04-06
微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发
微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...
基于微信小程序云开发（校园许愿墙app）2.0稳定版，以发布上线
大家好~我是c站的一个小博主,我会定期更新博文,本篇是围绕微信小程序基于腾讯云开发展开的一个项目,如果看着还不错,或者对您有帮助的话,可以进我的专栏看看我的小程序的其他作品https://blog.c ...
微信小程序云开发实战：网上商城（二）
微信小程序云开发实战:网上商城(二) 主页面入口页面云函数与云数据库代码实现云端实现小程序端实现选择UI组件库 WeUI Vant 整合UI组件库以扩展包的方式引入weui 接下来主页 ...
php访问微信云数据库,第三方服务器php获取微信小程序云开发access_token和云数据库...
微信小程序云开发开放了http api,可以从第三方访问云服务了.方便很多.云服务的后台,可以用PC端写了. 流程大概就是通过appid,appkey获得access_token,这个access_t ...

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