当前位置:首页 > JS逆向 > 【微信小程序开发】程序开发(微信登录前后端流程)

【微信小程序开发】程序开发(微信登录前后端流程)

一叶知秋2024-05-12 04:58:01JS逆向8

程序开发

微信小程序的目录结构

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

文件 作用
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保存,下次进行校验完成其中的业务访问

小程序发布

在这里插入图片描述
首先点击上传,将微信小程序上传到微信服务器中,这时就能在微信小程序平台看到上传的开发版本:
在这里插入图片描述
点击提交审核就会进行审核,审核成功会成功上线

扫描二维码推送至手机访问。

版权声明:本站部分文章来自互联网采集,请查看免责申明

本文链接:https://blog.yyzq.team/post/338314.html

分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。