## 完整代码
```
<template>
<view style="padding:35px;">
<!-- #ifdef MP-WEIXIN -->
<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<button type="primary" open-type="getUserInfo" @click="getuserinfoh5appwx" withCredentials="true">微信登录</button>
<!-- #endif -->
<button style="margin-top:50px;">手机号码登录</button>
</view>
</template>
<script>
var _self;
export default {
data:{
},
onLoad:function(){
_self = this;
},
methods:{
getuserinfoh5appwx: function(){
uni.login({
success:function(res2){
console.log(JSON.stringify(res2) + '2');
uni.getUserInfo({
success:function(res3){
console.log(JSON.stringify(res3) + '3');
}
})
},
});
},
getuserinfo : function(res1){
console.log(JSON.stringify(res1) + '1');
//如果只需要opendid 和非加密数据至此登录完成
//此处连接数据库利用openid 就可以进行登录环节
//免费的视频教程 http://www.hcoder.net/tutorials/info_141.html
uni.login({
success:function(res2){
console.log(JSON.stringify(res2) + '2');
//获取 sessionKey
uni.request({
url : 'https:///hoa.hcoder.net/xcxencode/?c=sk&appid=wxbb7f9f1f2c6f4f33&secret=739b970b832f0df158f54c494a08e440&code='+res2.code,
success:function(res3){
console.log(JSON.stringify(res3) + '3');
//记录到本地
try{
uni.setStorageSync('sk', res3.data.session_key);
uni.setStorageSync('openid', res3.data.openid);
}catch(e){
//TODO handle the exception
}
uni.hideLoading();
//以下步骤可以获取加密信息,需要授权
//获取加密信息
if(!res1.detail.iv){
uni.showToast({
title:"您取消了授权,登录失败",
icon:"none"
});
return false;
}
try{
var sessionKey = uni.getStorageSync('sk');
console.log(sessionKey);
}catch(e){
//TODO handle the exception
}
uni.request({
/**
* $appid = $_POST['appid'];
$sessionKey = $_POST['sessionKey'];
$encryptedData = $_POST['encryptedData'];
$iv = $_POST['iv'];
*/
method : "POST",
url : 'https:///hoa.hcoder.net/xcxencode/',
header : {'content-type':'application/x-www-form-urlencoded'},
data : {
appid : "wxbb7f9f1f2c6f4f33",
sessionKey : sessionKey,
iv : res1.detail.iv,
encryptedData : res1.detail.encryptedData
},
success:function(res4){
//"{"openId":"oS6of0V0rdp9nY_BuvCnQUasOHYc","nickName":"深海",
//"gender":1,"language":"zh_CN","city":"Xi'an","province":"Shaanxi",
//"country":"China","avatarUrl":"https://wx.qlogo.cn/mmopen/vi_32/7iags6YD4enyU"
console.log(JSON.stringify(res4) + '4');
//至此登录完成
}
});
}
})
}
});
}
}
}
</script>
<style>
</style>
```
- 第1讲 : 创建项目、部署 VUE 、入口页面布局
- 第2讲,快速开始第一个项目
- 第3讲 : uni-app 开发规范及目录结构
- 第4讲 : uni-app 页面样式与布局
- 第5讲 : uni-app 配置文件 - pages.json
- 第6讲 : 配置文件 - manifest.json
- 第7讲 : uni-app 页面生命周期
- 第8讲 : uni-app 模板语法 - 数据绑定
- 第9讲Class 与 Style 绑定 (动态菜单激活示例)
- 第10讲 : uni-app 事件处理、事件绑定、事件传参
- 第11讲 : uni-app 组件 - 基础组件
- 第12讲 : uni-app 组件 - 表单组件
- 第13讲 : uni-app 组件 - navigator(导航)及页
- 第14讲 : uni-app 组件 - 媒体组件
- 第15讲 : uni-app 组件 - 地图组件
- 第16讲 : uni-app 接口 - 网络请求
- 第17讲 : uni-app 接口 - 从本地相册选择图片或使
- 第18讲 : uni-app 上传(图片上传实战)
- 第19讲 : uni-app 接口 - 数据缓存
- 第20讲 : uni-app 设备相关
- 第21讲 : uni-app 交互反馈
- 第22讲 : uni-app 设置导航条
- 第23讲 : uni-app 导航(页面流转)
- 第24讲 : uni-app 下拉刷新
- 第25讲 : uni-app 上拉加载更多
- 第26讲 : uni-app 第三方登录(小程序篇)
- 第27讲 : uni-app 登录(h5+ app 篇)
- 第28讲 : 自定义组件创建及使用