當(dāng)前位置：首頁(yè) >

php post请求后端拿不到值_[精选] uniapp实现多端开发，与PHP是如何结合的

發(fā)布時(shí)間：2025/3/21 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 php post请求后端拿不到值_[精选] uniapp实现多端开发，与PHP是如何结合的小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章來(lái)自：https://www.jianshu.com/p/b2cb2a2c3313

作者：Neyo_涼

點(diǎn)擊加入：PHP自學(xué)中心技術(shù)交流微信群

商務(wù)合作:?請(qǐng)加微信(QQ)：2230304070

視頻教程分享

ThinkPHP6&&uniapp實(shí)戰(zhàn)API接口多端開(kāi)發(fā)
鏈接：http://www.mano100.cn/thread-365-1-1.html

精選文章正文

多端開(kāi)發(fā)，聽(tīng)名字就感覺(jué)不一樣，一套代碼，多端使用。適用于各個(gè)平臺(tái)。是不是很高大上。市面上很多關(guān)于多端開(kāi)發(fā)的框架，比較常用，流行的框架 uni-app，Chameleon(變色龍),taro這些，都可以支持多端，一套代碼，8個(gè)平臺(tái)支持常見(jiàn)平臺(tái)分別是H5頁(yè)面，安卓，微信小程序，百度小程序，支付寶小程序，頭條小程序這幾個(gè)平臺(tái)下面以一個(gè)登陸的例子給大家介紹一下

一、創(chuàng)建項(xiàng)目、后端環(huán)境介紹

創(chuàng)建項(xiàng)目

打開(kāi)HBuilderX -> 新建 uniapp 項(xiàng)目;

創(chuàng)建頁(yè)面
|_ index.vue 入口頁(yè)面
|_ write.vue 文章撰寫(xiě)頁(yè)面
|_ my.vue 賬戶中心頁(yè)面

后端使用php+mysql
完善底部導(dǎo)航欄

下載圖標(biāo), 圖標(biāo)地址 :https://pan.baidu.com/s/1iaWd6l_-cIJ3RNUsqNqFNQ

將圖標(biāo)部署至 /static 目錄;

修改 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"?:?"寫(xiě)作",
????????????????"iconPath"?:?"static/nav2.png",
????????????????"selectedIconPath"?:?"static/nav2-a.png"
????????????},
????????????{
????????????????"pagePath"?:?"pages/my/my",
????????????????"text"?:?"我的",
????????????????"iconPath"?:?"static/nav3.png",
????????????????"selectedIconPath"?:?"static/nav3-a.png"
????????????}
????????]
????}

4.修改項(xiàng)目名稱

"globalStyle"?:?{
????"navigationBarTextStyle"?:?"black",
????"navigationBarTitleText"?:?"悅讀",
????"navigationBarBackgroundColor"?:?"#F8F8F8",
????"backgroundColor"?:?"#F8F8F8"
}
5.加載 colorUI 框架
https://github.com/weilanwl/ColorUI

二、封裝全局登錄檢查函數(shù)并部署

1、在 main.js 中封裝全局登錄函數(shù)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];
}

參數(shù)說(shuō)明
backpage, backtype 2個(gè)參數(shù)分別代表：
backpage : 登錄后返回的頁(yè)面
backtype : 打開(kāi)頁(yè)面的類型[1 : redirectTo 2 : switchTab]
返回值說(shuō)明
已經(jīng)登錄返回?cái)?shù)組 [用戶 id, 用戶隨機(jī)碼, 用戶昵稱, 用戶表情]

2、創(chuàng)建 login 頁(yè)面
login 頁(yè)面作為登錄過(guò)度頁(yè)面，多端登錄都通過(guò)此頁(yè)面完成!

3、在頁(yè)面中應(yīng)用登錄檢查函數(shù)，如 write.vue

return 或終止函數(shù)運(yùn)行哦！

三、UNI-APP端使用微信登錄原理和條件編譯

四、多平臺(tái)多應(yīng)用統(tǒng)一登錄微信關(guān)系

多平臺(tái)統(tǒng)一登錄之 unionID

通過(guò)獲取用戶基本信息接口，開(kāi)發(fā)者可通過(guò)OpenID來(lái)獲取用戶基本信息，而如果開(kāi)發(fā)者擁有多個(gè)應(yīng)用，可使用以下辦法通過(guò)UnionID機(jī)制來(lái)在多個(gè)應(yīng)用進(jìn)行用戶帳號(hào)互通。
只要是同一個(gè)微信開(kāi)放平臺(tái)帳號(hào)下的公眾號(hào)，用戶的UnionID是唯一的。

換句話說(shuō)，同一用戶，對(duì)同一個(gè)微信開(kāi)放平臺(tái)帳號(hào)下的不同應(yīng)用，UnionID是相同的。
此前的OpenID機(jī)制，每個(gè)微信號(hào)對(duì)應(yīng)每個(gè)應(yīng)用有唯一的OpenID，所以不同應(yīng)用之間是不能共享用戶的，現(xiàn)在有了UnionID就可以了。

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

小程序端獲取 unionID

步驟 :

1、配置小程序 appid (此appid 在微信開(kāi)放平臺(tái)已經(jīng)綁定)；
2、使用 uni.login 登錄時(shí)會(huì)獲取 code，用 code 換取 seesion_key;
3、在獲取用戶信息函數(shù)中獲取到加密信息；
4、利用 seesion_key 及加密信息在服務(wù)端解密獲取 unionID

php 后端注意事項(xiàng)

需要開(kāi)啟 php_openssl 擴(kuò)展

前端實(shí)現(xiàn)過(guò)程代碼

export?default?{
????data()?{
????????return?{

????????};
????},

????methods:{
????????//?#ifdef?MP-WEIXIN
????????getUserInfo?:?(info)?=>?{
????????????//加密數(shù)據(jù)
????????????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"}
????????????//與服務(wù)器交互進(jìn)行解密
????????????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
????????????//?調(diào)用?微信?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接口安全策略 - 簽名策略

安全概述
前面章節(jié)講解的接口是裸露的、不安全的！使用post、get模擬可以輕松對(duì)api進(jìn)行請(qǐng)求，最簡(jiǎn)單的攻擊就可以瞬間完成近萬(wàn)會(huì)員的注冊(cè)！
所以在進(jìn)行api接口通訊的同時(shí)我們應(yīng)該進(jìn)行數(shù)據(jù)的驗(yàn)證工作！

加密原理及流程

1、從服務(wù)器端獲取一個(gè)唯一性的token，我們稱之為 accessToken;
2、前端對(duì)accessToken進(jìn)行隨機(jī)性拆分及md5加密,產(chǎn)生簽名(保存在本地存儲(chǔ)中);
3、前端在與后端進(jìn)行交互時(shí)傳遞簽名;
4、后端接收數(shù)據(jù)是驗(yàn)證簽名;

簽名準(zhǔn)備

1、在 commons 文件夾內(nèi)創(chuàng)建

1.1 md5.js //js md5 加密 [ 在課程內(nèi)獲取此 js文件 ]
1.2 sign.js // 簽名函數(shù)

sign.js

var?md5?=?require('./md5.js');
module.exports?=?{
????sign?:?function(apiServer){
????????//?環(huán)境判斷非uni環(huán)境不支持
????????if(!uni){return?'...';}
????????//?連接服務(wù)器獲取一個(gè)臨時(shí)的accessToken
????????uni.request({
????????????url:?apiServer+'getAccessToken',
????????????method:?'GET',
????????????success:?res?=>?{
????????????????if(res.data.status?!=?'ok'){return?;}
????????????????var?data?=?res.data.data;
????????????????//?對(duì)?accessToken?進(jìn)行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
????????????????});
????????????}
????????});
????}
}

數(shù)據(jù)庫(kù)

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));
????}
}

使用說(shuō)明
在數(shù)據(jù)提交頁(yè)面提交之前進(jìn)行預(yù)簽名，提交數(shù)據(jù)時(shí)攜帶此簽名！

更合理的簽名保存
因?yàn)榇蠹液蠖嘶A(chǔ)不一樣，本課程使用數(shù)據(jù)庫(kù)保存了accessToken，更好的方式是 redis 或 memcache，可以設(shè)置變量有效期并能自動(dòng)失效！

以上是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有幫助，也希望大家多多支持?php自學(xué)中心?，學(xué)習(xí)與交流少不了一個(gè)圈子，點(diǎn)擊加技術(shù)群：PHP自學(xué)中心交流②群

總結(jié)

以上是生活随笔為你收集整理的php post请求后端拿不到值_[精选] uniapp实现多端开发，与PHP是如何结合的的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：全云端万能小程序_万能门店全云端独立版微
下一篇： php性能测试下载,PHP性能测试工具x