微信小程序云开发4

最新推荐文章于 2024-08-15 18:19:19 发布

only a thought

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量103

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/m0_37852301/article/details/108905918

版权

前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

首页推荐以及最新功能实现(首页推荐根据links数排序)

推荐和最新列表前台的点击切换

index.wxml

 <!--标题  -->
    <view class="index-tab">
      <view class="{{current == 'links' ? 'active' : ' '}}" data-current="links" bindtap="handleCurrent">推荐</view>
      <view class="{{current == 'time' ? 'active' : ' '}}"  data-current="time"  bindtap="handleCurrent" >最新</view>
    </view>

index.js

 handleCurrent(ev){
    let current = ev.target.dataset.current;
    if (current == this.data.current){
      return false;
    }
    this.setData({
      current
    });
  }

首页进行排序显示

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:[ ],
    current:'links'
  },

  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
        });
      }
    });
  },
  handleCurrent(ev){
    let current = ev.target.dataset.current;
    if (current == this.data.current){
      return false;
    }
    this.setData({
      current
    });
    this.getListData();
  },
  getListData(){
    db.collection('users').field({
      userPhoto:true,
      nickName:true,
      links:true
    })
    // 根据current当前值进行排序
    .orderBy(this.data.current,'desc')
    .get().then((res)=>{
      // console.log(res.data)
      this.setData({
        listData:res.data
      });
    });
  }
})

详情页跳转渲染数据和样式布局

详情页跳转,利用navigateTo

index.js

  handleDetail(ev){
    let id = ev.target.dataset.id;
    wx.navigateTo({
      url:  '/pages/detail/detail?userId=' + id
    })
  }

index.wxml

 <!--图片 -->
    <view class="index-list">
      <view class="index-list-item" wx:for="{{listData}}"  wx:key="{{index}}">
        <image mode = "aspectFill"  src="{{item.userPhoto}}" data-id="{{item._id}}" bindtap="handleDetail"/>
        <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>

页面渲染与布局,传递了id唯一标识

detail.js

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

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 对象
    detail:{ },
    isFriend:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 页面跳转时传过来的值，index.js 的 handleDetail
    // console.log(options);
    let userId =  options.userId;
    db.collection('users').doc(userId).get().then((res)=>{
      this.setData({
        detail:res.data
      })
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },
})

detail.wxml

<!--miniprogram/pages/detail/detail.wxml-->
<view class="detail">
  <button wx:if="{{isFriend  }}">已是好友</button>
  <button wx:else>添加好友</button>

  <view class="detail-item">
    <text>昵称：</text>
    <text>{{detail.nickName}}</text>
  </view>
  <view class="detail-item">
    <text>头像：</text>
    <image src="{{detail.userPhoto}}" />
  </view>
  <view class="detail-item">
    <text>个性签名：</text>
    <text>{{detail.signature}}</text>
  </view>
  <view class="detail-item">
    <text>手机号：</text>
    <text>{{detail.phoneNumber}}</text>
  </view>
  <view class="detail-item">
    <text>微信号：</text>
    <text>{{detail.weixinNumber}}</text>
  </view>
</view>

调试技巧:在编译下可以设置添加编译模式,启动参数,这样可以先传一个固定参数进行调试

优化:可以打电话,和复制微信号,利用组件conponent完成功能

callPhone组件

callPhone.js

// components/callPhone/callPhone.js
Component({
  /**
   * 组件的属性列表
   */
  options:{
    styleIsolation:'apply-shared',
  },
  properties: {
    // 父子通信，与detail中的组件进行通信
    phoneNumber:String
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleCallPhone(){
      wx.makePhoneCall({
        phoneNumber: this.data.phoneNumber,
      })
    }
  }
})

callPhone.wxml

<!--components/callPhone/callPhone.wxml-->
<!-- 外部样式不会生效，需要在js中进行添加代码 -->
<text class="iconfont icondadianhua" bindtap="handleCallPhone"></text>

copyText组件

copyText.js

// components/copyText/copyText.js
Component({
  /**
   * 组件的属性列表
   */
  options:{
    styleIsolation:'apply-shared',
  },
  properties: {
    copyText:String
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleCopyText(){
      wx.setClipboardData({
        data: this.data.copyText,
        success (res) {
          wx.showToast({
            title: '复制成功',
          })
        }
      })
    }
  }
})

copyText.wxml

<!--components/copyText/copyText.wxml-->
<text class="iconfont iconfuzhi" bindtap="handleCopyText"></text>

detail.json

{
  "usingComponents": {
    "call-phone":"../../components/callPhone/callPhone",
    "copy-text":"../../components/copyText/copyText"  
  }
}

detail.wxml

 <view class="detail-item">
    <text>手机号：</text>
    <text class="detail-phoneNumber">{{detail.phoneNumber}} </text>
    <call-phone phoneNumber="{{detail.phoneNumber}}"/>
  </view>
  <view class="detail-item">
    <text>微信号：</text>
    <text class="detail-weixinNumber">{{detail.weixinNumber}} </text>
    <copy-text copyText="{{detail.weixinNumber}}"/>
  </view>

only a thought

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序云开发4

首页推荐以及最新功能实现(首页推荐根据links数排序)推荐和最新列表前台的点击切换index.wxml  <view class="index-tab"> <view class="{{current == 'links' ? 'active' : ' '}}" data-current="links" bindtap="handleCurrent">推荐</view> <view c..
复制链接

扫一扫

专栏目录