當前位置：首頁 >

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

發布時間：2025/3/21 25 豆豆

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

文章來自：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頁面，安卓，微信小程序，百度小程序，支付寶小程序，頭條小程序這幾個平臺下面以一個登陸的例子給大家介紹一下

一、創建項目、后端環境介紹

創建項目

打開HBuilderX -> 新建 uniapp 項目;

創建頁面
|_ index.vue 入口頁面
|_ write.vue 文章撰寫頁面
|_ my.vue 賬戶中心頁面

后端使用php+mysql
完善底部導航欄

下載圖標, 圖標地址 :https://pan.baidu.com/s/1iaWd6l_-cIJ3RNUsqNqFNQ

將圖標部署至 /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"?:?"寫作",
????????????????"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

return 或終止函數運行哦！

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

四、多平臺多應用統一登錄微信關系

多平臺統一登錄之 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自學中心交流②群

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：全云端万能小程序_万能门店全云端独立版微
下一篇： vivado 亚稳态_【vivado学习