论坛项目小程序和h5登录

项目中安装uview

---

出现npm安装uview 直接报错：

创建一个package.json配置文件在进行安装。cmd到项目。初始化一个package.json文件（vue项目的配置文件）
npm init --yes
安装uview

项目点击关注

---

进入管页面，需要验证用户是否登录

查用户是否存在登录缓存（token）

使用官方内置缓存API

uni.setStorage   异步接口
uni.setStorageSync   同步接口

调试对应缓存位置

在检测不到用户登录信息跳转登录界面需要使用导航跳转

//获取token令牌值uni.getStorage({key: "_token",success: (res) => {},fail(error) {//进这个位置没有token//跳转登录uni.navigateTo({url: "/pages/login"})}})

navigateTo  跳转page界面  可以传递参数
switchTab   跳转tabbar  不可以传递参数//其他属性参考文档

uniapp登录界面效果展示根据不同平台切换

---

uniapp官方提供了条件编译。
根据平台不同编译不同的模板或者代码或者配置

uni-app能实现一套代码、多端运行，核心是通过编译器 + 运行时实现的：

为什么编译出不同的效果：

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

条件编译的写法：

以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。#ifdef  %****%
//代码#endif

<template><view class="login"><!-- #ifdef MP-WEIXIN --><button>按钮</button><!-- #endif --><!-- #ifndef MP-WEIXIN --><button>按钮1</button><button>按钮2</button><!-- #endif --></view>
</template><script>export default {mounted() {// 微信小程序 可执行// #ifdef MP-WEIXINconsole.log("小程序");// #endif// #ifndef  MP-WEIXIN console.log("其他");// #endif}}
</script><style>/* #ifdef MP-WEIXIN *//* #endif */
</style>

page.json 文件配置条件编译

// #ifdef MP-WEIXIN"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},//#endif// #ifndef MP-WEIXIN"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","navigationStyle": "custom"},//#endif

小程序登录

---

登录流程—原生小程序文档搜索

登录凭证校验。通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程

用户点击登录按钮授权登录

代码演示：

         //小程序用户登录// #ifdef MP-WEIXIN//获取临时登录凭证uni.login({success(res) {console.log(res);}})// #endif

uniapp中获取用户的头像和昵称

官网：

    //获取用户的基本信息uni.getUserInfo({success(user) {console.log(user);}})//返回的是匿名数据

uni.getUserProfile(OBJECT)
获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo。
该API仅支持微信小程序端（基础库2.10.4-2.27.0版本）

    uni.getUserProfile({desc: "用户登录",success(user) {console.log(user);}})//代码书写上  获取用户信息  不放在login临时凭证中

    uni.getUserProfile({desc: "用户登录",success(user) {console.log(user);uni.login({success(res) {console.log(res);}})}})

H5端登录

---

手机+验证码登录

使用条件编译来处理兼容

点击获取验证码

//获取验证码async getCode() {//获取验证码if (!this.mobile.length) {this.$refs.uToast.show({type: 'default',message: "请输入手机号！",})return;}//检测手机号是否为空if (!/^[1][3|4|5|7|8][0-9]{9}$/.test(this.mobile)) {//手机号不合法this.$refs.uToast.show({type: 'default',message: "请输入正确手机号！",})return;}let res = await getcodeMsg(this.mobile);this.$refs.uToast.show({type: 'default',message: res.msg,})},

点击登录按钮登录发送ajax

async userLogin() {//h5登录// #ifndef MP-WEIXINlet {mobile,code} = this;let result = await mobileCodeLogin(mobile, code);console.log(result);// #endif//小程序用户登录// #ifdef MP-WEIXINuni.getUserProfile({desc: "用户登录",success: (user) => {//获取用户头像和昵称let {avatarUrl,nickName} = user.userInfo;//获取临时登录凭证uni.login({success: (res) => {//获取临时codelet {code} = res;this.sendMsg(avatarUrl, nickName, code);}})}})// #endif},