【微信小程序开发】程序开发（微信登录前后端流程）

程序开发

微信小程序的目录结构

一个小程序主体部分由三个文件组成（必须放在项目的根目录）

文件	作用
app.js	小程序逻辑
app.json	小程序公共配置
app.wxss	小程序公共样式表

小程序包含一个描述整体程序的app和多个描述各自页面的page

一个小程序页面由四个文件组成：

文件类型	作用
js	页面逻辑
wxml	页面结构
json	页面配置
wxss	页面样式表

开发简单入门

其中index.wxml就类似于三件套中的html

<!--index.wxml-->
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    Weixin
  </view>
</scroll-view>

其中的<view>标签就相当于<div>标签
比如我改成：

  <view class="container">
    <view>
        {{msg}}
    </view>
  </view>

数据需要在js文件中进行配置：

Page({
  data:{
    msg:'hello,world'
  }
})

• 实现获取微信用户的头像和昵称

我们将这个函数写到js文件的一个函数中：

在wxml中：

    <view>
     <button bindtap="getUserInfo" type="primary">获取用户信息</button>
    </view>

在js文件中：

  getUserInfo(){
    wx.getUserProfile({
      desc: '获取用户信息',
      success: (res)=>{
        console.log(res.userInfo)
      }
    })
  }

• 实现微信登录，获取微信用户的授权码

  UserLogin(){
    wx.login({
      success: (res) => {
        console.log(res.code)
      },
    })
  }

• 在微信小程序中使用ajax发送请求

我们先准备一个按钮绑定请求事务：

    <view>
      <button bindtap="Qing" type="primary">发送请求</button>
    </view>

进行逻辑处理：

  Qing(){
    wx.request({
      url: 'http://localhost:8080/user/shop/status',
      method: 'GET',
      success: (res)=>{
        console.log(res.data)
      }
    })
  }

微信登录流程

在前后端开发过程中，在小程序首先拿到用户的一次性授权码，发送给后端服务器，服务器通过请求参数一次性授权码，APP唯一id，app密钥向微信服务器发送请求，返回用户唯一id以及token，有后端进行操作处理，返回用户端token保存，下次进行校验完成其中的业务访问

小程序发布

首先点击上传，将微信小程序上传到微信服务器中，这时就能在微信小程序平台看到上传的开发版本：

点击提交审核就会进行审核，审核成功会成功上线