WeChat Mini Program Cloud Development | Urban Information Management

This article combines a case to illustrate the development steps of cloud development,And introduce the application of knowledge related to cloud development.

1、准备工作

1●Add collections through the cloud development consolecity和记录、上传文件

Create a new collection through the cloud development consolecity、添加一条记录,结果如图1所示.Set the permissions for the collection via the cloud development console to “所有用户可读,仅创建者可读写”,结果如图2所示.

 ■ 图1 Create a new collection through the cloud development consolecity、The result of adding a record

Upload a city information file,以便于后面的测试.

2●实现云函数addcityinfomationfun

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

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

对函数addcityinfomationfun进行本地调试、Upload and deploy.

3●实现云函数deleteacityfun

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

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

4●修改文件app.json

在项目secondcloudOn the basis of continuing follow-up development.

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

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

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

2、4implementation of a page

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中的“Download the city information file”按钮,The output in the console is shown in the figure3所示.

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

■ 图4 单击图3中的“Download the city information file”The output in the console after the button is pressed

2●显示页

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

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

3●添加页

单击图5中的“添加城市”按钮,跳转到添加页(与页面cityoperation对应),模拟器中的输出结果如图6所示.在图6中,Enter valid city information,如图7所示,单击“提交”按钮后,Successfully added a city information.

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

■图7 Enter valid city information interface

4●错误提示页

在图7中,Enter invalid city information(输入城市idwith existing citiesid冲突),如图8所示,单击“提交”按钮,Jump to the error page(和页面tellerror对应),如图9所示.

■ 图8 Enter invalid city information interface(输入城市idwith existing citiesid冲突)

■ 图9 Error prompt page result

5●Action related pages

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

■ 图10 单击图5中第4条记录后的“编辑”The output in the emulator after hyperlinking

■ 图11 单击图5中第4条记录后的“删除”The output in the emulator after hyperlinking