我要点爆”微信小程序云开发之项目建立与我的页面功能实现


Posted in Javascript onMay 26, 2019

开发环境搭建

使用自己的AppID新建小程序项目,后端服务选择小程序·云开发,点击新建,完成项目新建。

我要点爆”微信小程序云开发之项目建立与我的页面功能实现

新建成功后跳转到开发者工具界面

我要点爆”微信小程序云开发之项目建立与我的页面功能实现

新建后,微信端为我们提供了一个参考的模板程序,这里我们自己来创建各个所需的文件与代码,所以删除所有不需要的文件,删除cloudfunctions、miniprogram/images、miniprogram/pages文件下所有文件,同时也删除style文件和删除app.json中原始的页面配置。

我要点爆”微信小程序云开发之项目建立与我的页面功能实现

我要点爆”微信小程序云开发之项目建立与我的页面功能实现

此时编译下方控制台会报“VM8100:5 appJSON["pages"] 需至少存在一项”错误,因为app.json中未配置任何页面路径,下面我们来对app.json进行配置。

{
 "cloud": true,
 "pages": [
 "pages/index/index",
 "pages/detonation/detonation",
 "pages/user/user"
 ],

“cloud”: true表示让云能力可以在所有基础库中使用,在页面路径列表pages下加入三个Tab页面路径,在window中设置全局的默认窗口样式,通过tabBar设置底部tab栏的样式,配置完成后点击编译,开发工具会自动生成三个页面的文件夹以及相关文件。

"window": {
 "backgroundTextStyle": "light",
 "navigationBarBackgroundColor": "#FF3333",
 "navigationBarTitleText": "我要点爆",
 "navigationBarTextStyle": "white",
 "backgroundColor": "#FF3333"
 },
 "tabBar": {
 "backgroundColor": "#F2F2F2",
 "color": "#6B6B6B",
 "selectedColor": "#FF0000",
 "list": [
  {
  "pagePath": "pages/index/index",
  "text": "世界",
  "iconPath": "/images/shi.png",
  "selectedIconPath": "/images/shi1.png"
  },
  {
  "pagePath": "pages/detonation/detonation",
  "text": "点爆",
  "iconPath": "/images/bao2.png",
  "selectedIconPath": "/images/bao1.png"
  },
  {
  "pagePath": "pages/user/user",
  "text": "我的",
  "iconPath": "/images/wo1.png",
  "selectedIconPath": "/images/wo.png"
  }
 ]
 },
 "sitemapLocation": "sitemap.json"
}

配置成功后页面结构与效果

我要点爆”微信小程序云开发之项目建立与我的页面功能实现

我要点爆”微信小程序云开发之项目建立与我的页面功能实现

创建数据库环境

设置环境名称,环境名称可以根据自己需求设置,这里设置与项目名相同dbx,下方的环境ID会自动生成,无需修改,点击确定完成创建。

我要点爆”微信小程序云开发之项目建立与我的页面功能实现

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

我要点爆”微信小程序云开发之项目建立与我的页面功能实现

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

我要点爆”微信小程序云开发之项目建立与我的页面功能实现我要点爆”微信小程序云开发之项目建立与我的页面功能实现

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

首先对页面进行布局,头部使用一个button按钮来进行授权登录获取用户信息的操作,设置button的open-type为getUserInfo,使得按钮可以从bindgetuserinfo回调中获取到用户信息,设置回调方法为getUserInfoHandler。为了让用户授权后实时更新用户头像与用户名,这里使用数据绑定与判断的方法。

<!-- pages/user/user.wxml -->
<view class="user_header">
 <view class="header_box">
 <image src="{{userTx || defaultUrl}}"></image>
 <button class="{{username == '点击登录' ? 'usernameDe' : 'username'}}" open-type="getUserInfo" bindgetuserinfo="getUserInfoHandler">{{username}}</button>
 <view class="qiandao">
  <text>糖果</text>
 </view>
 </view>
</view>
<view class="user_main">
 <view class="main_box">
 <view class="box_item">
  <image src="/images/jilu.png"></image>
  <text>点爆记录</text>
 </view>
 <view class="box_item">
  <image src="/images/zhudian.png"></image>
  <text>最近助点</text>
 </view>
 </view>
 <view class="main_box">
 <view class="box_item">
  <image src="/images/fengcun.png"></image>
  <text>我的封存</text>
 </view>
 <view class="box_item">
  <image src="/images/usercang.png"></image>
  <text>我的收藏</text>
 </view>
 </view>
</view>

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

// pages/user/user.js
Page({
 data: {
 username: '点击登录',
 defaultUrl: '/images/yuyin5.png',
 userTx: '',
 userInfo: {},
 gender: 1,
 province: '',
 },

在onLoad中对页面进行初始化设置和用户是否登录的初始化设置,在用户授权登录后直接使用本地的用户信息,如果本地信息不存在则通过wx.getSetting获取用户设置,看用户是否授权过,如果授权过,则wx.getUserInfo直接获取用户信息。

onLoad: function () {
 wx.setNavigationBarTitle({
  title: '我的'
 })
 //当重新加载这个页面时,查看是否有已经登录的信息
 let username = wx.getStorageSync('username'),
  avater = wx.getStorageSync('avatar');
 if (username) {
  this.setData({
  username: username,
  userTx: avater
  })
 }
 wx.getSetting({
  success: res => {
  if (res.authSetting['scope.userInfo']) {
   wx.getUserInfo({
   success: res => {
    this.setData({
    userTx: res.userInfo.avatarUrl,
    userInfo: res.userInfo
    })
   }
   })
  }
  }
 })
 },

getUserInfoHandler方法保存系统常用的用户信息到本地和完成用户信息数据库注册,**button组件中bindgetuserinfo方法回调的detail数据与wx.getUserInfo返回的一致**,通过detail将所需的用户信息提取出来,将性别gender替换为‘男'和‘女',将头像、用户名、性别、地区保存在本地。然后使用云数据库API进行数据库操作。

getUserInfoHandler: function (e) {
 let d = e.detail.userInfo
 var gen = d.gender == 1 ? '男' : '女'
 this.setData({
  userTx: d.avatarUrl,
  username: d.nickName
 })
 wx.setStorageSync('avater', d.avatarUrl)
 wx.setStorageSync('username', d.nickName)
 wx.setStorageSync('gender', gen)
 wx.setStorageSync('province', d.province)
 //获取数据库引用
 const db = wx.cloud.database()
 const _ = db.command
 //查看是否已有登录,无,则获取id
 var userId = wx.getStorageSync('userId')
 if (!userId) {
  userId = this.getUserId()
 }
 //查找数据库
 db.collection('users').where({
  _openid: d.openid
 }).get({
  success(res) {
  // res.data 是包含以上定义的记录的数组
  //如果查询到数据,将数据记录,否则去数据库注册
  if (res.data && res.data.length > 0) {
   wx.setStorageSync('openId', res.data[0]._openid)
  } else {
   //定时器
   setTimeout(() => {
   //写入数据库
   db.collection('users').add({
    data: {
    userId: userId,
    userSweet: 10,
    voice: 0,
    baovoice: 0,
    iv: d.iv
    },
    success: function () {
    console.log('用户id新增成功')
    db.collection('users').where({
     userId: userId
    }).get({
     success: res => {
     wx.setStorageSync('openId', res.data[0]._openid)
     },
     fail: err => {
     console.log('用户_openId设置失败')
     }
    })
    },
    fail: function (e) {
    console.log('用户id新增失败')
    }
   })
   }, 100)
  }
  },
  fail: err => {

  }
 })
 },
 getUserId: function () {
 //生产唯一id,采用一个字母或数字+1970年到现在的毫秒数+10w的一个随机数组成
 var w = "abcdefghijklmnopqrstuvwxyz0123456789",
  firstW = w[parseInt(Math.random() * (w.length))];
 var userId = firstW + (Date.now()) + (Math.random() * 100000).toFixed(0)
 wx.setStorageSync('userId', userId)
 return userId;
 },
})

在云开发控制台中创建数据库集合,我们新建一个users集合,我们只需新建集合,通过js中使用云开发API可自动创建集合中的属性和数据。

我要点爆”微信小程序云开发之项目建立与我的页面功能实现

该users集合为用户信息表,记录用户信息,表users的结构如下:

我要点爆”微信小程序云开发之项目建立与我的页面功能实现

集合创建成功后,点击将出现进行编译,此时页面效果如下:

我要点爆”微信小程序云开发之项目建立与我的页面功能实现

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

我要点爆”微信小程序云开发之项目建立与我的页面功能实现我要点爆”微信小程序云开发之项目建立与我的页面功能实现

我要点爆”微信小程序云开发之项目建立与我的页面功能实现

至此,我们就完成了

1、云端控制台数据库的创建
2、我的页面的样式制作
3、用户授权登录功能制作
4、云数据库的用户数据存储的实现

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

总结

以上所述是小编给大家介绍的我要点爆”微信小程序云开发之项目建立与我的页面功能实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
vue-router传参用法详解
Jan 19 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 Javascript
vue指令做滚动加载和监听等
May 26 #Javascript
vxe-table vue table 表格组件功能
May 26 #Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 #Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 #Javascript
vue项目打包后怎样优雅的解决跨域
May 26 #Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 #Javascript
vue实现的请求服务器端API接口示例
May 25 #Javascript
You might like
PHP操作文件方法问答
2007/03/16 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
javascript关于继承解析
2016/05/10 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
详解在Python程序中使用Cookie的教程
2015/04/30 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
python实现对输入的密文加密
2019/03/20 Python
Python 线程池用法简单示例
2019/10/02 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
python让函数不返回结果的方法
2020/06/22 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
翻译专业应届生求职信
2013/11/23 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
医生见习报告范文
2014/11/03 职场文书
工作自我推荐信范文
2015/03/25 职场文书
趣味运动会赞词
2015/07/22 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
OpenFeign实现远程调用
2022/08/14 Java/Android