前段时间和同学一起做了一个小程序，用来参加学校的比赛，完成后把项目内容分割一下，贴到博客上面，算是学习记录和总结吧。
因为是学生党，而且并没有很大的需要，所以选择了微信小程序为开发者提供的“云开发”选项。
开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。
按照微信的说法：
云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。
目前提供三大基础能力支持：
云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码
数据库：一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库
存储：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
首先，开通云开发功能是第一步（默认你已经注册好了微信小程序账号而且申请好了一个AppId）,经测试，云开发并不能使用测试号，只能使用真实的AppId。
注：AppID 首次开通云环境后，需等待大约 10 分钟方可正常使用云 API，在此期间官方后台服务正在做准备服务，如尝试在小程序中调用云 API 则会报 cloud init error：{ errMsg: “invalid scope” } 的错误
之后新建就行了。
新建的项目已经包含了一个快速开发的Demo,而且含有云函数示例，初始化函数等等，最好可以先看看，熟悉一下。
首先看一下app.js这个文件：
//app.js App({ onLaunch: function () { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力') } else { wx.cloud.init({ traceUser: true, }) } })
wx.cloud.init()为云端环境初始化函数,如果有多个云开发环境则需要指定env参数，如下:
wx.cloud.init({ env: 'test-x1dzi' })
具体可以查看官方文档：
接下来声明一些全局数据
//全局数据 globalData: { //用户ID userId: '', //用户信息 userInfo: null, //授权状态 auth: { 'scope.userInfo': false }, //登录状态 logged: false }
最后的样子是这样：
//app.js App({ //全局数据 globalData: { //用户ID userId: '', //用户信息 userInfo: null, //授权状态 auth: { 'scope.userInfo': false }, //登录状态 logged: false }, onLaunch: function() { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力') } else { wx.cloud.init({ traceUser: true, env: 'winbin-2hand' }) } } })
注意将env参数换成你自己的云开发环境。
把Pages目录下的除index外的文件夹删除。
并且在app.json中的Pages字段中下仅保留index项:
app.json
{ "pages": [ "pages/index/index" ], "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#F6F6F6", "navigationBarTitleText": "云开发 QuickStart", "navigationBarTextStyle": "black"， "navigationStyle": "custom" }, "sitemapLocation": "sitemap.json" }
页面文件内容如下：
index.wxml
<view> <open-data type="userAvatarUrl"></open-data> <view> <text>Hello </text> <open-data type="userNickName"></open-data> </view> <button hidden='{{hiddenButton}}' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo"> <text> 开启小程序之旅</text> </button> </view>
因为微信小程序声称wx.getUserInfo(Object object)在以后将不再支持，这里使用另一种方式来显示用户的信息。
标签<open-data type=""></open-data>可以用来显示用户的一些信息
<open-data type="userAvatarUrl"></open-data>显示用户的头像
<open-data type="userNickName"></open-data>显示用户的昵称
详情可以查看：wx.getUserInfo中的示例代码部分
页面样式如下：
index.wxss
page { width: 100%; height: 100%; } .container { background: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-758991.png'); background-size: 400vw 100vh; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; } .avs { opacity: 0.9; width: 200rpx; height: 200rpx; margin-top: 160rpx; } .username { font-size: 32rpx; font-weight: bold; margin-top: 200rpx; } .moto-container { line-height: normal; border: 1px solid #450f80; width: 200rpx; height: 80rpx; border-radius: 5px; text-align: center; margin-top: 200rpx; padding: 0px; outline: none; } .moto { font-size: 22rpx; font-weight: bold; line-height: 80rpx; text-align: center; color: #450f80; }
这里使用了全屏背景
效果如下：
#接下来是js脚本#
首先说一下思路
流程图如下
接下来是index.js