springboot苍穹外卖实战:八、开发小程序准备工作+入门案例+小程序微信用户登录流程+商品浏览

开发小程序准备工作

官方网址:https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

1、微信小程序注册
注册地址:https://mp.weixin.qq.com/wxopen/waregister?action=step1

2、 完善小程序信息
登录小程序后台:https://mp.weixin.qq.com/
完善小程序信息、小程序类目
在开发管理那查看小程序的 AppID

3、下载开发者工具
下载地址: https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
创建小程序项目
springboot苍穹外卖实战:八、开发小程序准备工作+入门案例+小程序微信用户登录流程+商品浏览_第1张图片

设置不校验合法域名
springboot苍穹外卖实战:八、开发小程序准备工作+入门案例+小程序微信用户登录流程+商品浏览_第2张图片

小程序入门案例

小程序项目结构介绍

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
springboot苍穹外卖实战:八、开发小程序准备工作+入门案例+小程序微信用户登录流程+商品浏览_第3张图片
**app.js:**必须存在,主要存放小程序的逻辑代码

**app.json:**必须存在,小程序配置文件,主要存放小程序的公共配置

app.wxss: 非必须存在,主要存放小程序公共样式表,类似于前端的CSS样式

对小程序主体三个文件了解后,其实一个小程序又有多个页面。比如说,有商品浏览页面、购物车的页面、订单支付的页面、商品的详情页面等等。那这些页面会放在哪呢?
会存放在pages目录。

每个小程序页面主要由四个文件组成:
springboot苍穹外卖实战:八、开发小程序准备工作+入门案例+小程序微信用户登录流程+商品浏览_第4张图片
**js文件:**必须存在,存放页面业务逻辑代码,编写的js代码。

**wxml文件:**必须存在,存放页面结构,主要是做页面布局,页面效果展示的,类似于HTML页面。

**json文件:**非必须,存放页面相关的配置。

**wxss文件:**非必须,存放页面样式表,相当于CSS文件。

编写代码

注意,需要把详情中的调试基础库改到2.27.x以下。且保持后端和redis服务端服务都在运行

index.wxml


  {{msg}}
   
    
    
    {{nickName}}
  
   
    
    授权码:{{code}}
  
   
    
    响应结果:{{result}}
  

index.js

Page({
  data:{
    msg:'hello world',
    avatarUrl:'',
    nickName:'',
    code:'',
    result:''
  },
  getUserInfo:function(){
    wx.getUserProfile({
      desc: '获取用户信息',
      success:(res) => {
        console.log(res)
        this.setData({
          avatarUrl:res.userInfo.avatarUrl,
          nickName:res.userInfo.nickName
        })
      }
    })
  },
  wxlogin:function(){
    wx.login({
      success: (res) => {
        console.log("授权码:"+res.code)
        this.setData({
          code:res.code
        })
      }
    })
  },
  sendRequest:function(){
    wx.request({
      url: 'http://localhost:8080/user/shop/status',
      method:'GET',
      success:(res) => {
        console.log("响应结果:" + res.data.data)
        this.setData({
          result:res.data.data
        })
      }
    })
  }})

上传代码

点击上传按钮后填写版本号等资料,提示上传成功后进到微信公众平台,打开版本管理页面。可以看到当前开发版本中有刚刚上传的版本。
如果真的想要上线,需提交审核,变成审核版本,审核通过后,进行发布,变成线上版本。
一旦成为线上版本,这就说明小程序就已经发布上线了,微信用户就可以在微信里面去搜索和使用这个小程序了。

微信登陆

流程图

springboot苍穹外卖实战:八、开发小程序准备工作+入门案例+小程序微信用户登录流程+商品浏览_第5张图片

  1. 小程序端,调用wx.login()获取code,就是授权码。
  2. 小程序端,调用wx.request()发送请求并携带code,请求开发者服务器(自己编写的后端服务)。
  3. 开发者服务端,通过HttpClient向微信接口服务发送请求,并携带appId+appsecret+code三个参数。
  4. 开发者服务端,接收微信接口服务返回的数据,session_key+opendId等。opendId是微信用户的唯一标识。
  5. 开发者服务端,自定义登录态,生成令牌(token)和openid等数据返回给小程序端,方便后绪请求身份校验。
  6. 小程序端,收到自定义登录态,存储storage。
  7. 小程序端,后绪通过wx.request()发起业务请求时,携带token。
  8. 开发者服务端,收到请求后,通过携带的token,解析当前登录用户的id。
  9. 开发者服务端,身份校验通过后,继续相关的业务逻辑处理,最终返回业务数据。

接口设计 与表结构设计

官方接口:
springboot苍穹外卖实战:八、开发小程序准备工作+入门案例+小程序微信用户登录流程+商品浏览_第6张图片
springboot苍穹外卖实战:八、开发小程序准备工作+入门案例+小程序微信用户登录流程+商品浏览_第7张图片
springboot苍穹外卖实战:八、开发小程序准备工作+入门案例+小程序微信用户登录流程+商品浏览_第8张图片

当用户第一次使用小程序时,会完成自动注册,把用户信息存储到user表中。

字段名 数据类型 说明 备注
id bigint 主键 自增
openid varchar(45) 微信用户的唯一标识
name varchar(32) 用户姓名
phone varchar(11) 手机号
sex varchar(2) 性别
id_number varchar(18) 身份证号
avatar varchar(500) 微信用户头像路径
create_time datetime 注册时间

**说明:**手机号字段比较特殊,个人身份注册的小程序没有权限获取到微信用户的手机号。如果是以企业的资质
注册的小程序就能够拿到微信用户的手机号。

代码开发

见资源即可。

你可能感兴趣的:(spring,boot,小程序,微信,后端,java,springboot)