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

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

1. 跨域

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

2. 解决跨域的方案

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

3. 代理的概念

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

4. 正向代理

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

      如图：

5. 反向代理

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

   

6. 反向代理demo

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

      1. 服务器不存在跨域

   2. 前端请求代理服务器即可

7. webpack代理

   1. vue.config.js配置

   2. 只适用于开发时使用

   3. 如果后端配置了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文档简介

传送门

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

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          统一样式，忽略掉

1. pages.json文件

   1. 配置的key和微信小程序完全一致

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

2. main.js

   1. webpack的入口
   2. 初始化App.vue

3. App.vue

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

注意点

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

04-uni-app语法

传送门

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

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

注意点：

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

05-优购案例-项目准备

1. 创建项目

   1. 项目名称uni-yougou50

2. 推送项目到码云

   1. 在码云创建项目uni-yougou50

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

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

3. 添加.gitignore

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

4. 新建开发分支

   1. 分支名称自己定

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

步骤

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

练习说明：

1. 在uniapp更改appid

07-优购案例-首页

在这里插入图片描述

01.页面分析

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

02.静态页面

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

2. 搜索链接

3. 轮播图

4. 导航栏
   

5. 楼层

03.请求数据&渲染数据

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

注意点

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

04.uni.request封装

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

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

1. 开启loading

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

2. 默认请求开启loading

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

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

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

utils文件夹下的request.js: