附录6-5 黑马优购项目-我的与后端本地化

最新推荐文章于 2024-10-22 13:35:22 发布

Suyuoa

最新推荐文章于 2024-10-22 13:35:22 发布

阅读量521

点赞数 3

分类专栏：微信小程序开发文章标签：小程序

本文链接：https://blog.csdn.net/potato123232/article/details/138386910

版权

微信小程序开发专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1 我的

2 后端本地化

1 我的

tarbar我的只有这两个页面

其中未登录页面中只有一键登录有用，其他都是写死的，一键登录的功能仅仅是切换到登录的页面

目前微信小程序和微信用户的信息是脱钩的（之前的wx.getUserProfile与wx.getUserInfo都不能正常使用了），你看一下其他的小程序也会发现这个问题，微信的昵称不会出现在小程序中了。目前一键登录一般是用服务商提供的本机一键登录功能，有特定的API。确认用户身份后你再使用你小程序的后台用户数据库信息

本机一键登录这个API会有费用，但是会很方便。还有下面两种登录方式

邮箱：可以用邮箱登录，邮箱的验证码是可以免费发的，缺点就是用户用起来麻烦些
手机验证码：API需要一些费用，相比本机一键登录还是一键登录更方便些

这个页面中除了退出登录按钮，其他所有都是写死的

wxml

<!--pages/my/my.wxml-->
<!-- 如果hasUserInfo为false不存在就展示登录 -->
<view class="my-container">
<view wx:if="{{!hasUserInfo}}">
  <view class="login-container">
    <!-- 提示登录的图标 -->
    <image src="/src/login_logo.png" mode="" style="width:100px;height:100px;"/>
    <!-- 登录按钮 -->
    <button type="primary" class="btn-login" bind:tap="click_login_btn">一键登录</button>
    <!-- 登录提示 -->
    <view class="tips-text">登录后尽享更多权益</view>
  </view>
  <view style="height:30vh;background-color:white;"></view>
</view>
<!-- 如果hasUserInfo为true存在就展示用户信息 -->
<view wx:else>
  <view class="my-userinfo-container">
    <!-- 头像昵称区域 -->
    <view class="top-box">
      <image src="{{userinfo.avatar}}" class="avatar"></image>
      <view class="nickname">{{userinfo.username}}</view>
    </view>
    <view class="panel-list">
      <!-- 第一个面板 -->
      <view class="panel">
        <!-- panel 的主体区域 -->
        <view class="panel-body">
          <!-- panel 的 item 项 -->
          <view class="panel-item">
            <text>8</text>
            <text>收藏的店铺</text>
          </view>
          <view class="panel-item">
            <text>14</text>
            <text>收藏的商品</text>
          </view>
          <view class="panel-item">
            <text>18</text>
            <text>关注的商品</text>
          </view>
          <view class="panel-item">
            <text>84</text>
            <text>足迹</text>
          </view>
        </view>
      </view>
      <!-- 第二个面板 -->
      <view class="panel">
        <!-- 面板的标题 -->
        <view class="panel-title">我的订单</view>
        <!-- 面板的主体 -->
        <view class="panel-body">
          <!-- 面板主体中的 item 项 -->
          <view class="panel-item">
            <image src="/src/my-icons/icon1.png" class="icon"></image>
            <text>待付款</text>
          </view>
          <view class="panel-item">
            <image src="/src/my-icons/icon2.png" class="icon"></image>
            <text>待收货</text>
          </view>
          <view class="panel-item">
            <image src="/src/my-icons/icon3.png" class="icon"></image>
            <text>退款/退货</text>
          </view>
          <view class="panel-item">
            <image src="/src/my-icons/icon4.png" class="icon"></image>
            <text>全部订单</text>
          </view>
        </view>
      </view>
      <!-- 第三个面板 -->
      <view class="panel">
        <view class="panel-list-item">
          <text>收货地址</text>
          <image src="/src/arrowright.png" mode="" style="width:15px;height:15px;"/>
        </view>
        <view class="panel-list-item">
          <text>联系客服</text>
          <image src="/src/arrowright.png" mode="" style="width:15px;height:15px;"/>
        </view>
        <view class="panel-list-item" bind:tap="click_logout_btn">
          <text>退出登录</text>
          <image src="/src/arrowright.png" mode="" style="width:15px;height:15px;"/>
        </view>
      </view>
    </view>
  </view>
</view>
</view>

wxss

/* pages/my/my.wxss */
.login-container {
  /* 登录盒子的样式 */
  height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;
}

.login-container::after {
  content: ' ';
  display: block;
  position: absolute;
  width: 100%;
  height: 40px;
  left: 0;
  bottom: 0;
  background-color: white;
  border-radius: 100%;
  transform: translateY(50%);
}

.login-container .btn-login {
  width: 90%;
  border-radius: 100px;
  margin: 15px 0;
  background-color: #c00000;
}

.login-container .tips-text {
  font-size: 12px;
  color: gray;
}

page{
  background-color: #f4f4f4;
}

/* 用户信息样式 */
.my-userinfo-container {
  height: 100%;
  /* 为整个组件的结构添加浅灰色的背景 */
  background-color: #f4f4f4;
  /* background-color: green; */
}
.my-userinfo-container .top-box {
  height: 400rpx;
  background-color: #c00000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.my-userinfo-container .top-box .avatar {
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 45px;
  border: 2px solid white;
  box-shadow: 0 1px 5px black;
}

.my-userinfo-container .top-box .nickname {
  color: white;
  font-weight: bold;
  font-size: 16px;
  margin-top: 10px;
}

/* 第一个面板的样式 */
.panel-list {
  padding: 0 10px;
  position: relative;
  top: -10px;
}
.panel-list .panel {
  background-color: white;
  border-radius: 3px;
  margin-bottom: 8px;
}
.panel-list .panel .panel-body {
  display: flex;
  justify-content: space-around;
}

.panel-list .panel .panel-body .panel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  font-size: 13px;
  padding: 10px 0;
}

/* 第二个面板的样式 */
.panel-list {
  padding: 0 10px;
  position: relative;
  top: -10px;
}
.panel-list .panel {
  background-color: white;
  border-radius: 3px;
  margin-bottom: 8px;
}
.panel-list .panel .panel-title {
  line-height: 45px;
  padding-left: 10px;
  font-size: 15px;
  border-bottom: 1px solid #f4f4f4;
}

.panel-list .panel .panel-body {
  display: flex;
  justify-content: space-around;
}
.panel-list .panel .panel-body .panel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  font-size: 13px;
  padding: 10px 0;
}
.panel-list .panel .panel-body .panel-item .icon {
  width: 35px;
  height: 35px;
}

/* 第三个面板区域的样式 */
.panel-list-item {
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 0 10px;
}

// pages/my/my.js
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store.js'

Page({
  /**
   * 页面的初始数据
   */
  data: {
    hasUserInfo: false,
  },

  click_login_btn() {
    this.setData({hasUserInfo:true,'userinfo':{username:'电话号',avatar:'/src/login_logo.png'}})
    wx.setStorageSync('userinfo', {username:'电话号',avatar:'/src/login_logo.png'})

    if (this.data.need_navigate_back) {
      wx.showToast({
        title: '登录成功',
        mask:true,
        icon:'none'
      })
      setTimeout(()=>{
        wx.hideToast()
        wx.switchTab({
          url: '/pages/cart/cart',
          success:()=>{
            this.cancel_need_navigate_back()
          }
        })
      },800)
    }
    
  },
  click_logout_btn() {
    wx.showModal({
      title: '提示',
      content: '确认退出登录吗',
      complete: (res) => {
        if (res.cancel) {
          
        }
    
        if (res.confirm) {
          this.setData({hasUserInfo:false,userinfo:''})
          wx.setStorageSync('userinfo', '')
        }
      }
    })
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields:['need_navigate_back'],
      actions: ['set_cart_tabBar_badge','cancel_need_navigate_back']
    })
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 设置购物车tabBar上的徽标
    this.set_cart_tabBar_badge()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.setData({userinfo:wx.getStorageSync('userinfo') || ''})
    if (!Boolean(this.data.userinfo.username)) {
      this.setData({hasUserInfo:false})
    }
    else {
      this.setData({hasUserInfo:true,username:this.data.userinfo.username,avatar:this.data.userinfo.avatar})
    }
  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

2 后端本地化

网上的接口可能会挂掉，搞一个本地方便看小程序的样式，我用的是django做后端框架

urls.py

"""
URL configuration for Appendix6_heima_shop project.

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/5.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path

from . import views

urlpatterns = [
    path("admin/", admin.site.urls),
    # 子页面
    path("api/public/v1/goods/qsearch/", views.get_search_suggest_view),
    path("api/public/v1/goods/detail/", views.get_goods_deteal_view),
    path("api/public/v1/goods/search/", views.get_goods_list_view),
    # 首页
    path("api/public/v1/home/swiperdata/", views.get_home_swiper_data_view),
    path("api/public/v1/home/catitems/", views.get_home_navigation_data_view),
    path("api/public/v1/home/floordata/", views.get_home_floor_data_view),
    # 分类
    path("api/public/v1/categories/", views.get_category_data_view),
]

views.py

原本是应该把数据都搞下来放数据库里，那样就能100%复现，不过那样比较费时间。最后就只写死了一部分用于保留样式，有的接口内容不比较多，这里我仅展示一部分

from django.http import HttpResponse
from .settings import SERVER_SOCKET
import json

protocol_IP_port = 'http://' + SERVER_SOCKET

def get_search_suggest_view(request):
    return HttpResponse(json.dumps({
    "message": [
        {
            "goods_id": 50708,
            "goods_name": "小白熊奶瓶电子蒸汽消毒锅婴儿奶瓶消毒器高温蒸汽奶瓶消毒HL-0603"
        },
        {
            "goods_id": 50707,
            "goods_name": "yeaspring 婴儿奶瓶消毒器带烘干 多功能消毒锅 紫外线 奶瓶消毒柜 粉色"
        },
        {
            "goods_id": 50704,
            "goods_name": "格朗 奶瓶消毒锅 烘干器 尚品 GL X-6"
        },
        {
            "goods_id": 50702,
            "goods_name": "保修一年小白熊奶瓶消毒器带烘干/消毒锅HL-0681+多功能婴儿暖奶器HL-0607组合装"
        },
        {
            "goods_id": 50701,
            "goods_name": "安心妈妈奶瓶消毒器带烘干宝宝多功能蒸汽奶瓶消毒锅婴儿消毒柜"
        },
        {
            "goods_id": 50700,
            "goods_name": "小白熊奶瓶消毒器HL-0603 宝宝煮奶瓶消毒锅 婴儿奶瓶消毒器"
        },
        {
            "goods_id": 50699,
            "goods_name": "舒氏奶瓶消毒器 树枝状蒸汽通道消毒锅 环绕式杀菌智能烘干"
        },
        {
            "goods_id": 50698,
            "goods_name": "【新品上市】格朗奶瓶消毒器烘干蒸汽消毒锅 婴儿多功能宝宝消毒柜 GL X-11"
        },
        {
            "goods_id": 50697,
            "goods_name": "小白熊婴儿奶瓶消毒器带烘干婴儿奶瓶消毒锅小白熊奶瓶消毒 HL-0681"
        },
        {
            "goods_id": 50696,
            "goods_name": "小白熊 液晶版奶瓶消毒器 带烘干婴儿消毒锅 HL-0871"
        },
        {
            "goods_id": 50695,
            "goods_name": "飞利浦新安怡(AVENT)3合1电子蒸汽消毒锅"
        },
        {
            "goods_id": 50694,
            "goods_name": "Yeaspring宝宝奶瓶消毒器带烘干 消毒锅紫外线奶瓶消毒柜 内置烘干功能 蓝色"
        },
        {
            "goods_id": 50693,
            "goods_name": "phyll必尔紫外线婴儿奶瓶消毒器玩具宝宝消毒柜带烘干韩国进口多功能消毒锅"
        },
        {
            "goods_id": 50692,
            "goods_name": "bellecare宝宝奶瓶暖奶消毒器带烘干煮奶瓶锅消毒锅婴儿蒸汽杀菌不锈钢全自动烘干机"
        },
        {
            "goods_id": 50691,
            "goods_name": "【苏宁自营】 海尔（Haier）奶瓶消毒器 奶瓶奶嘴消毒 婴儿消毒锅 蒸煮温食 HBS-C03"
        },
        {
            "goods_id": 50690,
            "goods_name": "小白熊奶瓶消毒柜宝宝消毒锅 婴儿紫外线奶瓶消毒器带烘干HL-0636"
        },
        {
            "goods_id": 50689,
            "goods_name": "Goodbaby 好孩子 奶瓶蒸汽消毒锅 嫩芽绿"
        },
        {
            "goods_id": 50687,
            "goods_name": "新贝奶瓶消毒器带烘干 XB-8600 宝宝多功能暖奶蒸汽消毒锅婴儿消毒柜"
        },
        {
            "goods_id": 50686,
            "goods_name": "【赠13件】小白熊 宝宝奶瓶消毒器带烘干 奶瓶蒸汽消毒锅大容量HL-0681"
        },
        {
            "goods_id": 50685,
            "goods_name": "【苏宁自营】GL 格朗婴儿奶瓶消毒锅带烘干 多功能蒸气消毒锅 大容量宝宝消毒器 尚品X-6"
        }
    ],
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
},ensure_ascii=False))

def get_goods_list_view(request):
    return HttpResponse(json.dumps({
    "message": {
        "total": 5,
        "pagenum": "1",
        "goods": [
            {
                "goods_id": 43983,
                "cat_id": 5,
                "goods_name": "Amoi夏新曲面电视机55英寸 4K全高清安卓系统智能语音无线WiFi网络 48/50蓝光夜晶3D数字彩电 家用超薄窄边",
                "goods_price": 3078,
                "goods_number": 100,
                "goods_weight": 100,
                "goods_big_logo": "",
                "goods_small_logo": "",
                "add_time": 1516509839,
                "upd_time": 1516509839,
                "hot_mumber": 0,
                "is_promote": False,
                "cat_one_id": 1,
                "cat_two_id": 3,
                "cat_three_id": 5
            },
            {
                "goods_id": 43982,
                "cat_id": 5,
                "goods_name": "TCL 65Q960C 65英寸 哈曼卡顿 人工智能 金属超薄 64位34核 4K+HDR 原色量子点 曲面电视（灰色）",
                "goods_price": 9988,
                "goods_number": 100,
                "goods_weight": 100,
                "goods_big_logo": ""+ protocol_IP_port +"/static/get_goods_list_view/000000000826147951_1_800x800.jpg",
                "goods_small_logo": ""+ protocol_IP_port +"/static/get_goods_list_view/000000000826147951_1_400x400.jpg",
                "add_time": 1516509836,
                "upd_time": 1516509836,
                "hot_mumber": 0,
                "is_promote": False,
                "cat_one_id": 1,
                "cat_two_id": 3,
                "cat_three_id": 5
            },
            {
                "goods_id": 43972,
                "cat_id": 5,
                "goods_name": "红麒 32英寸电视 底座+上门安装调试 费用产品(本店电视安装专用)智能电视 曲面电视 高清（1366×768）",
                "goods_price": 120,
                "goods_number": 100,
                "goods_weight": 100,
                "goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070164812-000000000705355314_1_800x800.jpg",
                "goods_small_logo": ""+ protocol_IP_port +"/static/get_goods_list_view/000000000646151601_1_400x400.jpg",
                "add_time": 1516509757,
                "upd_time": 1516509757,
                "hot_mumber": 0,
                "is_promote": False,
                "cat_one_id": 1,
                "cat_two_id": 3,
                "cat_three_id": 5
            },
            {
                "goods_id": 43971,
                "cat_id": 5,
                "goods_name": "海尔(Haier)LQ55AL88S51 55英寸4K超高清智能网络曲面电视 语音智能遥控",
                "goods_price": 3999,
                "goods_number": 100,
                "goods_weight": 100,
                "goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000646151601_1_800x800.jpg",
                "goods_small_logo": ""+ protocol_IP_port +"/static/get_goods_list_view/0070164812-000000000705355314_1_400x400.jpg",
                "add_time": 1516509754,
                "upd_time": 1516509754,
                "hot_mumber": 0,
                "is_promote": False,
                "cat_one_id": 1,
                "cat_two_id": 3,
                "cat_three_id": 5
            },
            {
                "goods_id": 43970,
                "cat_id": 5,
                "goods_name": "Amoi夏新曲面电视机32英寸 特价 智能无线WiFi网络 曲屏3d蓝光数字电视 高清LED液晶彩电 30显示器卧室家用",
                "goods_price": 1059,
                "goods_number": 100,
                "goods_weight": 100,
                "goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070161385-000000000621507039_2_800x800.jpg",
                "goods_small_logo": ""+ protocol_IP_port +"/static/get_goods_list_view/000000000621507039_2_400x400.jpg",
                "add_time": 1516509726,
                "upd_time": 1516509726,
                "hot_mumber": 0,
                "is_promote": False,
                "cat_one_id": 1,
                "cat_two_id": 3,
                "cat_three_id": 5
            }
        ]
    },
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
},ensure_ascii=False))