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

开发环境搭建

使用自己的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

总结

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

(0)

相关推荐

  • 微信小程序开发背景图显示功能

    这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置 background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image 只能用网络url或者base64图片编码 , 本地图片只能用 image标签src属性才行.当然 image标签src属性也可以使用网络url或者base64图片编码. 下面通过 image 标签src属性设置,实现背景图显示 界面结构: <view class='set-background'>

  • 微信小程序开发animation心跳动画效果

    本文实例为大家分享了微信小程序开发animation心跳动画,供大家参考,具体内容如下 1.微信小程序开发animation心跳动画 wxml文件中: <view class="bottomViewItem"> <view class="bottomMiddleHeaderView" bindtap="voteClick" data-id="value"> <view class="bo

  • 微信小程序开发之改变data中数组或对象的某一属性值

    前言:在小程序的开发中,我们在view中便利data中数组或对象时,很多情况下需要在js中动态改变数组或者对象中某一香的属性值. 效果图: 我给大家总结了案例如下: wxml如下: <scroll-view class='hd-cont' scroll-x="true" style='width: 100%'> <view wx:for="{{sDate}}" wx:key="{{index}}" class='date-con

  • 微信小程序开发之自定义tabBar的实现

    最近开发微信小程序,公司要求做一个类似闲鱼的tabbar,但是网上大多资料的tabbar都会在页面切换的时候重新渲染,所以我写了一个不会重新渲染的tabbar,有需要的直接拿走不谢.https://github.com/SuRuiGit/wxapp-customTabbar 在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页

  • C#开发之微信小程序发送模板消息功能

    步骤一:获取模板ID 有两个方法可以获取模版ID 通过模版消息管理接口获取模版ID 在微信公众平台手动配置获取模版ID 步骤二:页面的 <form/> 组件,属性report-submit为true时,可以声明为需发模板消息,此时点击按钮提交表单可以获取formId,用于发送模板消息.或者当用户完成支付行为,可以获取prepay_id用于发送模板消息. 步骤三:调用接口下发模板消息 今天重要的说第三步怎么实现,前面的步骤比较简单就略过. ----------------------------

  • 微信小程序开发之IOS和Android兼容的问题

    微信小程序开发之IOS和Android兼容的问题 一.时间转换问题: 这不只是小程序上面的问题是ios系统 都有这个问题 就是new  Date("2017-06-16") 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解决方案如下 1.替换"-"为"/" 2.删除"."后面的字符串(带毫秒也会有问题) 代码如下: /** * 字符串转换为时间 * @param {String} src 字符串 */ strToDa

  • 微信小程序开发之好友列表字母列表跳转对应位置

    微信小程序开发之好友列表字母列表跳转对应位置 前言: 在小程序里实现微信好友列表点击右侧字母列表跳转对应位置效果.写了个demo,核心部分很简单,所以没多少注释,如果遇到问题就加群问我吧. 核心技术点: 1.小程序scroll-view组件的scroll-into-view, scroll-with-animation. scroll-y属性. 2.小程序的touch事件的应用. 3.Js定时器的应用. view页面代码: index.wxml class="container" sc

  • 详解如何在微信小程序开发中正确的使用vant ui组件

    微信小程序终于可以支持npm导入第三方库了(https://developers.weixin.qq....),但是这种导入模式和使用模式有别于我们使用的npm调用.今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源. 第一步: 在小程序工程的根目录下执行: npm i vant-weapp -S --production 第二步: 保证当前你的微信开发者工具是最新版本,然后点击执行"构建npm" 构建成功后会提示: 同时项目根目录中会多出一个目录"minipr

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

    开发环境搭建 使用自己的AppID新建小程序项目,后端服务选择小程序·云开发,点击新建,完成项目新建. 新建成功后跳转到开发者工具界面 新建后,微信端为我们提供了一个参考的模板程序,这里我们自己来创建各个所需的文件与代码,所以删除所有不需要的文件,删除cloudfunctions.miniprogram/images.miniprogram/pages文件下所有文件,同时也删除style文件和删除app.json中原始的页面配置. 此时编译下方控制台会报"VM8100:5 appJSON[&qu

  • 微信小程序云开发实现数据添加、查询和分页

    本文实例为大家分享了微信小程序云开发实现数据添加.查询和分页,供大家参考,具体内容如下 实现的效果 实现要点 WXML 不同类别数据的显示 通过 if-elif-else 实现,在wxml文件中通过 <block></block>渲染,因为它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性.也就是说可以通过属性来控制页面是否要渲染这部分的内容,可以减少页面渲染时间. 云开发数据的获取 先开通云开发功能 ,参考官方文档,然后在创建项目的时候勾选上 使用云开发模板(看个人吧,

  • 微信小程序云开发之新手环境配置

    本文实例为大家分享了微信小程序云开发环境配置的具体方法,供大家参考,具体内容如下 注意:小程序云开发需要使用注册的小程序appid,测试和游客进入是没有云开发的功能. 首先我们新建小程序项目,填写申请的appID如果没有需要注册一个,微信为我们提供了一个云开发快速启动的模板,这里我们勾选进去看看云开发为我们提供的案例. 首次进入控制台会报cloud init error (云初始化错误). 如果我们填写了在微信的左上角调试器旁边有一个云开发,在这里我们点击云开发 点击开通云开发 官网建议我们建两

  • 微信小程序云开发详细教程

    微信小程序云开发之初体验,供大家参考,具体内容如下 小程序云开发是微信最近推出的新的一项能力,它弱化了后端以及运维的概念,开发者无需搭建服务器,使用微信平台提供的api即可完成核心的业务开发. 目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 数据库:既可在小程序前端操作,也能在云函数中读写的 JSON 数据库,免费2G容量 存储:可在小程序前端上传/下载云端文件,在云开发控制台可视化管理,免费5G容量 上手体验 打开微信开发者工具,新建

  • 微信小程序云开发实现增删改查功能

    本文实例为大家分享了微信小程序云开发实现增删改查的具体代码,供大家参考,具体内容如下 首先按照微信小程序官方提示创建一个快速云开发小程序 大家可以点击此处下载源代码 实现效果如下: 在miniprogram->index的下修改下面三个文件 index.js如下: Page({ data: { id: '',//修改用来保存_id iSshow: true, inpVal: '', inp2Val: '', inp3Val: '', list: [] }, onLoad: function ()

  • 微信小程序云开发之数据库操作

    本文实例为大家分享了微信小程序云开发之数据库操作的具体代码,供大家参考,具体内容如下 新建集合 1.打开云开发控制台,数据库 2.添加集合users 添加代码 onAdd: function () { const db = wx.cloud.database() db.collection('users').add({ data: { count: 1 }, success: res => { // 在返回结果中会包含新创建的记录的 _id this.setData({ counterId: r

  • 微信小程序云开发如何使用云函数生成二维码

    本文实例为大家分享了微信小程序云开发使用云函数生成二维码的具体代码,供大家参考,具体内容如下 首先,需要给对应的云函数安装 request-promise 依赖.(不会给云函数安装依赖的盆友请移步 微信小程序中的云开发如何使用npm安装依赖) 生成二维码的云函数如下: // 云函数入口文件 const cloud = require('wx-server-sdk') const rp = require('request-promise') cloud.init() // 云函数入口函数 exp

  • 微信小程序云开发修改云数据库中的数据方法

    小程序代码中无法直接修改他人创建的数据记录 例如:数据库表中的_openid字段是自动生成的,哪个用户创建的记录这个openid就是用户的openid,云数据库的权限分配也是根据openid来进行的. 解决方案: 第一步:创建云函数,在函数中编写修改数据库的操作代码 // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() const _ = db.command // 云

  • 微信小程序 云开发模糊查询实现解析

    这篇文章主要介绍了微信小程序 云开发模糊查询实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 解释: db.RegExp 从基础库 2.3.2 开始(wx-server-sdk 从 0.0.23 开始),数据库支持正则表达式查询,开发者可以在查询语句中使用 JavaScript 原生正则对象或使用 db.RegExp 方法来构造正则对象然后进行字符串匹配.在查询条件中对一个字段进行正则匹配即要求该字段的值可以被给定的正则表达式匹配 事例:

  • 微信小程序云开发获取文件夹下所有文件(推荐)

    上周一个高中同学让我帮他做个图片展示的公众号,因为一直在加班的原因,所以一时忘了,昨晚想起来就赶紧加班加点的帮他弄了下,遇到了个问题,记录一下. 他的需求是要有个后台给他上传图片并且将图片归类,前端公众号根据每次不同的主题显示不同的封面和照片,但是服务器又不想买贵的,思来想去,最后决定用小程序云开发,连服务器和公众号认证费都免了,哈哈哈哈 因为改成小程序云开发,所以需求也有了些变动,最后改成不需要后台,图片直接在云开发控制台中上传,然后在小程序中添加一个专门用来对封面和名称做修改的管理员页面,其

随机推荐