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


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 相关文章推荐
javascript 数组的方法集合
Jun 05 Javascript
javascript 写类方式之五
Jul 05 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
JavaScript中的 new 命令
May 22 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
德生S2000电路分析
2021/03/02 无线电
php学习之数据类型之间的转换代码
2011/05/29 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
读jQuery之一(对象的组成)
2011/06/11 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
Python yield 小结和实例
2014/04/25 Python
Python探索之创建二叉树
2017/10/25 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
石油大学毕业生自荐信
2014/01/28 职场文书
工程采购员岗位职责
2014/03/09 职场文书
城市创卫标语
2014/06/17 职场文书
护士2015年终工作总结
2015/04/29 职场文书
总经理年会致辞
2015/07/29 职场文书