微信小程序云开发3

10. 首页用户列表渲染以及多账号调试

    index.js

    // miniprogram/pages/index/index.js
    //创建一个app对象，可以用app对象获取app.js中的userInfo
    const app = getApp()
    
    //创建数据库,初始化数据库
    const db = wx.cloud.database()
    
    Page({
    
     /**
      * 页面的初始数据
      */
     data: {
      imgUrls:[
         '../../images/photo/01.jpg',
         '../../images/photo/02.jpg',
         '../../images/photo/03.jpg',
       ],
       listData:[]
     },
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
     // 返回用户的部分信息field
     onReady: function () {
       db.collection('users').field({
         userPhoto:true,
         nickName:true,
         links:true
       }).get().then((res)=>{
         console.log(res.data);
         this.setData({
           listData:res.data
         });
       });
     },
    
    })
    

    index.wxml

    <!--miniprogram/pages/index/index.wxml-->
    <view class="index">
      <!-- 轮播图 -->
      <swiper class="index-swiper" indicator-dots="{{true}}"
            autoplay="{{true}}" circular="{{true}}">
            <block wx:for="{{imgUrls}}" wx:key="index">
              <swiper-item>
                <image src="{{item}}" class="swiper-item" width="355" hight="150"/>
              </swiper-item>
            </block>
          </swiper>
        <!--标题  -->
        <view class="index-tab">
          <view class="active">推荐</view>
          <view >最新</view>
        </view>
        <!--图片 -->
        <view class="index-list">
          <view class="index-list-item" wx:for="{{listData}}">
            <image mode = "aspectFill"  src="{{item.userPhoto}}" ax:ksy="{{index}}"></image>
            <view class="index-list-text">
              <text>{{item.nickName}}</text>
              <text>
                <text class="iconfont icondianzan"></text>
                <text>{{item.links}}</text>
              </text>
            </view>
          </view>
        </view>
    </view>
    

    多账号调试

    1. 在微信公众平台后台添加开发项目成员
    2. 选择标题栏，工具–>多账号调试

11. 点赞功能，使用bindtap绑定点击函数

    index.js

    handleLinks(ev){
        let id = ev.target.dataset.id;
        db.collection('users').doc(id).update({
          data:{
            links:5
          }
        }).then((res)=>{
          console.log(res);
        });
      }
    

    index.wxml

     <view class="index-list-item" wx:for="{{listData}}"  wx:key="{{index}}">
            <image mode = "aspectFill"  src="{{item.userPhoto}}"  />
            <view class="index-list-text">
              <text>{{item.nickName}}</text>
              <text  bindtap="handleLinks" data-id="{{item._id}}">
                <text class="iconfont icondianzan"></text>
                <text>{{item.links}}</text>
              </text>
            </view>
          </view>
    

    此时因为数据库后台权限的原因，给别人点赞后不能修改其后台的数据，需要使用云函数update

    updata下的index.js

    // 云函数入口文件
    const cloud = require('wx-server-sdk')
    
    cloud.init({
      env: cloud.DYNAMIC_CURRENT_ENV
    })
    const db = cloud.database()
    
    // 云函数入口函数
    exports.main = async (event, context) => {
      try {
        return await db.collection(event.collection).doc(event.doc)
        .update({
          data: {
            // 扩展运算符
            ...event.data
          },
        })
      } catch(e) {
        console.error(e)
      }
    }
    

    index.js

    handleLinks(ev){
        let id = ev.target.dataset.id;
        
        wx.cloud.callFunction({
          name:'update',
          data:{
            collection:'users',
            doc:id,
            data:{
              links:6
            }
          }
        }).then((res)=>{
          console.log(res);
        });
    
      }
    

    优化：使用字符串传递点赞数据，以及数据显示前台更新，需要将点赞列表更新一次

    index.js

    // miniprogram/pages/index/index.js
    
    //创建数据库,初始化数据库
    const db = wx.cloud.database()
    //获取db command库的函数
    const _ = db.command
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
       imgUrls:[
          '../../images/photo/01.jpg',
          '../../images/photo/02.jpg',
          '../../images/photo/03.jpg',
        ],
        listData:[ ]
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      // 返回用户的部分信息field
      onReady: function () {
        db.collection('users').field({
          userPhoto:true,
          nickName:true,
          links:true
        }).get().then((res)=>{
          // console.log(res.data)
          this.setData({
            listData:res.data
          });
        });
      },
    
      handleLinks(ev){
        let id = ev.target.dataset.id;
        
        wx.cloud.callFunction({
          name:'update',
          data:{
            collection:'users',
            doc:id,
            data:"{links: _.inc(1)}"
          }
        }).then((res)=>{
          console.log(res);
          //  成功会返回1
          let updated  = res.result.stats.updated;
          // 这里更新一次刷新一次所有点赞列表
          if (updated){
            let cloneListData = [...this.data.listData];
            for (let i = 0; i < cloneListData.length; i++){
              if (cloneListData[i]._id == id) {
                cloneListData[i].links++;
              }
            }
            this.setData({
              listData:cloneListData
            });
          }
        });
    
      }
    })
    

    update下的index.js

    // 云函数入口文件
    const cloud = require('wx-server-sdk')
    
    cloud.init({
      env: cloud.DYNAMIC_CURRENT_ENV
    })
    const db = cloud.database()
    //获取db command库的函数
    const _ = db.command
    
    // 云函数入口函数
    exports.main = async (event, context) => {
      try {
    
        // 前台转化为字符串送到后台，然后后台解析字符串运算后传回前台
        if(typeof event.data == 'string'){
          // eval把字符串转化为json
          event.data = eval('('+event.data+')');
        }
    
        return await db.collection(event.collection).doc(event.doc)
        .update({
          data: {
            // 扩展运算符
            ...event.data
          },
        })
      } catch(e) {
        console.error(e)
      }
    }
    

    优化：解决昵称过长以及点赞次数过多的问题（利用wxs模块）

    unitFormat.wxs

    var unitFormat = function(number){
      if (number >= 1000) {
        // toFixed保留一位小数
        number = (number / 1000).toFixed(1) + 'K';
      }
      return number;
    };
    
    module.exports.unitFormat = unitFormat;
    

    wordSplit.wxs

    
    var wordSplit = function(word){
      if( word.length > 4 ){
        word = word.substring(0,4) + '...';
      }
      return word;
    };
    // 对外接口
    module.exports.wordSplit = wordSplit;
    

    index.wxml

    <!--miniprogram/pages/index/index.wxml-->
    
    <wxs src="../../utils/wordSplit.wxs" module="m1" />
    <wxs src="../../utils/unitFormat.wxs" module="m2" />
    <view class="index">
      <!-- 轮播图 -->
      <swiper class="index-swiper" indicator-dots="{{true}}"
            autoplay="{{true}}" circular="{{true}}">
            <block wx:for="{{imgUrls}}"  wx:key="{{index}}">
              <swiper-item>
                <image src="{{item}}" class="swiper-item" width="355" hight="150"/>
              </swiper-item>
            </block>
          </swiper>
        <!--标题  -->
        <view class="index-tab">
          <view class="active">推荐</view>
          <view >最新</view>
        </view>
        <!--图片 -->
        <view class="index-list">
          <view class="index-list-item" wx:for="{{listData}}"  wx:key="{{index}}">
            <image mode = "aspectFill"  src="{{item.userPhoto}}"  />
            <view class="index-list-text">
              <text>{{m1.wordSplit(item.nickName)}}</text>
              <text  bindtap="handleLinks" data-id="{{item._id}}">
                <text class="iconfont icondianzan"></text>
                <text>{{m2.unitFormat(item.links)}}</text>
              </text>
            </view>
          </view>
    
        </view>
        
    </view>