微信小程序云开发2

最新推荐文章于 2024-09-12 16:43:23 发布
最新推荐文章于 2024-09-12 16:43:23 发布
阅读量725 收藏 1
点赞数 1
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37852301/article/details/108877742
版权

  1. 改进：使bindGetUserInfo返回所有用户信息，创建app对象是得用户用户信息可以随时读取

    user.js

    /// miniprogram/pages/user/user.js

//创建一个app对象，可以用app对象获取app.js中的userInfo
const app = getApp()

//创建数据库,初始化数据库
const db = wx.cloud.database()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    userPhoto:"../../images/photo/01.jpg",
    nickName:"小喵喵",
    logged:false,
  },


  // 返回 登陆信息，userinfo,插入数据库
  bindGetUserInfo(ev){
    // console.log(ev);
    let userInfo = ev.detail.userInfo;
    if (!this.data.logged && userInfo){
        db.collection('users').add({
          data:{
            userPhoto:userInfo.avatarUrl,
            nickName:userInfo.nickName,
            signature:'',
            phoneNumber:'',
            weixinNumber:'',
            links:0,
            time:new Date()
          }
        }).then((res)=>{
          // console.log(res)
          //doc可以根据id获取所有数据
          db.collection('users').doc(res._id).get().then((res)=>{
            // console.log(res.data);
            //拷贝对象
            app.userInfo = Object.assign(app.userInfo, res.data);
            //更新用户头像
            this.setData({
                userPhoto:app.userInfo.userPhoto,
                nickName:app.userInfo.nickName,
                logged:true
            });
          });
        });
      }
    }
})

    app.js

    //app.js
App({
  //初始化生命周期
  onLaunch: function () {
    
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个创建的环境）
        // env: 'my-env-id',
        //配置云开发环境id
        env:'dev-2gzx8hmu754cbff6',
        //追踪用户调用（在运营分析，用户访问中可以看到）
        traceUser: true,
        
      })
    }

    this.globalData = {}
    //定义一个全局信息，使各个用户都可以使用用户信息
    this.userInfo={}
  }
})

  2. 上传部署云函数，实现自动登陆

    右键云函数文件夹，上传并部署，在云开发环境查看云函数是否上传

    user.js

    // miniprogram/pages/user/user.js

//创建一个app对象，可以用app对象获取app.js中的userInfo
const app = getApp()

//创建数据库,初始化数据库
const db = wx.cloud.database()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    userPhoto:"../../images/photo/01.jpg",
    nickName:"小喵喵",
    logged:false,
    // 一开始用户无法点击登陆
    disabled:true,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //如果用户已经登陆过，利用login函数实现自动登陆
    //如果用户没有登陆过，则可以点击登陆
      wx.cloud.callFunction({
        //上传的数据
        name:'login',
        data:{},
      }).then((res)=>{
        console.log(res);
        db.collection('users').where({
          _openid:res.result._openid
        }).get().then((res)=>{
          if(res.data.length){
            app.userInfo = Object.assign(app.userInfo, res.data[0]);
            this.setData({
              userPhoto:app.userInfo.userPhoto,
             nickName:app.userInfo.nickName,
              logged:true
            });
          }else{
            this.setData({
              disabled : false
            });
          }

        });
      });
  },
}
})

  3. 登陆后实现个人信息页面的跳转，需要使用路由组件navigator

    1. 在pages下创建好其他页面

    user.wxml

    <!--miniprogram/pages/user/user.wxml-->
<view class="user">
  <view class="user-info">
    <image src="{{userPhoto}}" />
    <!-- 需要使用 button 来授权登录 -->
    <text wx:if="{{logged}}"> 欢迎你：{{nickName}}</text>
    <!-- bindgetuserinfo函数需要卸载js中 -->
    <button wx:else disabled="{{disabled}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
      微信登录
    </button>
  </view>

  <!-- //登陆状态下才可以让用户看见列表 -->
  <view wx:if="{{logged}}" class="userlist">
    <navigator url="../editUserInfo/editUserInfo" open-type="navigate">
      <view class="user-list-item">
        <text>编辑个人信息</text>
        <text class="iconfont iconarrowRight"></text>
      </view>
    </navigator>
    <navigator url="../friendList/friendList" open-type="navigate">
      <view class="user-list-item">
        <text>查看好友列表</text>
        <text class="iconfont iconarrowRight"></text>
      </view>
    </navigator>
    <navigator url="../detail/detail" open-type="navigate">
      <view class="user-list-item">
        <text>个人主页</text>
        <text class="iconfont iconarrowRight"></text>
      </view>
    </navigator>
  </view>
</view>

    editUserInfo

    <!--miniprogram/pages/editUserInfo/editUserInfo.wxml-->
<view class="editUserInfo">
  <navigator url="../head/head" open-type="navigate">
      <view class="editUserInfo-list-item">
        <text>修改头像</text>
        <text class="iconfont iconarrowRight"></text>
      </view>
    </navigator>
    <navigator url="../head/head" open-type="navigate">
      <view class="editUserInfo-list-item">
        <text>修改昵称</text>
        <text class="iconfont iconarrowRight"></text>
      </view>
    </navigator>
    <navigator url="../head/head" open-type="navigate">
      <view class="editUserInfo-list-item">
        <text>修改个性签名</text>
        <text class="iconfont iconarrowRight"></text>
      </view>
    </navigator>
    <navigator url="../head/head" open-type="navigate">
      <view class="editUserInfo-list-item">
        <text>共享位置</text>
        <text class="iconfont iconarrowRight"></text>
      </view>
    </navigator>
    <navigator url="../head/head" open-type="navigate">
      <view class="editUserInfo-list-item">
        <text>设置手机号 <text class="editUserInfo-list-tips">仅好友可见</text></text>
        <text class="iconfont iconarrowRight"></text>
      </view>
    </navigator>
    <navigator url="../head/head" open-type="navigate">
      <view class="editUserInfo-list-item">
        <text>设置微信号 <text  class="editUserInfo-list-tips">仅好友可见</text></text>
        <text class="iconfont iconarrowRight"></text>
      </view>
    </navigator>
</view>

  4. 修改个人信息

    1. 修改签名

      signature.wxml

      <!--miniprogram/pages/editUserInfo/signature/signature.wxml-->
<button>设置个性签名</button>
<input type="text" value="{{signature}}" />

      signature.js

      // miniprogram/pages/editUserInfo/signature/signature.js

const app = getApp()

const db = wx.cloud.database()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    signature:''

  },

 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //拿到用户信息的值
    this.setData({
      signature:app.userInfo.signature
    });
  },

  
  handleText(ev){
    // value就是表单中输入的值
    let value = ev.detail.value;
    this.setData({
      signature:value
    });
  },
  handleBtn(){
    this.upDateSignature();
  },
  upDateSignature(){
    wx.showLoading({
      title:'更新中'
    })
    db.collection('users').doc(app.userInfo._id).update({
      data:{
        signature:this.data.signature
      }
    }).then((res)=>{
      wx.hideLoading();
      wx.showToast({
        tiltle:'更新成功'
      })
    });
    //  显示原来的签名
    app.userInfo.signature = this.data.signature
  }
})

    2. 修改位置

      location.wxml

      <!--miniprogram/pages/editUserInfo/location/location.wxml-->
<view>
  <text>开始共享位置</text>
  <!-- bindchange改变了按钮触发事件方法 -->
  <switch checked="{{islocation}}" bindchange="switchChange"></switch>
</view>

      location.js

      // miniprogram/pages/editUserInfo/location/location.js
const app = getApp()

const db = wx.cloud.database()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    islocation:true

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.setData({
      islocation:app.userInfo.islocation
    });
  },

 
  switchChange(ev){
    // console.log(ev.detail.value);
    let value = ev.detail.value
    db.collection('users').doc(app.userInfo._id).update({
      data:{
        islocation:value
      }
    }).then((res)=>{

    });
  }
})

    3. 改进：在修改信息时，让外部页面，我的，也发生变化

      使用js中onshow使每次进入页面都更新数据

      user.js

      /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      userInfo:app.userInfo.userPhoto,
      nickName:app.userInfo.nickName
    });
  },

    4. 修改昵称可以直接使用微信昵称

    name.wxml

    <!--miniprogram/pages/editUserInfo/name/name.wxml-->
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
      使用微信昵称
</button>
<button bindtap="handleBtn">自定义昵称</button>
<input type="text" value="{{nickName}}" bindinput="handleText"/>

    name.js

     //使用微信昵称的函数
  bindGetUserInfo(ev){
    let userInfo = ev.detail.userInfo;
    if (userInfo) {
      this.setData({
        nickName:userInfo.nickName
        // 回调UpadteNickName函数，之前已经写好
      },()=>{
        this.UpdateNickName();
      });

    }
    1. 修改头像，用户可以自己上传头像修改，wx.chooseImage,

    上传图片到云数据库uploadFile

    head.wxml

    <!--miniprogram/pages/editUserInfo/location/location.wxml-->
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
      使用微信头像
</button>
<button bindtap="handleBtn">自定义头像</button>

<image src="{{userPhoto}}" bindtap="handleUploadImage" />

    head.js

    // miniprogram/pages/editUserInfo/head/head.js
const app = getApp()

const db = wx.cloud.database()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    userPhoto:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.setData({
      userPhoto:app.userInfo.userPhoto
    });
  },

  handleUploadImage(){
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success :(res)=>{
        // console.log(res);
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths[0];
        //上传完图片后显示出修改后的图片
        this.setData({
          userPhoto:tempFilePaths
        });
      }
    })
  },
  handleBtn(){
    wx.showLoading({
      title: '上传中',
    })
    //每次上传都是一个新路径
    let cloudPath = "userPhoto/"+app.userInfo._openid + Date.now()+ ".jpg";
    wx.cloud.uploadFile({
      cloudPath,
      filePath: this.data.userPhoto,      
    }).then((res)=>{
      // console.log(res);
      let fileID = res.fileID;
      if (fileID){
        db.collection('users').doc(app.userInfo._id).update({
          data:{
            userPhoto:fileID
          }
        }).then((res)=>{
          wx.hideLoading();
          wx.showToast({
            title: '上传并更新成功',
          });
          //返回我的时更新我的头像
          app.userInfo.userPhoto = fileID;  
        });
      }
    });
  },
  //使用微信昵称的函数
  bindGetUserInfo(ev){
    let userInfo = ev.detail.userInfo;
    if (userInfo) {
      this.setData({
        nickName:userInfo.avatarUrl
        // 回调UpadteNickName函数，之前已经写好
      },()=>{
        wx.showLoading({
          title: '上传中',
        })
        db.collection('users').doc(app.userInfo._id).update({
          data:{
            userPhoto:userInfo.avatarUrl
          }
        }).then((res)=>{
          wx.hideLoading();
          wx.showToast({
            title: '上传并更新成功',
          });
          //返回我的时更新我的头像
          app.userInfo.userPhoto = userInfo.avatarUrl;  
        });
      });
    }
  }
})
only a thought
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序基础语法
DF11G_0001的博客
11-07 456
数据绑定在.js的data里，用{{变量}}进行绑定 普通标签：<view> 图片标签：<image src=" "> 循环：wx:for 判断：wx:if 是否渲染可以使用wx:if和hidden。 区别：hidden不会将wxml内的元素删去，wx:if会。所以需要频繁切换的场景适合hidden，一次性渲染的场景适合wx:if。 添加事件：bind 事件的冒泡：当子元素发生事件时，事件会逐层向父元素进行传播。 阻止事件冒泡！使用catch代替bind进行事件绑定
微信小程序学习（2）-云开发
mus-z的博客
07-26 1251
微信小程序-云开发 微信小程序学习（1） 文章目录微信小程序-云开发初始化+云函数的坑云函数使用老陈段子小程序云存储小程序云数据库初始化插入简单查询更新数据删除数据Aggregate联合查询addFields派生/替换字段bucket分组bucketAuto自动分组granularity 详细说明count记录数geoNear地理位置索引group分组limit输出限制lookup联表查询(yun)match查询project操作字段replaceRoot换根节点simple 随机抽取skip跳过指定条数s
微信小程序-collection.where查表
m0_46445478的博客
05-22 6074
在写用户发送申请，将申请存入require表中。 但是同一个帖子的可以发好几次申请，这就不符合实际应用了。需要对require中postsid（赋值为发送申请的那一个帖子的id）进行访问，postsid！= id的才能申请成功。 正常查表过滤符合条件的数据时用where，如下举例： wx.cloud.callFunction({ name: 'login', data: {} }).then((res)=>{ db.collection('posts').wh
微信小程序 | 云函数上的数据库操作
热门推荐
chez-moi
06-17 4万+
前阵子做了个微信小程序的项目，这次来主要讲讲云函数上的数据库操作。本文将按照以下顺序进行讲解： 目录 00 什么是云函数和数据库操作 云函数 数据库操作 数据类型 01 小程序端与云端数据库操作的比较 02 项目实操部分 0201 小白部分（可跳过直接看0202） 0202 增查改 增 查 改 00 什么是云函数和数据库操作 小程序的入门学习建议：以微信小程...
微信小程序之云开发collection指令
weixin_42884292的博客
10-14 2217
collection.count： 统计集合记录数或统计查询语句对应的结果记录数，注意这与集合权限设置有关，一个用户仅能统计其有读权限的记录数。比如查找所有由“北京日报”发布的文章的个数： db.collectioin("article").where({ author: "北京日报" }).count().then(res => { console.log(res); })...
微信小程序连接云数据库基本使用
m0_46745664的博客
10-22 4397
微信小程序云数据库常用函数介绍及演示
微信小程序云开发 教程二
前端视听
05-07 319
微信小程序云开发 初学者入门教程二-前端操作数据库模块 如何操作数据库，作为一名前端，如果对数据的知识不够熟悉也没关系，从现在开始好好学习就行，数据库的操作内容差不多涉及增删改查四大模块，花一些业余的时间在上面，也必有所得。 数据库操作大多数需要用户openid,需要先配置好吧login云函数，如果已经配置好了，获取用户的openid之后，开始步骤： 数据库操作API:https://de...
微信小程序投票系统微信小程序云开发实现的投票微信小程序系统源码.zip
05-27
微信小程序投票系统微信小程序云开发实现的...瀑布流展示，排名，活动发布等功能排名，活动发布等功能活动发布等功能微信小程序投票系统微信小程序云开发实现的投票微信小程序系统。瀑布流展示，排名，活动发布等功能
基于微信小程序云开发实现的交友小程序源码.zip
05-23
【微信小程序云开发详解】 微信小程序作为腾讯推出的一种轻量级的应用开发平台，以其便捷的开发流程、良好的用户体验和无需安装的特点受到了广大开发者和用户的喜爱。而“微信小程序云开发”则是微信为开发者提供的...
微信小程序 云开发模糊查询实现解析
10-16
微信小程序云开发模糊查询实现解析的知识点包括： 1. 微信小程序云开发的介绍： 微信小程序云开发是一种不需要传统后端服务即可构建应用程序的方式。开发者可以利用云开发提供的数据库、云函数、存储和计算能力，...
《微信小程序云开发》教学大纲+教学进度表+教案.pdf
07-02
《微信小程序云开发》是一门针对软件工程专业和计算机科学与技术等相关专业的选修课程，旨在教授学生如何利用微信小程序的云开发功能进行全栈式应用开发。这门课程不仅涵盖了微信小程序的基础知识，还深入讲解了云...
小程序云技术开发微信小程序打卡定位签到系统源代码小程序云开发本科毕业设计.zip
05-27
小程序云技术开发微信小程序打卡定位签到系统源代码.小程序云技术开发微信小程序打卡定位签到系统源代码.小程序云技术开发微信小程序打卡定位签到系统源代码.小程序云技术开发微信小程序打卡定位签到系统源代码.小...
微信小程序学习——数据库的初始化及数据处理
m0_71233415的博客
11-15 678
使用云开发进行数据库的初始化及数据的插入
微信小程序开发
Neko_Miya的博客
03-20 304
标题 "navigationBarBackgroundColor": "#FFC0CB" 标题背景颜色 "navigationBarTitleText":"第一个小程序" 标题栏名字 "navigationBarTextStyle":"white" 标题字体等颜色 底部导航栏 "tabBar":{ "color":"#f60", 未被选中时字体颜色 "selectedColor":"#38f", 被选中时字体颜色 "backgroundColo...
微信小程序的学习（4）本地存储
weixin_46013619的博客
03-07 232
这里继续昨日内容，完成本地存储状态，实现收藏了，下次点进来还是收藏的状态。 首先用到这个，这个代表着将数据存储在指定的key中，这里这种方法是异步的api， 我们先思考： 1。这个东西需要什么：key，data，success 这个data就是我们保存的状态，也就是data中的isCollected: false 这样是可以保存状态了，但是这样做每个页面都是这个状态，做不到一一对应 2。所以我...
微信小程序 实现合并对象 concat
hexiaoniao的博客
03-21 1万+
var arr = []; varphotolistdata={} varresultdata={} arr = photolistdata.concat(resultdata);
微信小程序实现云数据库数组字段的追加数组
weixin_35753291的博客
01-10 1886
在微信小程序中使用云数据库时，可以使用 db.collection(collentionName).doc(docId).update({ arrayField: db.command.push(array) }) 方法来向数组字段追加数组。其中 collentionName 是集合的名称，docId 是文档的 id，arrayField 是数组字段的名称，array 是要追加的数组。 例如，如果...
微信小程序云开发（云数据库的使用）
weixin_44144773的博客
05-02 1万+
微信小程序云开发、云数据库、云数据库用法、操作模板
Vue使用query传参Boolean类型，刷新之后转换为String问题
最新发布
q879936814的博客
09-12 209
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值