文章来自：https://www.jianshu.com/p/b2cb2a2c3313

作者：Neyo_凉

点击加入：PHP自学中心技术交流微信群

商务合作: 请加微信(QQ)：2230304070

视频教程分享

ThinkPHP6&&uniapp实战API接口多端开发链接：http://www.mano100.cn/thread-365-1-1.html

精选文章正文

多端开发，听名字就感觉不一样，一套代码，多端使用。适用于各个平台。是不是很高大上。市面上很多关于多端开发的框架，比较常用，流行的框架 uni-app，Chameleon(变色龙),taro这些，都可以支持多端，一套代码，8个平台支持常见平台分别是H5页面，安卓，微信小程序，百度小程序，支付宝小程序，头条小程序这几个平台下面以一个登陆的例子给大家介绍一下

一、创建项目、后端环境介绍

• 创建项目

1. 打开HBuilderX -> 新建 uniapp 项目;

2. 创建页面
   |_ index.vue 入口页面
   |_ write.vue 文章撰写页面
   |_ my.vue 账户中心页面

• 后端使用php+mysql
  完善底部导航栏

1. 下载图标, 图标地址 :https://pan.baidu.com/s/1iaWd6l_-cIJ3RNUsqNqFNQ

2. 将图标部署至 /static 目录;

3. 修改 page.json

"tabBar" : {        "color" : "#707070",        "selectedColor" : "#DE533A",        "list" : [            {                "pagePath" : "pages/index/index",                "text" : "文章",                "iconPath" : "static/nav1.png",                "selectedIconPath" : "static/nav1-a.png"            },            {                "pagePath" : "pages/write/write",                "text" : "写作",                "iconPath" : "static/nav2.png",                "selectedIconPath" : "static/nav2-a.png"            },            {                "pagePath" : "pages/my/my",                "text" : "我的",                "iconPath" : "static/nav3.png",                "selectedIconPath" : "static/nav3-a.png"            }        ]    }

4.修改项目名称

"globalStyle" : {    "navigationBarTextStyle" : "black",    "navigationBarTitleText" : "悦读",    "navigationBarBackgroundColor" : "#F8F8F8",    "backgroundColor" : "#F8F8F8"}

5.加载 colorUI 框架
https://github.com/weilanwl/ColorUI

二、封装全局登录检查函数并部署

1、在 main.js 中封装全局登录函数

Vue.prototype.checkLogin = function(backpage, backtype){    var SUID  = uni.getStorageSync('SUID');    var SRAND = uni.getStorageSync('SRAND');    var SNAME = uni.getStorageSync('SNAME');    var SFACE = uni.getStorageSync('SFACE');    if(SUID == '' || SRAND == '' || SFACE == ''){        uni.redirectTo({url:'../login/login?backpage='+backpage+'&backtype='+backtype});        return false;    }    return [SUID, SRAND, SNAME, SFACE];}

参数说明
backpage, backtype 2个参数分别代表：
backpage : 登录后返回的页面
backtype : 打开页面的类型[1 : redirectTo 2 : switchTab]
返回值说明
已经登录返回数组 [用户 id, 用户随机码, 用户昵称, 用户表情]

2、创建 login 页面
login 页面作为登录过度页面，多端登录都通过此页面完成!

3、在页面中应用登录检查函数，如 write.vue

<script>export default {    data() {return {        };    },onLoad : function() {var loginRes = this.checkLogin('../my/my', '2');if(!loginRes){return false;}    }}script>

return 或终止函数运行哦！

三、UNI-APP端使用微信登录原理和条件编译

<script>export default {    data() {return {        };    },onLoad:function(){//app 端微信登录// 手册位置 https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo// #ifdef APP-PLUS        uni.login({success: (res) => {// res 对象格式//{"code":"***",//"authResult":{//"openid":"***",//"scope":"snsapi_userinfo",//"refresh_token":"**",//"code":"****",//"unionid":"***",//"access_token":"***",//"expires_in":7200//},//"errMsg":"login:ok"}                uni.getUserInfo({success: (info) => {// info 对象格式// {"errMsg":"getUserInfo:ok",// "rawData":"...// "userInfo":{//"openId":"***",//"nickName":"***",//"gender":1,// "city":"Xi'an",// "province":"Shaanxi",// "country":"China",// "avatarUrl":"头像",// "unionId":"oU5Yyt_agt547zWyA0v0eLfFPqxo"//},"signature":""}// 与服务器交互将数据提交到服务端数据库                    },fail: () => {                        uni.showToast({title:"微信登录授权失败"});                    }                })            },fail: () => {                uni.showToast({title:"微信登录授权失败"});            }        })// #endif    }}script>

四、多平台多应用 统一登录微信关系

多平台统一登录之 unionID

通过获取用户基本信息接口，开发者可通过OpenID来获取用户基本信息，而如果开发者拥有多个应用，可使用以下办法通过UnionID机制来在多个应用进行用户帐号互通。
只要是同一个微信开放平台帐号下的公众号，用户的UnionID是唯一的。

换句话说，同一用户，对同一个微信开放平台帐号下的不同应用，UnionID是相同的。
此前的OpenID机制，每个微信号对应每个应用有唯一的OpenID，所以不同应用之间是不能共享用户的，现在有了UnionID就可以了。

APP端获取 unionID
使用 uni.login 即可；

小程序端获取 unionID

步骤 :

1、配置小程序 appid (此appid 在微信开放平台已经绑定)；
2、使用 uni.login 登录时会获取 code，用 code 换取 seesion_key;
3、在获取用户信息函数中获取到加密信息；
4、利用 seesion_key 及加密信息在服务端解密获取 unionID

php 后端注意事项

需要开启 php_openssl 扩展

前端实现过程代码

export default {    data() {        return {

        };    },

    methods:{        // #ifdef MP-WEIXIN        getUserInfo : (info) => {            //加密数据            var encryptedData = info.mp.detail.encryptedData;            var iv            = info.mp.detail.iv;            info              = info.mp.detail.userInfo;            //info            //userInfo {"nickName":"深海","gender":1,...avatarUrl":"https://7tdPvkPaJlkaLFFbLAffGVApluZdanLkDVplNlAhq1EJA/132"}            //与服务器交互进行解密            uni.request({                url: _self.apiServer+'member&m=wxaes',                method: 'POST',                header: {'content-type' : "application/x-www-form-urlencoded"},                data: {                    session_key   : session_key,                    encryptedData : encryptedData,                    iv            : iv                },                success: res => {                    console.log(res);                    //此处可以成功获取 unionId 利用 unionId 完成登录即可                },                fail: () => {},                complete: () => {}            });        }    },    onLoad:function(options){            _self = this;            pageOptions = options;            // #ifdef MP-WEIXIN            // 调用 微信 login 获取 code        uni.login({                    success: (res) => {                        uni.request({                            url:_self.apiServer+'member&m=codeToSession&code='+res.code,                            success: (sessions) => {                                session_key = sessions.data.session_key;                            }                        }                    }                });            }        });        // #endif}

php 后端代码

<?php namespace hsC;class member{//......public function wxaes(){if(empty($_POST['session_key']) || empty($_POST['encryptedData']) || empty($_POST['iv'])){exit(jsonCode('error', 'data error'));}include HS_TOOLS.'WXBizDataCrypt.php';        $pc = new \WXBizDataCrypt(HS_APPID, $_POST['session_key']);        $data = '';        $errCode = $pc->decryptData($_POST['encryptedData'], $_POST['iv'], $data);if ($errCode == 0) {exit($data);        } else {exit(jsonCode('error', $errCode));        }    }}

五、api接口安全策略 - 签名策略

安全概述
前面章节讲解的接口是裸露的、不安全的！使用post、get模拟可以轻松对api进行请求，最简单的攻击就可以瞬间完成近万会员的注册！
所以在进行api接口通讯的同时我们应该进行数据的验证工作！

加密原理及流程

1、从服务器端获取一个唯一性的token，我们称之为 accessToken;
2、前端对accessToken进行随机性拆分及md5加密,产生签名(保存在本地存储中);
3、前端在与后端进行交互时传递签名;
4、后端接收数据是验证签名;

签名准备

1、在 commons 文件夹内创建

1.1 md5.js //js md5 加密 [ 在课程内获取此 js文件 ]
1.2 sign.js // 签名函数

sign.js

var md5 = require('./md5.js');module.exports = {    sign : function(apiServer){        // 环境判断非uni环境不支持        if(!uni){return '...';}        // 连接服务器获取一个临时的accessToken        uni.request({            url: apiServer+'getAccessToken',            method: 'GET',            success: res => {                if(res.data.status != 'ok'){return ;}                var data = res.data.data;                // 对 accessToken 进行md5加密                var accessToken = md5.hex_md5(data.token + data.time);                // 签名 = md5(accessToekn + time) + '-' + 'accessToekn';                var sign = accessToken + '-' + data.token;                //console.log(sign);                // 记录在本地                uni.setStorage({                    key:"sign",                    data:sign                });            }        });    }}

数据库

DROP TABLE IF EXISTS `yuedu_access_tokens`;CREATE TABLE `yuedu_access_tokens` (  `token` varchar(30) NOT NULL,  `time` int(11) DEFAULT NULL,  PRIMARY KEY (`token`)) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4;

php 端代码

<?php //getAccessToken.phpnamespace hsC;class getAccessToken{public function index(){        $db = \hsTool\db::getInstance('access_tokens');        $token = array('token' => uniqid(),'time'  => time()        );        $db->add($token);exit(jsonCode('ok', $token));    }}

使用说明
在数据提交页面提交之前进行预签名，提交数据时携带此签名！

更合理的签名保存
因为大家后端基础不一样，本课程使用数据库保存了accessToken，更好的方式是 redis 或 memcache，可以设置变量有效期并能自动失效！

以上是本文的全部内容，希望对大家的学习有帮助，也希望大家多多支持 php自学中心 ，学习与交流少不了一个圈子，点击加技术群：PHP自学中心交流②群