06-小程序(uni-app优购商城首页, uni-app语法工程结构)

01-设置反向代理解决跨域的问题 以及 如何配置webpack的代理

跨域

因为浏览器的同源策略，协议域名或者端口有一个不一样，就会跨域

解决跨域的方案

JSONP 不安全基本不用原理 反向代理 服务器访问服务器是不会跨域的 CORS 最常见的一种解决方案

代理的概念

所谓代理就是在我们和真实的服务器之间有一台代理服务器，我们所有的请求都是通过它来进行转接的。

正向代理

正向代理就是我们访问不了Google，但是我在国外有一台vps，它可以访问Google，我访问它，叫它访问Google后，把数据传给我。

如图：

反向代理

访问代理服务器，代理服务器访问目标服务器并返回数据

反向代理demo

代理服务器请求跨域服务器（目标服务器）

服务器不存在跨域

前端请求代理服务器即可

webpack代理

vue.config.js配置

只适用于开发时使用

如果后端配置了cors的话，无须

module.exports = { devServer: { open: true, proxy: { // 请求/api/home/swipers时，实际上是在请求http://129.211.82.55:3000/api/home/swipers '/api': { target: 'http://129.211.82.55:3000' } } } }

02-uni-app文档简介

传送门

介绍，可以理解成入口教程框架，uniapp框架原理组件，引入结构API，方法插件市场，可以找到一些组件或者成熟的项目

03-uni-app的工程结构

传送门

┌─components 存放所有组件 │ └─comp.vue 其中一个组件 ├─pages 存放所有的页面 │ ├─index index页面 │ │ └─index.vue index页面的结构样式和逻辑 │ └─list 另外一个页面 │ └─list.vue ├─static 静态资源 ├─main.js webpack入口 ├─App.vue 全局逻辑和样式 ├─manifest.json 打包App相关 ├─pages.json 页面路径，页面配置，全局窗口样式，tabbar └─uni.scss 统一样式，忽略掉

pages.json文件

配置的key和微信小程序完全一致 { // 所有的页面路径和页面配置都在这里 "pages": [ { // 页面路径 "path": "pages/index/index", //页面配置在这里 "style": { "navigationBarTitleText": "uni-app" } } ], // 全局的样式，对应小程序里面的window "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" } }

main.js

webpack的入口初始化App.vue

App.vue

会转成小程序的app.js和app.vue

注意点

用Hbuilder创建的uniapp项目和vue脚手架创建的项目是类似的，也是基于nodejs+webpack,只不过藏着了。插件安装，不能npm install, 应该工具->插件市场。。。Uniapp项目运行到微信开发者工具时，生成的小程序项目文件位置 unpackage\dist\dev\mp-weixin

04-uni-app语法

传送门

uniapp完全可以使用vue.js语法，可以使用小程序组件和API，不能使用html标签

组件 view, text, swiper,image, input,navigator基本上小程序的组件完成可以使用。 uniapp组件名和小程序一致 vue语法 v-modelv-for方法中的this注册事件总结：完全可以使用Vue语法 样式 rpx可以使用 api 方法名一致需要把wx.换成uni.

注意点：

解决兼容性问题，最主要代码写规范了。uniapp项目如果想保证兼容多个平台，最重要的就是代码要规范

05-优购案例-项目准备

创建项目

项目名称uni-yougou50

推送项目到码云

在码云创建项目uni-yougou50

再根据码云提示，推送本地代码到远端

# 去到本地uni-yougou50目录 git init #初始化本地仓库 git add * #把当前目录下所有的文件添加到暂存区 git commit -m "first commit" #提交到本地仓库 # 添加远端git仓库的地址 git remote add origin git@gitee.com:jovenwang/uni-yougou50.git #在远端创建master分支，并推送本地master到远端master git push -u origin master

添加.gitignore

想忽略掉unpackage目录copy .gitignore文件 可以直接copy黑马头条的里面的.gitignore 再添加忽略unpackage

新建开发分支

分支名称自己定

06- 优购案例-tarBar设置-练习

步骤

把图片资源全部copy到static目录新建4个页面 home,category, cart,me, 同时在pages.json添加路径copy示例代码tabbar配置，按设计稿改属性

练习说明：

在uniapp更改appid

07-优购案例-首页

在这里插入图片描述

01.页面分析

入口: 小程序启动看到的第一个页面，底部tab栏点击首页显示的页面主要模块 搜索链接，轮播图，导航栏，楼层 其他说明 搜索链接这块点击跳转，并不能输入页面基本上都是图片，点击图片无需要跳转

02.静态页面

导航栏的前景色和背景色设置在全局

搜索链接

轮播图

导航栏

楼层

03.请求数据&渲染数据

接口 get请求 尽早发请求 onLoad 发请求获取到数据后，设置为data属性在结构中渲染

注意点

template标签不能放:key，但是block标签可以的uni.request方法，如果不传回调函数的话，返回的是promise

04.uni.request封装

为什么要封装 因为所有的请求有一些公共的逻辑 步骤 先在home.vue抽取一个request方法，然后调用url和获取数据处理的逻辑应该作为传参 url传递,传对象返回Promise对象 在utils/request对外暴露一个方法request, 然后在需要用到的地方引入抽取基地址给Vue原型添加 $ request 属性，所以页面都可以直接用this.$request 在main.js加 其他方法使用request

uni.request封装补充(进一步优化)

开启loading

请求前打开Loading请求结束后关闭Loading complete

默认请求开启loading

export default function request({ url, isLoading = true //默认开启loading })

首页有三个请求，loading三个请求开始时开启，三个请求结束后关闭

方案 Promise.all有问题，如果其中一个异步任务失败，所有的请求都没有了。Promise.allSettled, 总会成功，不管异步任务是成功还是失败，但是兼容性不好有公共请求方法，设置一个变量记录有多少个请求在请求中，如果没有请求的话，关闭Loading

utils文件夹下的request.js: