建立发展环境

使用您的AppID创建一个新的小程序项目，选择后端服务的小程序和云开发，然后单击新建完成新项目。

成功创建后跳转到开发人员工具界面

新构建后，微信为我们提供了一个参考模板程序，我们自己创建所有需要的文件和代码，所以删除所有不需要的文件，删除cloudfunctions下的所有文件，miniprogram/images和miniprogram/pages文件，删除app.json中的样式文件和原始页面配置。

此时编译底部的控制台会报错“VM8100:5 appJSON['pages']至少需要一项”，因为app.json中没有配置页面路径，接下来我们来配置app.json。

{ 'cloud': true，' pages': [ 'pages/index/index '，' pages/爆/爆'，' pages/user/user' ]，

“云”: true意味着云功能可以在所有基本库中使用。在页面路径列表页面下增加三个Tab页面路径，在window中设置全局默认窗口样式，通过tabBar设置底部tabbar的样式，配置完成后点击编译，开发工具会自动生成三个页面的文件夹和相关文件。

Window' : { '背景文字样式' :' light '，' navigation barbakgroundcolor ' : ' # ff 3333 '，'导航栏标题文字' : '我要爆炸'，' navigation bartextstyle ' : ' white '，' backgroundColor ' : ' # ff 33333 ' }，' tabbbar ' 3: { ' background color ' 33: ' # f2f 2 '，' color ' 3333: ' # 6b 6

成功配置后的页面结构和效果

创建数据库环境

设置环境名，可以根据自己的要求设置。在这里，用相同的项目名称设置dbx，下面的环境ID将自动生成，无需修改。单击“确定”完成创建。

成功创建后，跳转到云开发控制台页面

要配置app.js文件，在调用云开发API之前，需要调用初始化方法init一次(全局只调用一次)，并设置程序读取的环境的数据库位置和刚刚在wx.cloud.init中创建的数据库环境的ID

实现我的页面布局制作和用户授权登录功能

首先对页面进行布局，在表头使用按钮授权登录获取用户信息。按钮的打开类型设置为getUserInfo，这样按钮就可以从bindgetuserinfo回调中获取用户信息，回调方法设置为getUserInfoHandler。为了在授权后实时更新用户的头像和用户名，这里使用了数据绑定和判断的方法。

！-页面/用户/用户。wxml-view class=' user _ header ' view class=' header _ box ' image src=' http : { { userTx | | DefaultURl } } '/image button class=' { { username=='点击登录' ? 'usernameDe ' : ' username ' } } ' open-type=' GetUserInfo ' bind GetUserInfo=' GetUserInfoHandler ' { username } }/button view class='千岛文本糖果/text/view/view/view class=' user _ main ' view class=' main _ box ' view class=' box _ item ' image src=' http :/images/陆机。png '/图像文本点爆记录/text/view view class=' box _ item ' image src=' http :/images/Zhu Dian。png '/图像文本最近助点/text/view/view view class=' main _ box ' view class=' box _ item ' image src=' http :/images/feng Cun。png '/图像文本我的封存/text/view view class=' box _ item ' image src=' http :/images/user苍。png '/图像文本我的收藏/文本/视图/视图/视图

页面布局完成后进行user.js的编写，数据中设置页面初始数据，用户名用于控制授权按钮用户名变换，defaultUrl设置默认头像，userTx记录用户头像，用户信息记录用户授权后所获取的信息，性别用与用户性别判断，省用于记录地区信息。

//页面/用户/用户。js页面({ data : { username : '点击登录，DefaultURl : '/images/余一5。png '、userTx: '、userInfo: {}、gender: 1、province: ' '、}，在装载中对页面进行初始化设置和用户是否登录的初始化设置，在用户授权登录后直接使用本地的用户信息，如果本地信息不存在则通过wx.getSetting获取用户设置，看用户是否授权过，如果授权过，则wx.getUserInfo直接获取用户信息。

onLoad:函数(){ wx。setnavigationbartitle({ title : '我的' }) //当重新加载这个页面时，查看是否有已经登录的信息让username=wx。getstorage ency(' username ')，avater=wx。getstorage ency(' avatar ')；if(用户名){ this。setdata({ username : usertx，usertx : avater })} wx。get setting({ success : RES={ if(RES . auth setting['作用域。userninfo '])){ wx。getusername({ success : RES . userninfo。头像URL，user ninfo : RES . user ninfo })})})})，getdata)方法保存系统常用的用户信息到本地和完成用户信息数据库注册，* *按钮组件中bindgetuserinfo方法回调的详述数据与wx.getUserInfo返回的一致**,通过详述将所需的用户信息提取出来，将性别性别替换为'男'和'女，将头像、用户名、性别、地区保存在本地。然后使用云数据库应用程序接口进行数据库操作。

getUserInfoHandler:函数(e){ let d=e . detail . userinfo var gen=d . gender==1？男' : '女' this . setdata({ usertx :d . avatar URL，username 3360d . nickname })wx . setstoraync(' avater '，d . avatar URL)wx . setstoraync(' username '，d . nickname)wx . setstoraync(' gender '，gen)wx . setstoraync('省份'，d .省份)//获取数据库引用const db=wx . cloud . database()const _=db.command//检查是否有userid){ userid=this . getuserid()}//查找数据库db.collection ('users ')。其中({_ openid:d.openid})。get ({success (RES) {//res.data是一个包含上面定义的记录的数组//如果找到了数据，就记录数据，否则，如果(RES . datares . data . length 0){ wx . setstorageync(' OpenID '，Res.data[0]，就向数据库注册。_ OpenID)} else {//timer settimeout()={//写入数据库db.collection ('users ')。添加({data: {userid3360 userid，usersweet : 10，voice: 0，baovoice: 0，iv: d.iv }，Success3360 FuncTion(){ console . log('用户id添加成功')db.collection ('users ')。其中({userid:userid})。get({ success : RES={ wx . setstorageync(' OpenID '，res.data [0])。_openId)}，fail : err={ console . log(' user _ OpenID设置失败')}))，fail : function(e){ console . log('未能添加用户Id')}})}，100)}})，fail:err={}})})，getuserid 3360 function(){//产生唯一id。用一个1970年至今的字母或数字，一个10w的随机数组成var w=' abcdefghijklmnopqrstuvwxyz 0123456789 '，first w=w[parsent(math。random()*(w . length))]；var userId=first w(date . now())(math . random()* 100000)。toFixed(0)wx . setstoragesync(' userId '，userId)返回userId；}，})在云开发控制台中创建数据库集合。我们创建了一个新的用户集合。我们只需要创建一个新的集合。可以使用js中的云开发API自动创建集合中的属性和数据。

用户集是记录用户信息的用户信息表。用户表的结构如下：

集合创建成功后，点击编译，页面效果如下：

我们点击“点击登录”按钮，然后授权程序。授权后，我们可以看到显示了我们的头像和用户名。同时，当我们打开云开发控制台，查看用户集合时，可以看到我们的信息已经成功保存在集合中。

至此，我们就完了

1.创建云控制台数据库2。我的第3页的风格创作。创建用户授权登录功能4。云数据库用户数据存储的实现

项目源代码：https://github.com/xiedong2016/dbx

摘要

以上是边肖向大家介绍的我的主要观点。“微信小程序云开发项目的建立和我的页面功能的实现，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！