2). 完善小程序信息
登录小程序后台：https://mp.weixin.qq.com/
两种登录方式选其一即可
完善小程序信息、小程序类目
查看小程序的 AppID
3). 下载开发者工具
下载地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
扫描登录开发者工具
创建小程序项目
熟悉开发者工具布局
设置不校验合法域名
注：开发阶段，小程序发出请求到后端的Tomcat服务器，若不勾选，请求发送失败。
1.3 入门案例 1.3.1 小程序目录结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
文件说明：
app.js：必须存在，主要存放小程序的逻辑代码
app.json：必须存在，小程序配置文件，主要存放小程序的公共配置
app.wxss: 非必须存在，主要存放小程序公共样式表，类似于前端的CSS样式
对小程序主体三个文件了解后，其实一个小程序又有多个页面。比如说，有商品浏览页面、购物车的页面、订单支付的页面、商品的详情页面等等。那这些页面会放在哪呢？
会存放在pages目录。
每个小程序页面主要由四个文件组成：
文件说明：
js文件：必须存在，存放页面业务逻辑代码，编写的js代码。
wxml文件：必须存在，存放页面结构，主要是做页面布局，页面效果展示的，类似于HTML页面。
json文件：非必须，存放页面相关的配置。
wxss文件：非必须，存放页面样式表，相当于CSS文件。
1.3.2 编写和编译小程序
1). 编写
进入到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
})
}
})
}})
2). 编译
点击编译按钮
3). 运行效果
点击获取用户信息
