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


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 相关文章推荐
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
js实现石头剪刀布游戏
Oct 11 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 选项及相关信息函数库
2006/12/04 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
python实现用户登陆邮件通知的方法
2015/07/09 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
Linux下python3.7.0安装教程
2018/07/30 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
大学生关于奋斗的演讲稿
2014/01/09 职场文书
四年级语文教学反思
2014/02/05 职场文书
军训学生自我鉴定
2014/02/12 职场文书
小班评语大全
2014/05/04 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
2015年资料员工作总结
2015/04/25 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书