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

程序准备工作+入门案例+小程序微信用户登录流程+商品浏览"/>

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

开发小程序准备工作

官方网址：=&lang=zh_CN

1、微信小程序注册
注册地址：=step1

2、 完善小程序信息
登录小程序后台：/
完善小程序信息、小程序类目
在开发管理那查看小程序的 AppID

3、下载开发者工具
下载地址： .html
创建小程序项目

设置不校验合法域名

小程序入门案例

小程序项目结构介绍

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

**app.js：**必须存在，主要存放小程序的逻辑代码

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

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

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

每个小程序页面主要由四个文件组成：

**js文件：**必须存在，存放页面业务逻辑代码，编写的js代码。

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

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

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

编写代码

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

index.wxml

<view class="container"><view>{{msg}}</view><view><button type="default" bindtap="getUserInfo">获取用户信息</button><image style="width: 100px;height: 100px;" src="{{avatarUrl}}"></image>{{nickName}}</view><view><button type="primary" bindtap="wxlogin">微信登录</button>授权码：{{code}}</view><view><button type="warn" bindtap="sendRequest">发送请求</button>响应结果：{{result}}</view>
</view>

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})}})}})

上传代码

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

微信登陆

流程图

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. 开发者服务端，身份校验通过后，继续相关的业务逻辑处理，最终返回业务数据。

接口设计 与表结构设计

官方接口：

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

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

代码开发

见资源即可。