AI 助理
备案控制台
开发者社区 数据库 文章 正文

【微信小程序开发实战项目】——个人中心页面的制作

2024-07-18 284
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
云数据库 Tair（兼容Redis），内存型 2GB
推荐场景：
通过缓存加速数据库访问
云数据库 RDS MySQL，集群系列 2核4GB
推荐场景：
搭建个人博客
Redis 开源版，标准版 2GB
推荐场景：
搭建游戏排行榜
简介： 本文介绍了如何设计和实现一个网上花店的微信小程序，包括个人中心、我的订单和我的地址等功能模块。个人中心让用户能够查看订单历史、管理地址和与客服互动。代码示例展示了`own.wxml`、`own.wxss`和`own.js`文件，用于构建个人中心界面，包括用户信息、订单链接、收藏、地址、客服和版本信息。我的订单部分展示了订单详情，包括商品图片、名称、销量、价格和订单状态，用户可以查看和管理订单。我的地址功能允许用户输入和编辑收货信息，包括联系人、性别、电话、城市和详细地址。每个功能模块都附有相应的WXML和WXSS代码，以及简洁的样式设计。

在这里插入图片描述

👨‍💻个人主页：@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏：微信小程序开发

⭐🅰⭐

-

[video(video-SIAFbOCb-1719905431985)(type-csdn)(url-https://live.csdn.net/v/embed/405645)(image-https://ucc.alicdn.com/images/user-upload-01/img_convert/4d308d4899bf76af224a89b818236925.jpeg)(title-花店小程序)]

@[TOC]

⭐前言⭐
-

  在这个数字化的时代，鲜花不仅仅是情感的传递者，更是美好生活的点缀。为了让您能更便捷地选购心仪的花束，我们精心打造了这款网上花店微信小程序。
  鲜花，承载着爱与祝福，是浪漫与温馨的象征。然而，传统的花店购买方式往往受到时间和空间的限制，让您无法在第一时间将这份美好传递给重要的人。我们深知您对鲜花的热爱和对便捷服务的需求，因此致力于通过技术的力量，为您创造一个全新的购花体验。
  这个网上花店微信小程序，将汇聚来自世界各地的优质鲜花品种，以精美的图片和详细的介绍呈现在您眼前。无论您是为了庆祝生日、表达爱意，还是为了装饰家居，只需轻点屏幕，就能轻松挑选到最适合您的那束花。
  同时，我们还提供贴心的配送服务，确保每一朵鲜花都能以最鲜活的姿态送达您指定的地点。在这里，您不仅能享受到便捷的购物流程，还能感受到我们对品质和服务的执着追求。
  让我们一同开启这充满花香的数字之旅，让鲜花的美丽与温暖，随时伴您左右。

在这里插入图片描述

🎶 一、鲜花的个人中心模块

  在这繁花似锦的数字花园中，个人用户中心是独属于您的温馨角落。
它如同您与鲜花世界之间的专属纽带，精心记录着您每一次与美丽邂逅的点点滴滴。在这里，您的喜好、您的选择、您的每一次心动都被悉心珍藏。
  个人用户中心是您个性化体验的集中展现，它清晰呈现您的订单历史，让您随时回顾那些充满温馨与惊喜的时刻。您的收货地址被安全保管，确保每一束鲜花都能准确无误地送达您的怀抱。
  这里也是您与我们互动交流的窗口，您的建议和反馈如同璀璨星光，指引着我们不断改进与提升，为您创造更优质的服务。
它不仅是一个功能区域，更是您在鲜花之旅中的贴心伙伴，陪伴您走过每一个与花相伴的美好瞬间。

(1)own.wxml

<!-- 用户列表选项 -->
<scroll-view class='scbg' scroll-y='true'>
  <view class="parent_catainer">
    <!-- 头部 -->
    <!-- style="background-image: url('/images/persons/mind_head_bg.jpg');" -->
    <view class="container_head">
      <image class="head_img" src="/images/bar/back.jpg"></image>
      <view class="head_pers_info" bindtap="head_pers_info">
        <view class="head_pic">
          <image class="head_pic_content" mode="aspectFit" src="/images/bar/lemon.jpg" bindtap="user"></image>
        </view>
        <view class="inf_content">
          <text class="user_info" value="{
   
   {value}}">昌</text>
          <text class="family_info_ct_phone">花坊会员</text>
        </view>
      </view>
    </view>
    <view class="userItemListView">
    </view>
    <view class="userItemListView">
      <view class="my_priview_md" bindtap="openmyorder">
        <image class="my_priview" src="/images/bar/a.png"></image>
        <text>我的订单</text>
        <view class="arrow"></view> 
      </view>
      <view class="my_priview_md" bindtap="myaid">
        <image class="my_priview" src="/images/bar/b.png"></image>
        <text>我的收藏</text>
        <view class="arrow"></view>
      </view>

      <view class="my_priview_md" bindtap="mycollection">
        <image class="my_priview" src="/images/bar/c.png" ></image>
        <text>我的地址</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="contact">
        <image class="my_priview" src="/images/bar/d.png" ></image>
        <text>联系客服</text>
        <view class="arrow"></view>
      </view>
      <view class="my_priview_md" bindtap="myfriend">
        <image class="my_priview" src="/images/bar/e.png" ></image>
        <text> 关于版本号</text>
        <view class="arrow"></view>
      </view>
    </view>


  </view>
</scroll-view>

(2)own.wxss

/* 用户列表选项样式 */
page {
   
   
  width: 100%;
  height: 100%;
  background:#f0f0f0;
}
.parent_catainer{
   
   
  background:#f0f0f0;
}

/* 头部背景图片 */
.container_head{
   
   
  height: 370rpx;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.head_img {
   
   
  position: absolute;
  width: 100%;
  height: 370rpx;
}

.head_pers_info{
   
   
   height: 200rpx;
   width: 100%;
   margin-bottom: 50rpx;
   justify-content: left;
   display: flex;
   align-items: center;
   flex-direction: row;
   position: absolute;
}

.head_pic{
   
   
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  color: #ffffff;
  align-items: center;
  display: flex;
  justify-content: center;
}
.head_pic_content{
   
   
  position: absolute;
  width: 110rpx;
  height: 110rpx;
  border-radius: 55rpx;
  background-color: white;
}

.head_pic{
   
   
  margin-left: 5%;
}

.inf_content{
   
   
  display: flex;
  flex-direction: column;
  margin-left: 10rpx;
  align-items: flex-start;
  justify-content: center;
   color: #ffffff;
   padding-bottom: 5rpx;
}

.user_info{
   
   
  text-align: left;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.family_info_ct_phone{
   
   
  text-align: center;
  justify-content: center;
  font-size: 28rpx;
  margin-bottom: 2rpx;
}

.family_info_ct{
   
   
  text-align: center;
  justify-content: center;
  font-size: 28rpx;
  margin-bottom: 2rpx;
  width: 500rpx;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  text-overflow: ellipsis;
}

.userItemListView{
   
   
  background: #fff;
  padding: 0 0rpx;
  margin: 24rpx 0;
}

.userItemListView > view{
   
   
  height: 94rpx;
  line-height: 94rpx;
  padding-left: 50rpx;
  border-bottom: 1rpx solid #F1F1F1;
  position: relative;
}

/* 移除最后一个元素的下边框 */
.userItemListView > view:last-child{
   
   
  border: none;
}

.my_priview_md{
   
   
  display: flex;
  align-items: center;
}

.my_priview{
   
   
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}

.arrow{
   
   
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid #999;
  border-right: 4rpx solid #999;
  /* 旋转45度 */
  transform: rotate(45deg);
  /* 调整位置 */
  position: absolute;
  right: 30rpx;
  top: 38rpx;
}

.userItemListView text{
   
   
  font-size: 30rpx;
}

.last_view{
   
   
   background:#f0f0f0;
   width: 100%;
   height:1200rpx;
}

(3)own.js

Page({
   
   
  contact:function(e){
   
   
wx.makePhoneCall({
   
   
  phoneNumber: '18478292935',
})
  },
  myaid:function(e){
   
   
wx.navigateTo({
   
   
  url: '/pages/collection/collection',
})
  },
  myfriend:function(e){
   
   
    wx.navigateTo({
   
   
      url: '/pages/won/won',
    })
      },
      user:function(e){
   
   
        wx.navigateTo({
   
   
          url: '/pages/users/users',
        })
          },
          openmyorder:function(e){
   
   
            wx.navigateTo({
   
   
              url: '/pages/order/order',
            })
          },

  /**
   * 页面的初始数据
   */
  data: {
   
   
    value:'陶继昌'
  },
  mycollection(){
   
   
    wx.navigateTo({
   
   
      url: '/pages/address/address',
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
   
   

    var that = this;
  },

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

  },

  // 退出登录
  logout: function () {
   
   

    wx.showModal({
   
   
      content: '确定退出登录吗？',
      cancelColor: '#666666',//666666
      confirmColor: '#666666',
      success(res) {
   
   
        if (res.confirm) {
   
   
          wx.reLaunch({
   
   
            url: '/pages/login/login'
          })
          console.log('用户点击确定')
        } else if (res.cancel) {
   
   
          console.log('用户点击取消')
        }
      },
      fail: function (res) {
   
    },//接口调用失败的回调函数
      complete: function (res) {
   
    },//接口调用结束的回调函数（调用成功、失败都会执行
    })

  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
   
   
    wx.hideHomeButton();
    wx.hideShareMenu();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
   
   

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
   
   

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
   
   

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
   
   

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
   
   

  }
})

运行结果：
在这里插入图片描述

🎶 二、我的订单

  在您的鲜花之旅中，“我的订单”犹如一本珍贵的记录册，镌刻着您与美丽花朵之间的每一次约定。
  这里是您与心仪鲜花邂逅的见证之地，每一个订单都承载着您的期待与喜悦。从您精心挑选的那一刻起，到鲜花即将送达您手中的每一步，都在“我的订单”中留下清晰的足迹。
  它不仅是一串数字和状态的罗列，更是一个个关于爱、祝福和美好的故事篇章。您可以随时回溯，重温那些为特别的人或特别的时刻准备鲜花的温馨瞬间。
  “我的订单”为您提供了清晰的脉络和安心的保障，让您对每一次鲜花的选购都了如指掌，尽享便捷与放心。

（1）order.wxml


<scroll-view class="chanpins" scroll-y="true">

<view class="danhao">
   单号：201808081102 | 时间：2024/6/7 11:44:19
</view>   
<view class="chanpin">
  <image class="chanpin-img" src="/images/hua/hua7.jpg"></image>
  <view class="chanpin-info">
    <view class="name">昆明金丝竹桃</view>
    <view class="sales">月售：11 件 / 库存：121件
    </view>
    <view class="price">￥：129.00</view>
  </view>
  <view class="chanpin-num">
    <text class="mytext" hidden=""> 2 件 </text>
  </view>
</view>
<view class="chanpin">
  <image class="chanpin-img" src="/images/hua/hau6.jpg"></image>
  <view class="chanpin-info">
    <view class="name">昆明桃红金芍</view>
    <view class="sales">月售：231 件 / 库存：11件
    </view>
    <view class="price">￥：329.00</view>
  </view>
  <view class="chanpin-num">
    <text class="mytext" hidden=""> 1 件 </text>
  </view>
</view>

<view class="jiesuan" >
   <text>【已付款】共3件商品， 产品金额：¥458 (运费￥6) </text>
</view>   
<view class="caozuo">
     <button  size='mini'>取消订单</button>

</view>   

</scroll-view>

（2）order.wxss

/*全部订单*/

.chanpins{
   
   
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background:  white;
}
.danhao{
   
    
  font-size: 12px; color: gray;
  height: 100rpx; margin-left: 20rpx;
  border-bottom: 1rpx solid #ECECEC; 
  background: white;
  display: flex;
  align-items: center;   
}
.chanpin{
   
   
  display: flex;
  padding: 15rpx;
  height: 130rpx;
  border-bottom: 1rpx solid #ECECEC; 
  background: white; 
}
.chanpin-img{
   
   
  width: 120rpx;
  height: 120rpx;
}
.chanpin-info{
   
   
  display: flex;
  flex-direction:  column;
  align-items:  flex-start;
  flex: 1;
  margin-left: 20rpx;
}
.name{
   
   
  font-size: 30rpx; 
}
.sales{
   
   
  font-size: 25rpx;
  color: #ACACAC;text-align: left;
}
.price{
   
   
  font-size: 30rpx;
  color: red;text-align: left;
}
.chanpin-num{
   
   
  height: 50rpx;
  display: flex;
  margin-top: 30rpx;
  margin-right: 30rpx;
  line-height: 50rpx;
  font-size: 40rpx; 
}
.jiesuan{
   
   
  font-size: 13px; color: gray;
  height: 100rpx; margin-left: 20rpx;
  border-bottom: 1rpx solid #ECECEC; 
  background: white;
  display: flex;
  align-items: center;   
}
.caozuo{
   
   
  height: 100rpx;
  border-bottom: 1rpx solid #ECECEC; 
  background: white;
  display: flex;
  align-items: center;   
}

结果展示：
在这里插入图片描述

🎶 三、我的地址

  在这繁花簇拥的世界里，“我的地址”是您与芬芳约定的归属之地。
  它如同指引鲜花使者的明灯，确保每一束饱含深情与美好的花朵，都能精准无误地抵达您的心之所向。
  无论是温馨的家宅，还是繁忙的办公之地，亦或是那个充满回忆的特别角落，您只需在此轻松设定，我们就能让鲜花的芬芳如约而至。
  “我的地址”是您与鲜花之间的信任纽带，是连接您和美好瞬间的重要桥梁。让我们用精准的送达，为您的生活增添更多绚烂色彩。

（1）address.wxml

<view class="content"> 
  <view class="hr"></view>
  <view class="bg">
    <form bindsubmit="formSubmit" bindreset="formReset">
      <view class="item">
        <view class="name">联系人</view>
        <view class="value">
          <input type="text" placeholder="收货人姓名" placeholder-class="holder" name="userName" value= "{
   
   {userName}}"/>
        </view>
      </view>
      <view class="line"></view>
      <view class="item">
        <view class="name">性别</view>
        <view class="value">
        <radio-group class="radin-group" bindchange="radioChange" name="sex">
          <radio value="0" checked="{
   
   {sex==0}}">先生</radio>
          <radio value="1" checked="{
   
   {sex==1}}">女士</radio>
        </radio-group>
        </view>
      </view>
      <view class="line"></view>
      <view class="item">
        <view class="name">手机号码</view>
        <view class="value">
          <input type="text" placeholder="您的联系电话" placeholder-class="holder" name="phone" value= "{
   
   {phone}}"/>
        </view>
      </view>
      <view class="line"></view>
      <view class="item">
        <view class="name">所在城市</view>
        <view class="value">
        <picker mode="region" bindchange="bindRegionChange" value="{
   
   {region}}" custom-item="{
   
   {customItem}}" name="city">
          <view class="picker">
            {
   
   {
   
   region[0]}}，{
   
   {
   
   region[1]}}，{
   
   {
   
   region[2]}}
          </view>
        </picker>
        </view>
        </view>
          <view class="line"></view>
          <view class="item">
            <view class="name">收货地址</view>
            <view class="value">
              <input type="text" placeholder="选择收货地址" placeholder-class="holder" name="address" bindtap= "chooseLocation" value="{
   
   {address}}" />
            </view>

          </view>
          <view class="line"></view>
          <view class="item">
            <view class="name">门牌号</view>
            <view class="value">
              <input type="text" placeholder="请输入楼号门牌号详细信息" placeholder-class="holder" name="num" value="{
   
   {num}}"/>
            </view>
          </view>
          <view class="line"></view>
          <button class="btn" form-type="submit">保存</button>
          <view class="tip">{
   
   {
   
   tip}}</view>
        </form>
    </view>
</view>

（2）address.wxss

.content{
   
   
  background-color: #F9F9F8;
  height: 700px;
  font-family: "Microsoft YaHei";
}
.hr{
   
   
  height: 10px;
}
.bg{
   
   
  background-color: #ffffff;
  padding:10px;
}
.item{
   
   
  display: flex;
  flex-direction: row;
  height: 60px;
  line-height: 60px;
  align-items: center;
}
.name{
   
   
  width:20%;
  margin-left: 10px;
  font-size: 14px;
  font-weight: bold;
}
.value{
   
   
  width: 80%;
  line-height: 60px;
  margin-left: 10px;
  font-size: 14px;
}
.holder{
   
   
  color:#AEAEAE;
  font-size: 14px;
}
.line{
   
   
  border: 1px solid #cccccc;
  opacity: 0.2;
}
.btn{
   
   
  margin-top: 20px;
  background-color: #FF0000;
  color: #ffffff;
}
.tip{
   
   
margin-top:10px;
font-size: 12px;
color: #D53E37;
text-align: center;
}

（3）address.js

var app = getApp();
Page({
   
   
  data: {
   
   
    index: 0,
    tip: '',
    address: '',        //显示的地址
    region: ['湖南省', '常德市', '鼎城区'],
    customItem: '全部',
    addressId: '',
    sex: '',
    phone: '',
    num: '',
    userName: '',
  },
  onLoad: function (e) {
   
   
    var addressId = e.addressId;
    if (addressId != null &&addressId != '') {
   
   
    this.setData({
   
    addressId: addressId });
    this.loadAddressInfo(addressId);
    }
  },
  loadAddressInfo: function (addressId) {
   
           //获取地址详情
    var that = this;
    wx.cloud.callFunction({
   
                    //调用云函数
      name: 'getAddressInfo',
      data:{
   
   
        _id: addressId
      },
      success: res => {
   
   
        console.log('[云函数] [getAddressInfo] 地址信息: ', res);
        var addresses = res.result.data;
        that.setData({
   
    userName: addresses[0].personName });
        that.setData({
   
    sex: addresses[0].gender });
        that.setData({
   
    phone: addresses[0].contactNumber });
        that.setData({
   
    num: addresses[0].houseNumber });
        that.setData({
   
    address: addresses[0].address });
        var cities = addresses[0].city;
        var region = cities.split(',');
        that.setData({
   
    region: region });
      },
      fail: err => {
   
   
        console.error('[云函数] [getAddressInfo] 调用失败', err);
      }
    })
  },
  bindPickerChange: function (e) {
   
   
    this.setData({
   
   
      index: e.detail.value
    });
  },
  formSubmit: function (e) {
   
   
    var citys = e.detail.value.city;             //所在城市
    var that = this;
    var personName = e.detail.value.userName;     //联系人
    var gender = e.detail.value.sex;             //性别
    var contactNumber = e.detail.value.phone;     //手机号
    var address = e.detail.value.address;         //收货地址
    var houseNumber = e.detail.value.num;         //门牌号
    var citys = e.detail.value.city;             //所在城市

    var city = citys[0];
    if (citys[1] != '全部') {
   
   
      city += ',' + citys[1];
    }
    if (citys[2] != '全部') {
   
   
      city += ',' + citys[2];
    }
    var addressId = this.data.addressId;
    if (addressId == null || addressId == '') {
   
   
      //新增地址
      that.addressAdd(personName, gender, contactNumber, address, houseNumber, city);
    }else{
   
   
      //修改地址
      that.addressEdit(personName, gender, contactNumber, address, houseNumber, city, addressId);
    }
  },
  //新增地址
  addressAdd: function (personName, gender, contactNumber, address, houseNumber, city){
   
    
    wx.cloud.callFunction({
   
        //调用云函数
      name: 'addressAdd',
      data: {
   
   
        personName: personName,
        gender: gender,
        contactNumber: contactNumber,
        address: address,
        houseNumber: houseNumber,
        city: city
      },
      success: res => {
   
   
        console.log('[云函数] [addressAdd] 地址添加返回信息: ', res);
        var errMsg = res.result.errMsg;
        if (errMsg == "collection.add:ok") {
   
   
          wx.showToast({
   
   
            title: '成功',
            icon: 'success',
            duration: 2000,
            success: function () {
   
   
              wx.reLaunch({
   
   
                url: '../address/address'
              })
            }
          })
        }
      },
      fail: err => {
   
   
        console.error('[云函数] [addressAdd] 调用失败', err);
      }
    })
  },
  addressEdit: function (personName, gender, contactNumber, address, houseNumber, city, addressId) {
   
                                   //新增地址
    wx.cloud.callFunction({
   
        //调用云函数
      name: 'addressEdit',
      data: {
   
   
        personName: personName,
        gender: gender,
        contactNumber: contactNumber,
        address: address,
        houseNumber: houseNumber,
        city: city,
        _id: addressId
      },
      success: res => {
   
   
        console.log('[云函数] [addressEdit] 地址修改返回信息: ', res);
        var errMsg = res.result.errMsg;
        if (errMsg == "document.update:ok") {
   
   
          wx.showToast({
   
   
            title: '成功',
            icon: 'success',
            duration: 2000,
            success: function () {
   
   
              wx.reLaunch({
   
   
                url: '../address/address'
              })
            }
          })
        }
      },
      fail: err => {
   
   
        console.error('[云函数] [addressEdit] 调用失败', err);
      }
    })
  },
  chooseLocation: function () {
   
   
    var page = this;
    wx.chooseLocation({
   
   
      type: 'gcj02',
      success: function (res) {
   
   
        var address = res.name;
        var lat = res.latitude
        var lon = res.longitude
        page.setData({
   
   
          address: address
        })
      }
    })
  },
  bindRegionChange: function (e) {
   
   
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
   
   
      region: e.detail.value
    })
  }
})

结果展示：
在这里插入图片描述

结束语🥇

以上就是微信小程序之列表渲染
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

文章标签：
小程序
搜索推荐
安全
开发者
关键词：
微信开发
微信小程序开发
微信开发页面
微信小程序开发页面
微信页面
曼亿点
目录
相关文章
邹荣乐
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
邹荣乐
706 7
邹荣乐
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
邹荣乐
753 1
邹荣乐
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）
邹荣乐
355 3
邹荣乐
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
邹荣乐
255 1
yuanzhengme
|
2月前
|
存储 小程序 安全
微信的开发管理都需要配置什么？
【10月更文挑战第17天】微信的开发管理都需要配置什么？
yuanzhengme
37 0
邹荣乐
|
2月前
|
JavaScript 小程序 开发者
uni-app开发实战：利用Vue混入(mixin)实现微信小程序全局分享功能，一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战：利用Vue混入(mixin)实现微信小程序全局分享功能，一键发送给朋友、分享到朋友圈、复制链接
邹荣乐
478 0
邹荣乐
|
2月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
邹荣乐
671 0
疯狂的猿
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
疯狂的猿
36 0
在线课堂+工具组件小程序uniapp移动端源码
千寻简
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中，版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新，提示用户并提供立即更新选项，自动下载更新内容，并在更新完成后重启小程序以应用新版本。适用于微信小程序，确保用户始终使用最新版本。以下是实现步骤： ### 实现步骤 1. **创建更新方法**：在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**：添加编译模式并选择成功状态进行模拟测试。
千寻简
58 0
微信小程序更新提醒uniapp
胡东旭
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件，兼容 H5、小程序和 APP，提供丰富的注释和简洁代码，适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
胡东旭
117 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目

数据库

热门文章

最新文章

  • 1
    什么场景应该用 MongoDB ？
  • 2
    MongoDB索引原理
  • 3
    MongoDB 4.0 事务实现解析
  • 4
    MongoDB分布式架构演进
  • 5
    PostgreSQL in 与 = any 的SQL语法异同与性能优化
  • 6
    如何搭建阿里云RDS PostgreSQL数据库的物理备库
  • 7
    MongoDB Sharded Cluster 路由策略
  • 8
    ApacheCon 2019 Cassandra分会各大议题深度剖析，解读cassandra前沿工作
  • 9
    AnalyticDB(原ADS)分区列的最佳实践
  • 10
    ALICloudDB for PostgreSQL 试用报告 - 4 水平分库 之 节点扩展
  • 1
    【MySQL基础篇】全面学习总结SQL语法、DataGrip安装教程
    9
  • 2
    一文了解多云原生的现代化实时数仓 SelectDB Cloud
    11
  • 3
    【MySQL基础篇】MySQL概述、Windows下载MySQL8.0超详细图文安装教程
    10
  • 4
    【MySQL基础篇】MySQL约束语法
    12
  • 5
    【MySQL基础篇】盘点MySQL常用四大类函数
    10
  • 6
    MySQL基础篇-多表查询（隐式/显式内连接、左/右外连接、自连接查询、联合查询、标量/列/行/表子查询）
    13
  • 7
    语音交友小程序APP开发/交友小程序软件开发/PC独立后台管理+会员
    13
  • 8
    结合圈层营销策略，打造稳定可靠的圈子app系统，圈子小程序！
    21
  • 9
    获取数据库中字段的数据作为下拉框选项
    22
  • 10
    Java 并发编程——volatile 关键字解析
    20

    • 相关课程

    更多
  • IoT小程序框架课程
  • C++ 入门教程开发文档
  • 软件供应商进阶管理实操
  • 云上建站快速入门-博客、论坛、CMS、电子商务网站统统搞定
  • 阿里云RPA（机器人流程自动化）- 初级入门（可视化）

    • 相关电子书

    更多
  • 微信月活9亿的高效业务运维之道
  • 微信SQLite数据库损坏恢复实践
  • 微信PaxosStore简介

    • 相关实验场景

    更多
  • 搭建微信小程序（AMD 8代）
  • 1分钟SAE部署Web在线游戏
  • 搭建微信小程序
  • 快速搭建移动端可视化看板
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS