本人学习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)”

    注意：

  1. 最好下载“zip”版，不要下载“exe” 版,因为“zip”版是免安装的。
  2. “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开发)。

# uni-app
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue