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

简单开发

程序开发
- 微信小程序的目录结构
- 开发简单入门
微信登录流程
小程序发布

程序开发

微信小程序的目录结构

一个小程序主体部分由三个文件组成（必须放在项目的根目录）
在这里插入图片描述

文件	作用
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)
      }
    })
  }