第4章 初识HbuilderX之移动前端App开发
本人学习vue的根本目标是为了让手机移动端的(前端)App通过跨域(Cors)操作和与后端的已经部署在IIS中的.Net(Core)6程序进行数据交互操作，并通过交互操作获取数据后在让手机移动端的(前端)App中渲染显示出来；而不是把vue视图页面做为PC端或移动端浏览器的渲染显示页面，因为“*.cshtml” 这种对强类型支持的视图页面，更加符合后台开发者，对程序的快速、调质量的构建。
1 准备工作
1.1 在PC端安装移动模拟器(夜神模拟器:nox)
下载地址：“夜神安卓模拟器-安卓模拟器电脑版下载_安卓手游模拟器_手机模拟器_官网 (yeshen.com)”。
注意：夜神模拟器默认是安装在D:\Program Files\Nox中的，在安装时不要修改其置默认安装位置，至于原因会在下面说明。
1.2 设置夜神模拟器:nox
1.2.1 设置显示界面
夜神模拟器:nox的默认显示界面是“平板界面”，因此需要先设成“手机板界面”，如果下图所示：
1.2.2 设置启用“开发者选项”
1.3 在PC端安下载安装、配置HBuilderX
1.3.1 在PC端安下载安装HBuilderX
下载地址：“HBuilderX-高效极客技巧 (dcloud.io)”
注意：
- 最好下载“zip”版，不要下载“exe” 版,因为“zip”版是免安装的。
- “zip”版必须解压在D盘中，因为夜神模拟器默认是安装在D:\Program Files\Nox中的，为了避免
配置HbuilderX调用夜神模拟器时的各种意外，HbuilderX和夜神模拟器最好在同1个盘符中。
1.3.2 配置HbuilderX调用夜神模拟器
在运行配置中分别输入：“D:\Program Files\Nox\bin\nox_adb.exe”、“62001” ，如果下图所示：
注意：在配置HbuilderX调用夜神模拟器完成后，必先关闭HbuilderX程序后，再打开闭HbuilderX程序，否则该配置将不会生效。
1.3.3 HbuilderX调用夜神模拟器进行模拟的注意事项
在HbuilderX调用夜神模拟器进行模拟前，必须先启动“夜神模拟器”而不是“模拟器助手”，否则HbuilderX将会出现：“没有检测到设备，请插入设备后点击涮新再试”错误信息，如果下图所示：
2 HbuilderX之跨域(Cors)交互操作定义实现
本人在HbuilderX中以多种形式测试了当前网上已有的HbuilderX跨域(Cors)操作包，包含：axios(内置)、http
和escook/request-miniprogram(第3方)，但是最终只有通过escook/request-miniprogram(第3方)包，能够获取服务器端的数据，其具体实现如下：
2.1 初始化安装必要文件及包
2.1.1 初始化安装“package.json”文件
使用Hbuilder默认模板新建的uin-app,并不包含有“package.json”文件，把“package.json”文件加载到项目的根目录中，需要先通过“终端”运行命令：
npm init -y
2.1.2初始化安装“escook/request-miniprogram”(第3方)包
通过“终端”运行命令：
npm install @escook/request-miniprogram
2.2 在main.js中导入全局“escook/request-miniprogram”(第3方)包
2.1.1 在main.js中正确导入全局“escook/request-miniprogram”(第3方)包示例
//把“escook/request-miniprogram”(第3方)包导入为全局变量：“$http”。
import { $http } from '@escook/request-miniprogram'
//把全局变量：“$http”赋值给全局变量：“uni.$http”。
uni.$http = $http
//设置后端服务的根域名，“https://api-hmugo-web.itheima.net”可以提供JSON格式的数据，以供程序测试使用，本人以验证该后端服务能够提供数据。
//也可以把该根域名修改为自己，通过IIS部署的根域名例如：“http://localhost:8080/”。
$http.baseUrl = 'https://api-hmugo-web.itheima.net'
//对后端服务的根域名进行设置，因为uni.$http为$http的引用，所以可以直接修改$http对象下的属性
$http.beforeRequest = function() {
//设置对后端服务的根域名发起网络请求前的拦截功能。
uni.showLoading({
title: '加载中...'
})
}
$http.afterRequest = function() {
//设置对后端服务的根域名网络请求完毕后的拦截功能。
uni.hideLoading()
}
//如果从后端服务中获取数据操作失败，则对以下的失败信息进行渲染显示。
//注意：从“main.js”对“escook/request-miniprogram”(第3方)包导入设置定义中可以直接看出，所有的渲染显示的实现都是通过全局变量“uni”实现的。
uni.$showMsg = function(title='数据加载失败',duration=1500){
uni.showToast({
title,
duration,
icon:'none'
})
}
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
注意：在main.js文件中导入全局“escook/request-miniprogram”(第3方)包，必须在设置定义定义在main.js文件的最上部，否则就会产错误信息：“Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'get')”，如下图所示：
2.1.2 在main.js中错误导入全局“escook/request-miniprogram”(第3方)包示例1
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
//把“escook/request-miniprogram”(第3方)包导入为全局变量：“$http”。
import { $http } from '@escook/request-miniprogram'
//把全局变量：“$http”赋值给全局变量：“uni.$http”。
uni.$http = $http
//设置后端服务的根域名，“https://api-hmugo-web.itheima.net”可以提供JSON格式的数据，以供程序测试使用，本人以验证该后端服务能够提供数据。
//也可以把该根域名修改为自己，通过IIS部署的根域名例如：“http://localhost:8080/”。
$http.baseUrl = 'https://api-hmugo-web.itheima.net'
//对后端服务的根域名进行设置，因为uni.$http为$http的引用，所以可以直接修改$http对象下的属性
$http.beforeRequest = function() {
//设置对后端服务的根域名发起网络请求前的拦截功能。
uni.showLoading({
title: '加载中...'
})
}
$http.afterRequest = function() {
//设置对后端服务的根域名网络请求完毕后的拦截功能。
uni.hideLoading()
}
//如果从后端服务中获取数据操作失败，则对以下的失败信息进行渲染显示。
//注意：从“main.js”对“escook/request-miniprogram”(第3方)包导入设置定义中可以直接看出，所有的渲染显示的实现都是通过全局变量“uni”实现的。
uni.$showMsg = function(title='数据加载失败',duration=1500){
uni.showToast({
title,
duration,
icon:'none'
})
}
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
2.1.3 在main.js中错误导入全局“escook/request-miniprogram”(第3方)包示例2
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
//把“escook/request-miniprogram”(第3方)包导入为全局变量：“$http”。
import { $http } from '@escook/request-miniprogram'
Vue.config.productionTip = false
//把全局变量：“$http”赋值给全局变量：“uni.$http”。
uni.$http = $http
//设置后端服务的根域名，“https://api-hmugo-web.itheima.net”可以提供JSON格式的数据，以供程序测试使用，本人以验证该后端服务能够提供数据。
//也可以把该根域名修改为自己，通过IIS部署的根域名例如：“http://localhost:8080/”。
$http.baseUrl = 'https://api-hmugo-web.itheima.net'
//对后端服务的根域名进行设置，因为uni.$http为$http的引用，所以可以直接修改$http对象下的属性
$http.beforeRequest = function() {
//设置对后端服务的根域名发起网络请求前的拦截功能。
uni.showLoading({
title: '加载中...'
})
}
$http.afterRequest = function() {
//设置对后端服务的根域名网络请求完毕后的拦截功能。
uni.hideLoading()
}
//如果从后端服务中获取数据操作失败，则对以下的失败信息进行渲染显示。
//注意：从“main.js”对“escook/request-miniprogram”(第3方)包导入设置定义中可以直接看出，所有的渲染显示的实现都是通过全局变量“uni”实现的。
uni.$showMsg = function(title='数据加载失败',duration=1500){
uni.showToast({
title,
duration,
icon:'none'
})
}
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
2.3 在pages\index\index.vue中调用“escook/request-miniprogram”(第3方)包
<template>
<view class="content">
<image class="logo" src="/static/logo.png">image>
<view class="text-area">
<text class="title">{{title}}text>
view>
view>
template>
<script>
export default
{
data()
{
return {
title: 'Hello',
list: [],//第1步：声明数据局部变量，用于存储从服务器端获取的数据。
}
},
onLoad()
{
//第3步：如果vue视图页面绑定有从指定方法获取的数据，则在vue视图页面渲染显示前，通过指定方法获取数据，为vue视图页面渲染显示提供数据支撑。
this.getFloorList();
},
methods:
{
//第2步：通过调用相对路由（“/api/public/v1/home/swiperdata”），获取该服务端控制器方法中的数据，并打印。
//注意：该相对路由（“/api/public/v1/home/swiperdata”）的绝对路由是：“https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata”。
async getFloorList()
{
const {data:{message,meta}} = await uni.$http.get('/api/public/v1/home/swiperdata');
if(meta.status !== 200)
return uni.$showMsg();
this.list= message;
console.log(this.list);
},
}
}
script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
style>
3 执行效果
4 推荐
本人的这些示例虽然实现步骤详细，但知识点跨越很大，不成体系，毕竟是为了快速学习怎样构建前端移动App而写，下面将向读者推荐另一位大神的视频，这些位大神对vue和builderX讲解体系明确、逻辑清晰， 且每个视频端小精悍，只是对于初学者来说语速有此快内容很些赶，如果耐心较差的可以直接从第7个视频直接开始，网址：“【uni-app】2021最新版uni-app零基础入门到项目实战#Vue#项目实战_哔哩哔哩_bilibili”
对以上功能更为具体实现和注释见：22-09-24-04_uniAppVue3(初识HbuilderX之前移动前端App开发)。