美文网首页
商城demo

商城demo

作者: 粑粑八成 | 来源:发表于2019-03-26 09:20 被阅读0次

一、项目搭建

  1. 选择腾讯云node模板,填写appID
  2. 创建四个页面,分别是首页,购物车,订单和个人中心,创建tabbar进行跳转
"tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-sel.png"
      },
      {
        "pagePath": "pages/order/order",
        "text": "订单",
        "iconPath": "images/order.png",
        "selectedIconPath": "images/order-sel.png"
      },
      {
        "pagePath": "pages/trolley/trolley",
        "text": "购物车",
        "iconPath": "images/trolley.png",
        "selectedIconPath": "images/trolley-sel.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "个人中心",
        "iconPath": "images/user.png",
        "selectedIconPath": "images/user-sel.png"
      }
    ]
  },
  1. wx.showLoading,wx.hideLoading,wx.showToast, wx.navigateBack()回到上一个页面
  2. 如果想在其他地方使用tabBar,需要注意官方文档中的Tips:通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirectTo)所到达的页面,即使它是定义在 tabBar 配置中的页面,也不会显示底部的 tab 栏。应该使用wx.switchTab跳转到tabBar页面,注意:这个方法会关闭其他所有非tabBar页面。
  3. 用户登录,基于微信做第三方登陆认证
    小程序登录时序图(小程序开发者文档)
    基于微信的登录认证

首先,当用户授权登录小程序后,我们将在小程序中调用 wx.login() 。由于小程序运行在微信之中,该方法会直接向微信请求一个登录凭证。

接着,小程序客户端将凭证发送到服务器。

接收到登录凭证后,服务端向微信服务端发起一个请求,使用从客户端获得的登录凭证换取微信用户的 唯一标识(openid) 和 会话密钥(session_key) 。

出于安全性的考虑,我们应当将获得的 openid 与 session_key 保存在服务端,然后生成一个与之关联的 3rd_session,并返回给小程序客户端。

客户端收到并保存 3rdsession_id 。

此后,客户端在需要访问私有资源的请求中(比如:查看自己的订单,提交订单等),都加上这个 ID 。服务端通过 3rd_session 验明用户身份,并查找到关联的 openid 和 session_key。

  1. 逻辑流程
    是否有有个人信息授权 -》 是否首次登陆(可能是查cookie) -》 微信第三方认证
doQcloudLogin({ success, error }) {
    // 调用 qcloud 登陆接口
    qcloud.login({
      success: result => {
        if (result) {
          let userInfo = result
          success && success({
            userInfo
          })
        } else {
          // 如果不是首次登录,不会返回用户信息,请求用户信息接口获取
          this.getUserInfo({ success, error })
        }
      },
      fail: () => {
        error && error()
      }
    })
  },
  1. bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

相关文章

  • 商城demo

    一、项目搭建 选择腾讯云node模板,填写appID 创建四个页面,分别是首页,购物车,订单和个人中心,创建tab...

  • Go语言开发之商城模块API

    年前学习beeg开发,写了一份商城模块API的demo,地址商城API,涵盖以下知识点:1、jwt生成token2...

  • (iOS)商城筛选

    商城筛选的功能的Demo,实现如下功能:【CollectionView】初步展示数据,Section展开/折叠,以...

  • 小程序商城固定表头

    主要是利用了position:sticky属性 根据uni商城里hx-shop写的demo

  • 环信移动客服商城demo摘取简易demo

    前言 因为之前用的某一个客服实在不行,经常收不到信息推送。所以只能更改,看了几家准备选择环信的客服。但是个人感觉环...

  • 关于环信客服的集成与使用

    1.环信客服的集成: APP接入 [环信客服云文档]下载商城Demo, 复制 HelpDesk.framework...

  • 2021-07-17

    做demo: 画画板记事本食物商城 使用kotlin开发完整项目 需要技术: Navigation组件:https...

  • vue项目无法正常启动的问题

    昨天在gitbub上down了一个购物商城的demo,发现启动不了,报错如下 npm错误:缺少script:dev...

  • 安卓框架图

    三天写了一个商城小demo没有与后台交互,没有支付,订单和购物车都是保存本地的https://github.com...

  • iOS 商品规格选择View

    最近做了两三个商城类的项目,由于时间匆忙,商品规格选择的View都是网上找的Demo,用起来总归不是那么顺手,这两...

网友评论

      本文标题:商城demo

      本文链接:https://www.haomeiwen.com/subject/bgbkvqtx.html