跨平台应用开发进阶(二) ：uni-app 项目实战(1)

最新推荐文章于 2024-05-15 09:39:21 发布

2401_84446548

最新推荐文章于 2024-05-15 09:39:21 发布

阅读量871

点赞数 15

分类专栏：程序员文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/2401_84446548/article/details/138431289

版权

程序员专栏收录该内容

163 篇文章 0 订阅

订阅专栏

onLoad: function (option) {
const item = JSON.parse(decodeURIComponent(option.item));
}


事件监听器应用示例如下：

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
url: ‘pages/test?id=1’,
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
…
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit(‘acceptDataFromOpenedPage’, { data: ‘data from starter page’ })
}
})

// 在test.vue页面，向起始页通过事件传递数据
onLoad: function(option) {
// #ifdef APP-NVUE
const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
// #endif
// #ifndef APP-NVUE
const eventChannel = this.getOpenerEventChannel();
// #endif
eventChannel.emit(‘acceptDataFromOpenedPage’, {data: ‘data from test page’});
eventChannel.emit(‘someEvent’, {data: ‘data from test page for someEvent’});
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on(‘acceptDataFromOpenerPage’, function(data) {
console.log(data)
})
}


#### 2.4 请求后台


1. 在目录`service`下新建一个`request.js`文件，进行封装。

mport {
baseURL
} from ‘./config.js’
import {
getToken,
goToLogin
} from ‘@/common/util.js’

const setToken = (res) => {
if (res.hasOwnProperty(“access_token”)) {
getApp().globalData.token = getToken(res.token_type, res.access_token)
console.log('token info is: ', getApp().globalData.token)
}
if (res.hasOwnProperty(‘msg’)) {
if (res.msg === ‘用户凭证已过期’) {
goToLogin()
}
}
};

const request = (url, params, method, tips) => {
uni.showLoading({
title: tips || “加载中…”
})
const curUrl = (url.indexOf(‘http’) !== -1 || url.indexOf(‘https’) !== -1) ? url : baseURL + url
console.log('The request url info is: ', curUrl)
console.log('The request params info is: ', params)
return new Promise((resolve, reject) => {
uni.request({
url: curUrl,
method: method || “POST”,
header: {
‘Content-Type’: ‘application/json’,
‘Authorization’: getApp().globalData.token || ‘Basic YXBwOmFwcA==’
},
data: params || {},
success(res) {
setToken(res.data)
resolve(res.data)
console.log('The request success return info is: ', res.data)
},
fail(err) {
reject(err)
console.log('The request fail return info is: ', err)
},
complete() {
uni.hideLoading()
}
})
}).catch(err => {
handleErr(err)
})
};

export {
requestForm,
requestJSON
}


2. 在`common`文件夹下一起建一个`utils.js`文件用来获取`token`。

// 获取token
export function getToken(token_type, access_token) {
let token = token_type.charAt(0).toUpperCase() + token_type.slice(1) + ’ ’ + access_token;
return token;
}

// Model提示是否返回登录页
export function goToLogin() {
uni.showModal({
title: ‘温馨提示’,
content: “您还没有登录，请登录”,
success: function(res) {
if (res.confirm) {
// console.log(‘用户点击确定’);
uni.navigateTo({
url: ‘/pages/ucenter/userinfo/userinfo’
})
} else if (res.cancel) {
// console.log(‘用户点击取消’);
}
}
})
}


3. 新建一个`api`目录，然后相应`pages`是什么页面就新建一个相对应名字的目录和文件，`list.js`文件就是请求接口。

// 引入工具类
import request from ‘@/service/request.js’

export function get(data){ //
return request({
url: ‘/forshop/getprefer’,
method: ‘GET’,
contentType:‘application/x-www-form-urlencoded’,
data: data
})
}



> 
> 注意⚠️：`uni.request`如果没有传入 `success / fail / complete` 参数，则会默认返回封装后的 `Promise` 对象。
> 
> 
> 


4. 然后在页面上`list.vue`上调用接口。


以上为`promise`形式的接口请求方式。`await`形式的接口请求方式为：

import { get } from “@/api/list/list”
// Await
async function request () {
var [err, res] = await get({
url: ‘https://www.example.com/request’
});
console.log(res.data);
}


#### 2.5 uni-app https请求方式


传统的 `HTTP` 有以下安全性问题：



> 
> 1. 使用明文进行通信，内容可能会被窃听；
> 2. 不验证通信方的身份，通信方的身份有可能遭遇伪装；
> 3. 无法证明报文的完整性，报文有可能遭篡改。
> 
> 
> 


为解决安全通信问题，`HTTPS` 应运而生。其实，`HTTPS` 并不是新协议，而是站在`HTTP`的肩膀上，让 `HTTP` 先和 `SSL`（`Secure Sockets Layer`）通信，再由 `SSL` 和 `TCP` 通信，也就是说 `HTTPS` 使用了隧道进行通信。 通过使用 `SSL`，`HTTPS` 具有了**加密**（防窃听）、**认证**（防伪装）和**完整性保护**（防篡改）。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/0813b3eafd53415889611355e75f2ce6.png)


##### 2.5.1 加密


（1）对称密钥加密（`Symmetric-Key Encryption`），加密和解密使用同一密钥。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/293051b3268a4f6ab4e6fd4b42d68c8f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATm8gU2lsdmVyIEJ1bGxldA==,size_13,color_FFFFFF,t_70,g_se,x_16)  
 （2）非对称密钥加密，又称公开密钥加密（`Public-Key Encryption`），加密和解密使用不同的密钥。


公开密钥所有人都可以获得，通信发送方获得接收方的公开密钥之后，就可以使用公开密钥进行加密，接收方收到通信内容后使用私有密钥解密。 非对称密钥除了用来加密，还可以用来进行签名。因为私有密钥无法被其他人获取，因此通信发送方使用其私有密钥 进行签名，通信接收方使用发送方的公开密钥对签名进行解密，就能判断这个签名是否正确。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c259b1e3d51340f2b522d1100e95289c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATm8gU2lsdmVyIEJ1bGxldA==,size_13,color_FFFFFF,t_70,g_se,x_16)  
 `HTTPS` 采用混合加密机制，使用**非对称密钥**加密用于传输**对称密钥**来保证传输过程的安全性，之后使用**对称密钥**加密进行通信来保证通信过程的效率。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/e5e25be875964e1aaaa2a5baeb40b6d1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATm8gU2lsdmVyIEJ1bGxldA==,size_15,color_FFFFFF,t_70,g_se,x_16)


##### 2.5.2 认证


通过使用证书来对通信方进行认证。


数字证书认证机构（**`CA，Certificate Authority`**）是客户端与服务器双方都可信赖的第三方机构。 服务器的运营人员向 `CA` 提出公开密钥的申请，`CA` 在判明提出申请者的身份之后，会对已申请的公开密钥做数字签名，然后分配这个已签名的公开密钥，并将该公开密钥放入公开密钥证书后绑定在一起。 进行 `HTTPS` 通信时，服务器会把证书发送给客户端。客户端取得其中的公开密钥之后，先使用数字签名进行验证， 如果验证通过，就可以开始通信了。


##### 2.5.3 完整性保护


`SSL` 提供报文摘要功能来进行完整性保护。 `HTTP` 也提供了 `MD5` 报文摘要功能，但不是安全的。例如报文内容被篡改之后，同时重新计算 `MD5` 的值，通信接收方是无法意识到发生了篡改。


`HTTPS` 的报文摘要功能之所以安全，是因为它结合了**加密**和**认证**这两个操作。试想一下，加密之后的报文，遭到篡改之后，也很难重新计算报文摘要，因为无法轻易获取明文。


##### 2.5.4 HTTPS 的缺点



> 
> * 因为需要进行加密解密等过程，因此速度会更慢；
> * 需要支付证书授权的高额费用。
> 
> 
> 


`uni-app`应用`https`请求方式，需要配合`SSL`证书：


如果是`HTTPS`访问的证书，应该是服务端配置，前端发起请求时，地址写成`https`前缀即可，例如：`https://www.example.com/login`


#### 2.6 应用规划、配置和调整


并不是说有了`SSL`证书就没事了，还要考虑应用中的使用问题，需要规划、服务器配置、应用调整等多个环节。


由于`SSL`比 `http` 要消耗更多`cpu`资源（主要是在建立握手连接阶段，之后还要对内容加密），所以对一般网站，只需要对部分地方采用`https`，大部分开放内容是没必要的，具体取决于你的业务要求。比如对于很多安全要求较低的网站，完全不用`https`也是可接受的。


**某些页面是同时支持 `http` 和 `https` ，还是只支持 `https`、强制 `https`？**


同时支持就是用户用什么协议访问都可以，那么用户的请求主要就是由页面本身的链接引导来的，因为一般用户不会自己特意去修改地址栏的。


一般我们的网站可以做成同时支持`http`和`https`，都可以访问。但是这就容易有后面说的混合内容或混合脚本的问题。


还可以规划为部分页面支持 `https`，一般公开页面不用`https`，只是将部分地方的链接改为 `https` 就可以了。专门期望以 `https` 访问的页面中，引用的绝对`URL`可以明确的使用 `https` 链接。


是否强制 `https` ？对于安全性高的网站或网站中的部分页面，可以强制使用`https`访问， 即使用户在地址栏里手工把 `https` 改为 `http`， 也会被自动重定向回 `https` 上。比如可以通过配置`web`服务器 `rewrite` 规则将这些 `http url` 自动重定向到对应的 `https url` 上（这样维护比较简单），而不用改应用。


#### 2.7 应用市场上架


应用`HBuilder`云打包时，提示如下校验信息：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/6defaafe45464008a974a6fe4ddcc475.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATm8gU2lsdmVyIEJ1bGxldA==,size_18,color_FFFFFF,t_70,g_se,x_16)  
 其中，主要提示就是“**当前应用缺少相关配置**”，可通过如下措施解决：


打开`HBuilder`项目的`manifest.json`文件，切换到“**源码视图**”项


**`uni-app`项目**


在 “`app-plus`” -> “`privacy`” 节点下添加 `prompt`节点。


### 总结

**前端资料汇总**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)

*   框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

*   算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯



*   在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

*   要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
    喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

2401_84446548

关注

15
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
跨平台应用开发进阶(二) ：uni-app 项目实战(1)

/ 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据。// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据。// 在test.vue页面，向起始页通过事件传递数据。// console.log(‘用户点击确定’);// console.log(‘用户点击取消’);// console.log(‘用户点击确定’);// console.log(‘用户点击取消’);// Model提示是否返回登录页。
复制链接

扫一扫