uniapp 封装请求 根目录下新建 util文件夹： 里面两个js文件：request.js 和 api.js 接下来 开始cv：打开request.js 拷贝： // 请求接口 换成你自己的 （仅为示例 非真实接口） const commoneUrl = "http://test.cn/api/"; //get请求封装 function getRequest(url, data) { var promise = new Promise((resolve, reject) => { var postData = data; uni.request({ url: commoneUrl + url, data: postData, method: "GET", dataType: 'json', header: { 'content-type': 'application/json', token: uni.getStorageSync('token') || '' }, success: function(res) { if (res.statusCode === 200) { resolve(res.data); } else { resolve(res.data) } }, error: function(e) { reject('网络出错'); } }); }); return promise; } //post请求封装 function postRequest(url, data) { var promise = new Promise((resolve, reject) => { var postData = data; uni.request({ url: commoneUrl + url, data: postData, method: 'POST', header: { 'content-type': 'application/json', token: uni.getStorageSync('token') || '' }, success: function(res) { if (res.code === 200 && res.code == 0) { resolve(res.data); } else { resolve(res.data) } }, error: function(e) { reject('网络出错'); } }) }); return promise; } module.exports = { postRequest, getRequest } 然后打开 api.js 拷贝： // 导入上面封装的请求 const request = require('../util/reuqest.js') // 获取用户信息的请求方法 get类型 var getUser = function(){ return request.getRequest('user'); //user---接口名称 } // 获取列表的请求方法 post类型 var getList = function(){ return request.postRequest('list'); //list---接口名称 } // 导出所有的请求方法（与上面的函数名称对应） 以便在其他组件使用此请求方法 module.exports = { getUser, getList }使用请求方法： <template> <view> 这里是用户信息: {{userInfo}} </view> </template> <script> // 导入需要的方法 例如这里需要 获取用户信息 // 所以导入的是 getUser方法 导入名称与api里面导出的一致 import {getUser} from '@/util/api.js' export default { data() { return { userInfo:'' } }, onShow(){ this.userInfo() }, methods: { // 调用获取用户信息 userInfo(){ getUser().then(res=>{ console.log('用户信息',res); this.userInfo = res.data }) } } } </script> <style> </style>

uni-app核心基础（新手快速入门） uni-app介绍uni-app是一个基于Vue.js开发的跨平台应用开发框架，可以使用一套代码同时构建iOS、Android、H5、小程序等多个平台的应用。uni-app的特点是开发效率高、开发成本低、开发周期短，同时还具有良好的性能和用户体验。可前往uni-app官网查看更多细则https://uniapp.dcloud.net.cn/uni-app特点跨平台开发：uni-app可以使用一套代码同时构建iOS、Android、H5、小程序等多个平台的应用，大大降低了开发成本和开发周期。开发效率高：uni-app采用Vue.js作为开发框架，开发者可以使用Vue.js的组件化开发方式，大大提高了开发效率。良好的性能和用户体验：uni-app采用了优化的渲染机制和缓存机制，可以提高应用的性能和用户体验。支持原生能力：uni-app支持调用原生能力，如调用摄像头、地理位置等，可以满足更多的应用场景需求。uni-app使用方法安装uni-app可以使用npm安装uni-app，也可以直接下载uni-app的源代码。如果想要安装uni-app，可以按照以下步骤操作：首先您需要安装Node.js，您可以在官方网站上下载Node.js的安装包进行安装：https://nodejs.org/en/download/接着您需要使用npm工具进行安装uni-app，打开命令行终端，输入以下命令进行安装：npm install -g @vue/cli npm install -g @vue/cli-service-global npm install -g uni-cli安装完成后，您可以使用以下命令创建一个新的uni-app项目：uni init my-project其中my-project是您的项目名称。进入项目目录，使用以下命令启动开发服务器：cd my-project npm run dev:mp-weixin其中mp-weixin是您要开发的目标平台，支持的平台有mp-alipay、mp-baidu、mp-toutiao等。到这里，您已经成功安装并创建了一个uni-app项目。如果您需要使用其他平台的话，只需要更改启动命令里的目标平台即可。创建uni-app项目可以使用HBuilderX等IDE工具创建uni-app项目，也可以手动创建uni-app项目。HBuilderX官网：https://www.dcloud.io/hbuilderx.html要创建uni-app项目，您需要按照以下步骤：安装HBuilderX开发工具，它是一个基于Eclipse的集成开发环境（IDE），专门为uni-app开发而设计。打开HBuilderX，点击“新建项目”按钮，选择“uni-app”模板，然后选择您需要的项目类型（如无框架、Vue、React等）。如果您还没有安装相关框架和插件，可以根据提示进行安装。在新建项目页面中，您可以设置项目名称、存储路径、AppID等信息。点击“创建项目”按钮，HBuilderX会自动为您生成初始项目结构，并且自动配置好相应的依赖项和运行环境。开始编写您的代码，并使用HBuilderX提供的调试功能进行测试。发布uni-app应用可以将编译后的uni-app应用发布到App Store、Google Play、微信小程序等平台。在HBuilderX中，打开需要发布的uni-app项目在“菜单栏”中选择“运行-》发行”选择需要发布的平台，例如Android或iOS根据提示，填写相关配置信息，如应用名称、应用图标、应用版本等点击“发行”按钮，等待打包和编译过程完成打包完成后，在相应的平台上上传应用的安装包，例如Android应用可以上传到Google Play商店，iOS应用可以上传到App Store 应用发布后，可以在相应的平台下载、应用。uni-app基础语法访问官网查看：http://zh.uniapp.dcloud.io/tutorial/模板语法uni-app的模板语法和Vue.js的模板语法基本一致，支持插值表达式、指令、事件等。<template> <view> <text>{{ message }}</text> <button @click="onClick">点击我</button> </view> </template> <script> export default { data() { return { message: 'Hello uni-app!' } }, methods: { onClick() { uni.showToast({ title: 'Hello uni-app!' }) } } } </script>条件渲染uni-app的条件渲染和Vue.js的条件渲染基本一致，支持v-if、v-else、v-show等指令。<template> <view> <text v-if="showMessage">{{ message }}</text> <text v-else>暂无消息</text> <button @click="toggleMessage">{{ showMessage ? '隐藏消息' : '显示消息' }}</button> </view> </template> <script> export default { data() { return { message: 'Hello uni-app!', showMessage: true } }, methods: { toggleMessage() { this.showMessage = !this.showMessage } } } </script>列表渲染uni-app的列表渲染和Vue.js的列表渲染基本一致，支持v-for指令。<template> <view> <text v-for="(item, index) in list" :key="index">{{ item }}</text> </view> </template> <script> export default { data() { return { list: ['苹果', '香蕉', '橘子'] } } } </script>表单输入绑定uni-app的表单输入绑定和Vue.js的表单输入绑定基本一致，支持v-model指令。<template> <view> <input v-model="message" /> <button @click="onClick">点击我</button> </view> </template> <script> export default { data() { return { message: '' } }, methods: { onClick() { uni.showToast({ title: this.message }) } } } </script>uni-app组件访问官网查看：http://zh.uniapp.dcloud.io/component/uni-app提供了丰富的组件库，包括基础组件和扩展组件，可以满足大部分应用的需求。基础组件uni-app的基础组件包括view、text、button、image、input等，可以用来构建应用的基本界面。<template> <view> <text>Hello uni-app!</text> <button @click="onClick">点击我</button> <image src="/static/logo.png" /> <input v-model="message" /> </view> </template> <script> export default { data() { return { message: '' } }, methods: { onClick() { uni.showToast({ title: 'Hello uni-app!' }) } } } </script>扩展组件uni-app的扩展组件包括swiper、scroll-view、picker、calendar等，可以用来实现更复杂的界面效果。<template> <view> <swiper> <swiper-item v-for="(item, index) in list" :key="index"> <image :src="item.image" /> </swiper-item> </swiper> <scroll-view style="height: 200rpx;"> <view v-for="(item, index) in list" :key="index">{{ item.title }}</view> </scroll-view> <picker :value="value" @change="onChange"> <picker-item v-for="(item, index) in list" :key="index" :value="index">{{ item.title }}</picker-item> </picker> <calendar :selected-date="selectedDate" @select="onSelect" /> </view> </template> <script> export default { data() { return { list: [ { title: '苹果', image: '/static/apple.png' }, { title: '香蕉', image: '/static/banana.png' }, { title: '橘子', image: '/static/orange.png' } ], value: 0, selectedDate: '' } }, methods: { onChange(event) { this.value = event.detail.value }, onSelect(event) { this.selectedDate = event.detail.value } } } </script>uni-app API访问官网查看：http://zh.uniapp.dcloud.io/api/uni-app提供了丰富的API，包括路由、网络、媒体、位置等，可以满足大部分应用的需求。// 路由API uni.navigateTo({ url: '/pages/detail/detail?id=1' }) // 网络API uni.request({ url: 'https://api.example.com', success: function(res) { console.log(res.data) } }) // 媒体API uni.chooseImage({ success: function(res) { console.log(res.tempFilePaths) } }) // 位置API uni.getLocation({ success: function(res) { console.log(res.latitude, res.longitude) } })