uniapp安装及调试

我们本篇文章主要讲解uniapp的项目创建

真机调试、ios模拟器调试、微信小程序调试

一、下载HBuilder X

[HBuilder X]: “https://www.dcloud.io/hbuilderx.html “

我们可以下载我们需要的版本

二、安装运行并创建项目

第一次打开HBuilder X，我们可以去定义一下我们的配置，macos是去偏好设置，windows的在工具->设置

我们可以去新建项目弹出窗口配置我们项目信息，项目名称和vue版本，这里我现在的是vue3，vue3的绑定预设是vite。

我们也可以去选择不一样的模板。

三、运行项目

当我们打开项目的时候，准备运行的时候，我们可以选择将我们的项目运行到哪里，它会提示你安装相对应的插件，如果安装完插件，我们的软件没有识别到我们的插件，那我们可以选择重启我们的软件。

这里先演示一下运行到内置浏览器（第一次运行我们可能要稍等一下）

四、调试

1.ios模拟器调试

当然，在ios模拟器调试的前提是要是macos环境，并且下载了xcode（提前准备一下哦）因为我没有ios手机🫠

我们选择运行到ios模拟器 App基座（loading…）

选择我们的模拟器手机型号

现在我就可以看到程序运行到了我们的iPhone 14 Pro Max（香得嘞）

当我们修改我们的程序代码并保存，就可以看见我们的视图更新了

2.Android手机真机调试

当然，没有Android手机的也可以借其他同学的（Android模拟器配置有点麻烦，就先不配置了，想配置的同学先自行打开搜索🔍）

手机真机调试的前提是要打开你的手机的开发者模式，不同的手机开启的方式也是不一样的，我的手机是红米K20 pro

具体打开流程为设置->我的设备->全部参数->点击MIUI版本3下（连击）系统提示进入开发者模式->返回到更多设置->开发者选项->打开usb调试

当我们选择运行到Android App基座，就会识别你的手机（记得用数据线将手机连接到电脑），点击运行

第一次运行，手机会让你安装，点击安装就可以了

3.微信小程序开发者工具调试

这个调试的方式的前提是要有一个开发者账号，没有的同学要先去注册一个

[注册]: “https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN “

然后利用注册绑定的微信登陆我们的微信公众平台

没有下载微信开发者工具的同学也要下载一个

然后在我们的开发->开发管理->开发设置下面有我们的开发者ID（等会要用）

当我们点击发行->小程序-微信的时候，会让你配置你的开发者ID，然后项目就会自动打包

第一次编译的时候，我们可以根据编译完成的项目路径去手动导入我们的微信开发者工具去调试

注意：不要在微信开发者工具去修改我们的代码，因为下一次发行编译会覆盖掉我们的修改

当然，我们还有另一种导入方法，那就是自动导入

首先我们要将微信开发者工具的安全设置的服务端口打开

再到HBuilder X去配置微信开发者工具的路径（这里的路径可以查看自己的安装路径）

到这我们的配置就完成了

接下来我们再发行微信小程序

我们就可以看见微信开发者工具自动打开并运行我们的项目了

总结：

到目前为止，我们开发时候的调试就可以轻松掌握了

Vue3

官网地址：https://cn.vuejs.org/
vue最新版分为两个版本： Vue3.0（20年9月18日） Vue 3.2 （21年8月10日）

Vue 3.2 +Vite+volar

• Vue3 框架做了大量的性能优化，包括虚拟 DOM，编译模板、代理的新数据监听，体积更小的打包文件等。
• 新的组合式 API （composition-api），更适合大型项目的构建，去除繁琐的 this 操作；
• 由于是基于 TypeScript 编写，对 TypeScript 原生支持更好，更强大的智能类型推导功能；
• 生命周期的一些改变，vue2 中的 beforeCreate 和 created 被一个新增的 setup 生命周期函数代替；
• 一些常见 API 如 v-model 的变化，支持对一个组件同时进行多个 v-model 的数据绑定。

vscode 的插件 vetur 对vue3 的composition API语法支持度非常弱，所以开发vue3项目需要将vetur禁用 更换另一个插件

开发vue3安装并使用： volar 插件

1.项目创建

Vite 官网：https://cn.vitejs.dev/

yarn create vite my-vue-app --template vue     

2.SFC 单文件组件

html 部分变化不大
vue2的 template 中只能有一个子节点，vue3的 template 中可以写多个子节点
js 部分内置ts，但是vite创建的项目没有开启 ， <script lang="ts" setup> 这样写即可支持ts
新增setup 语法糖，js代码大量简化
代码中不再出现 this
css 代码中 可以使用v-bind 指令

<template>
    <div>
    </div>
</template>

<script setup>
       let color = '#f60';
</script>

<style scoped>
.box{
  width: 100px;
  height: 100px;
  background: v-bind(color);
}
</style>

2. setup语法糖

起初 Vue3.0 暴露变量必须 return 出来，template中才能使用； 这样会导致在页面上变量会出现很多次。

vue3.2只需在script标签中添加setup,可以帮助我们解决这个问题。

1.组件只需引入不用注册，属性和方法也不用返回， 也不用写setup函数，也不用写export default ， 甚至是自定义指令也可以在我们的template中自动获得。

3.data 定义

3.1 直接定义 无响应式

<template>
  <div>
      <h1>{{name}}</h1>
      <!-- 这里双向绑定失效，直接定义变量没有响应式特性 -->
      <input type="text" v-model="name">
  </div>
</template>

<script setup>
  let name = '张麻子';

</script>

3.2 ref 定义基本数据类型 有响应式

<template>
  <div>
      <h1>{{name}}</h1>
       <!-- 修改数据 有响应式 -->
      <input type="text" v-model="name">
      <button @click="setData">修改数据</button>
  </div>
</template>

<script setup>
 import {ref} from 'vue';   
    
 let name = ref('张麻子');
   //js中修改数据有响应式
 const setData = ()=>{
     name.value = '黄四郎'
 }
     
</script>

3.3 reactvie 定义引用数据类型 有响应式

<template>
  <div>
      <h2>{{user.name}}</h2>
      <!-- 修改数据 有响应式 -->
      <input type="text" v-model="user.name">
      <!-- 新增属性 -->
      <button @click="addItem">新增属性</button>
  </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
let user = reactive({
  name:'张麻子',
  age:40
})
// js中新增对象属性-可以直接赋值和修改（有响应式），在ts环境下，vscode会提示错误，但在页面中可以正常渲染
const addItem = ()=>{
  user.like='打豆豆'
}

</script>

4.methods 方法定义

<template>
  <div>
    <!-- 年龄 + -->
    <h1>{{user.age}}</h1>
    <!-- 调用方法 -->
    <button @click="addAge">年龄+</button>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

let user = reactive({
  name: "张麻子",
  age: 40,
});
//方法
const addAge=()=>{
    user.age++;
}
//方法调用方法
const getUserInfo=()=>{
  addAge()
  console.log(user.age)
}
</script>

5.computed 计算属性

<script setup>
import { ref, reactive, computed } from "vue";

let user = reactive({
  name: "张麻子",
  age: 40,
});
//计算属性
const getAge = computed(()=>{
  return '我的年龄'+user.age
})
</script>

6.watch 使用

watch(监听数据源,执行函数,[配置参数])    
//配置参数： 立即执行 深度监听
{immediate: true, deep: true }

6.1 监听基本数据类型单一数据源

<script setup>
import {ref, watch} from 'vue'
 let name = ref('张麻子')

 //监听器
watch(name,(newVal,oldVal)=>{
    console.log('变量发生了改变...',newVal);
})
</script>

6.2 监听引用数据类型单一数据源

<script setup>
import {reactive, ref, watch} from 'vue'
let user = reactive({name:'张三',age:14})
 //监听器
watch(()=>user.name,(newVal,oldVal)=>{
  console.log('对象user中的name属性发生了变化..',newVal);
})
</script>

6.3 监听引用数据类型 多数据源[深度监听]

<template>
  <div>
    <button @click="addNum()"> 添加随机数</button>
    <div v-for="item in nums" :key="item">{{ item }}</div>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
let nums = reactive([]);

//添加随机数
const addNum = () => {
  let num = Math.ceil(Math.random() * 100);
  nums.push(num);
}
//监听数组变化-深度监听
watch(()=>nums,(newVal,oldVal)=>{
    console.log('nums数组发生了变化..',newVal);
},{deep:true})

</script>

7.生命周期

vue2	vue3.0	vue3.2	备注
beforeCreate		setup	组件创建之前 可以获取顶级实例对象
created		setup	组件创建完成，可以获取变量
beforeMount		onBeforeMount	挂载前，VNdom创建完成，真实dom未渲染
mounted		onMounted	挂载完成，真实dom创建完成，可以获取dom
beforeUpdate		onBeforeUpdate	dom更新前触发
updated		onUpdated	dom更新完成触发
beforedestroy，destroyed	beforeUnmount	onBeforeUnmount	组件卸载后触发 所有的挂载的数据 子组件全部卸载后触发
	errorCaptured	onErrorCaptured	在捕获一个来自后代组件的错误时被调用
	renderTracked	onRenderTracked	跟踪虚拟 DOM 重新渲染时调用
	renderTriggered	onRenderTriggered	当虚拟 DOM 重新渲染被触发时调用
activated	activated	onActivated	缓存组件激活时调用
deactivated	deactivated	onDeactivated	缓存组件失活时调用

<template>
  <div>
      <div class="box"></div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue';
  //生命周期钩子监听
  onMounted(()=>{
    console.log(document.querySelector('.box')); //可以获取dom
  })
</script>

8.组件使用

• 创建 src/components/Son.vue
• App.vue中导入并使用该组件

vue3.2 中当我们导入子组件时，setup语法糖会自动去注册该组件，所以注册语句不用写了。

<template>
  <div>
    <son></son>
  </div>
<script setup>
import Son from './components/Son.vue'
</script>

9.组件通信

9.1 父传子 defineProps

• 父组件

<template>
  <div>
      <Son class="box" title="我是父组件传递的标题" :likes="likes"></Son>
  </div>
</template>

<script setup>
  import Son from './components/Son.vue'
  let likes = ['张三','李四']
</script>

• 子组件

<script setup>
const props=defineProps({
    title:{
        type:String,
        default:''
    },
    likes:{
        type:Array,
        default:()=>[]
    }
})
</script>

9.2 子传父 defineEmits

• 子组件

<template>
    <div>
        <button @click="sendData">传递数据</button>
    </div>
</template>

<script setup>
//定义自定义事件
const emit = defineEmits(['send'])
//自己的事件执行函数
const sendData = () => {
    //执行自定义事件
    emit('send', '我是儿子组件传递的数据')
}
</script>

• 父组件

<template>
  <div>
      <Son class="box"  @send="getData" ></Son>
  </div>
</template>

<script setup>
  import Son from './components/Son.vue'
  //触发自定义事件-接收数据
  const getData = (data)=>{
    console.log(data);
  }
</script>

chatGPT是什么

我们都知道目前火出圈的AI绘画和chatGPT

那么它们是什么呢？

一、chatGPT是什么

ChatGPT是由OpenAI开发的一个人工智能聊天机器人程序，于2022年11月推出。该程序使用基于GPT-3.5架构的大型语言模型并通过强化学习进行训练。它以对话方式进行交互。在推广的期间中，所有人可以免费注册，并在登入后后免费使用 ChatGPT 实现与 AI 机器人对话

有世界首富——电动汽车巨头特斯拉掌门人马斯克（ Elon Musk）入股的研发公司OpenAI表示，最新推出的聊天机器人ChatGPT在不到一周时间里就拥有百万用户。

ChatGPT是OpenAI发布的聊天机器人模型，它的交互界面简洁，只有一个输入框，AI将根据输入内容进行回复，并允许在一个语境下持续聊天。

二、如何强大

据浙商和国盛证券研报，ChatGPT相比以往的主要提升点在于记忆能力，ChatGPT可以储存对话信息，延续上下文，从而实现连续对话，这在对话场景中至关重要，极大地提升了对话交互模式下的用户体验。

具体而言，此次新加入的训练方式被称为“从人类反馈中强化学习”（ReinforcementLearning from Human Feedback，RLHF）。这一训练方法增加了人类对模型输出结果的演示，并且对结果进行了排序。具体操作上，人工智能训练者扮演对话的双方，即用户和人工智能助手，提供对话样本。在人类扮演聊天机器人的时候，会让模型生成一些建议辅助训练师撰写回复，训练师会对回复选项打分排名，将更好的结果输回到模型中，通过以上奖励策略对模型进行微调并持续迭代。

此外，ChatGPT的背后离不开大模型、大数据、大算力。

ChatGPT成为AIGC里程碑的背后，是算力发展和数字时代形成的大数据所共同支持的大模型训练，才能实现目前的效果。由OpenAI研发的ChatGPT是微调后的GPT-3.5系列模型，有着多达1750亿个模型参数，并在今年年初训练完成。模型训练的背后离不开大数据的支持，OpenAI主要使用的公共爬虫数据集有着超过万亿单词的人类语言数据集。在算力方面，GPT-3.5在Azure AI超算基础设施（由V100GPU组成的高带宽集群）上进行训练，总算力消耗约3640PF-days（即每秒一千万亿次计算，运行3640个整日）。

AIGC里程碑级应用

AIGC 将是 Web3 时代的生产力工具。当我们迈入 Web3.0 时代，人工智能、关联数据和语义网络构建，形成人与网络的全新链接，内容消费需求飞速增长。UGC\PGC 这样的内容生成方式将难以匹配扩张的需求。AIGC 将是新的元宇宙内容生成解决方案。AIGC 的生成利用人工智能学习知识图谱、自动生成，在内容的创作为人类提供协助或是完全由 AI 产生内容。不仅能帮助提高内容生成的效率，还能提高内容的多样性。随着 NLP（Natural Language Processing，自然语言处理）技术和扩散模型（Diffusion Model）的发展，AI 不再仅作为内容创造的辅助工具，创造生成内容成为了可能。由此，将来文字生成、图片绘制、视频剪辑、游戏内容生成皆可由 AI 替代。

国盛证券表示，AIGC不仅改变创作，还将改变获取信息的主要方式。而在此之上，ChatGPT所展示了作为生产力的存在，ChatGPT在寻找答案、解决问题的效率上已经部分的超越了如今的搜索引擎，ChatGPT或许在未来会改变我们获取信息、输出内容的方式，AIGC有望成为数字经济时代驱动需求爆发的杀手级应用。

参考链接：

[维基百科]: “https://zh.m.wikipedia.org/zh-hans/ChatGPT “

chatGPT注册、登陆具体流程

需要科学上网

由于目前推广期间，chatGPT只要注册openai就可以免费使用chatGPT

一、进入chatGPT的注册页面

[chatGPT]: “https://chat.openai.com/auth/login “

二、点击Sign up注册

我注册的时候用的谷歌邮箱

三、进入了电话号码验证环节

一个号码模拟平台 https://sms-activate.org/cn?ref=2780512

第一步去注册登陆（这一步没什么问题）

第二步需要存钱了哈哈哈

当然，充多少一般都可以，如果只用这一次的话可以充少一点，0.2-0.5美元

我们可以选择支付宝来充值，很方便

等到充值到账（大概几分钟）

我们就可以购买服务了，点击购物车（这个便宜）

然后，可以在激活区看到待使用的临时号码，将此号码复制到 OpenAI 的验证码接收区里面。

先选择对应国家，再填号码，然后发送电话号码，激活区就可以看见验证码了。

电话验证完，注册完毕

四、登陆chatGPT

这时候我们就可以开始和它愉快的聊天了

我们下一篇会介绍它是什么？

响应式设计

自适应、响应式、弹性布局、屏幕适配，这是四个独立不同的概念。

一、区别

自适应：多端请求时返回不同的页面，服务端需要准备多套程序或者多套模板。

响应式：主要是利用css媒体查询使得在不同屏幕大小下，页面有不同表现，主要是元素布局等变化。

弹性布局：主要是利用百分比设置元素宽度，浮动还有flex设置元素布局等等。

屏幕适配：主要是应用于对完美还原设计稿尺寸有要求的页面，主要是利用 rem、vm等技术。（类似于750px的设计稿是一张图片，这张图片无论怎么缩放，都能显示很好的效果，现在我们的网页也需要图片这种等比缩放的效果，这么说你应该能体会到了。当然了，这里还需要顺便解决高清屏显示的问题。）

二、技术方案怎么选

1. 简单 & 对速度不敏感和对代码精简没要求 & 预算紧张

​ 响应式，一套代码解决多端

​ 展示阅读类 交互逻辑简单且少，且移动端与pc端内容差异不大，如新闻站，企业官网

2. 复杂 & 对精简代码和速度有要求 预算充足

​ 做两套 根据请求头自适应返回 web端 手机端 （后端可共用，也可不共用，如不同模块或者部署不同应用）

​ 功能类，交互逻辑复杂且多，如电商，社交类

3. 复杂 & 有多终端适配要求 & 对细节有一定要求 追求用户体验 & 预算豪华

​ 做两套 移动端用适配做以满足不同移动终端

4. 复杂 & 细节要求和技术追求极高 & 追求极致完美的用户体验 & 不差钱 （艺术家、哲学家）

​ 多端 多套 响应式 适配 多技术相结合

三、各种方案的详细讲解

1.媒体查询

要想实现css屏幕大小自适应，首先得引入 CSS3 @media 媒体查询器：

media的使用和规则：

　　①被链接文档将显示在什么设备上。

　　②用于为不同的媒介类型规定不同的样式。

语法：

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

实例：

/* 这是匹配横屏的状态，横屏时的css代码 */

@media all and (orientation :landscape){}

/* 这是匹配竖屏的状态，竖屏时的css代码 */

@media all and (orientation :portrait){}

@media X and (min-width:200px){}
/*X为媒体类型--->比如print/screen/TV等等*/

/* 宽度大于600px小于960之间时，隐藏footer结构 */

@media all and (min-height:640px) and (max-height:960px){
   　　　footer{display:none;}
}

在实际应用的时候，首先得在HTML的头文件里上加入以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

解释：　　　

width = device-width：宽度等于当前设备的宽度

initial-scale：初始的缩放比例（默认设置为1.0）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

因为media的类型很多，这里就发MDN的对应链接了：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

下面是media类型的screen（用于电脑屏幕，平板电脑，智能手机等）：

css自适应屏幕大小大方法：

@media screen and (min-width: 320px) and (max-width: 1156px){

              .site-bg-dl {
              position: fixed;
              height: 100%;
              width: 100%;
              z-index: 0;
              background-image: url(bjxzfwzx/images/bj1.png);
              background-size: cover;
              background-repeat: no-repeat;
              background-attachment: fixed;
              background-size:100% 100%;
              -moz-background-size:100% 100%;
            }
}

解释：

告诉浏览器当屏幕大于320px，并小于1156px下执行此代码；

在css中添加如下内容 可以分别定制不同屏幕的显示样式：

/* 大屏幕 ：大于等于1200px*/
@media (min-width: 1200px) { ... }

/*默认*/
@media (min-width: 980px){...}

/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }

/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }

Media Queries Level 4 引入了一种新的范围语法，在测试接受范围的任何特性时允许更简洁的媒体查询，如下面的示例所示：

@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}

2.如何选择屏幕大小分割点

如何确定媒体查询的分割点也是一个开发中会遇到的问题，下面是市场上的移动设备和电脑屏幕分辨率的分布情况，可以发现不同品牌和型号的设备屏幕分辨率一般都不一样

如果我们选择600px,900px,1200px,1800px作为分割点，可以适配到常见的14个机型：

而作为曾经典型的响应式布局框架，Bootstrap是怎么进行断点的呢？

上面的分割方案不一定满足项目中的实际需求，我们可以先用跨度大的分割点进行分割，如果出现不适配的情况可以再根据实际情况增加新的分割点。

3.移动优先 or PC优先

不管是移动优先还是PC优先，都是依据当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式。因此，移动端优先首先使用的是min-width，PC端优先使用的max-width。

移动优先：

/* iphone6 7 8 */
body {
    background-color: yellow;
}
/* iphone 5 */
@media screen and (max-width: 320px) {
    body {
      background-color: red;
    }
}
/* iphoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
    }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: #FF00FF;
    }
}
/* pc */
@media screen and (min-width: 1100px) {
    body {
      background-color: black;
    }
}

pc优先：

/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
        background-color: green;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
        background-color: blue;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
        background-color: #0FF000;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
        background-color: #0FF000;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
        background-color: #0FF000;
    }
}

4.百分比布局

通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，CSS3支持最大最小高，可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。

/* pc width > 1100px */
html, body { margin: 0;padding: 0;width: 100%;height: 100%;}
aside {
    width: 10%;
    height: 100%;
    background-color: red;
    float: left;
}
main {
    height: 100%;
    background-color: blue;
    overflow: hidden;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    aside {
      width: 8%;
      background-color: yellow;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: green;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    aside {
      float: none;
      width: 100%;
      height: 5%;
      background-color: yellow;
    }
    main {
      height: calc(100vh - 5%);
      background-color: red;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: blue;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    aside {
      float: none;
      width: 100%;
      height: 3%;
      background-color: black;
    }
    main {
      height: calc(100vh - 3%);
      background-color: red;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    aside {
      float: none;
      width: 100%;
      height: 7%;
      background-color: green;
    }
    main {
      height: calc(100vh - 7%);
      background-color: red;
    }
}

但是我们必须要弄清楚css中子元素的百分比到底是相对谁的百分比。

子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height；子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度；子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。跟padding一样，margin也是如此，子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width；border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度，除了border-radius外，还有比如translate、background-size等都是相对于自身的；

从上述对于百分比单位的介绍我们很容易看出如果全部使用百分比单位来实现响应式的布局，有明显的以下两个缺点：

• 计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
• 可以看出，各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

5.rem布局

REM是CSS3新增的单位，并且移动端的支持度很高，Android2.x+,ios5+都支持。rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。 因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可（而em是相对于父元素的）。

rem响应式的布局思想：

• 一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值
• 高度值可以设置固定值，设计稿有多大，我们就严格有多大
• 所有设置的固定值都用rem做单位（首先在HTML总设置一个基准值：px和rem的对应比例，然后在效果图上获取px值，布局的时候转化为rem值)
• js获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了。

rem布局的缺点：

在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前

/*上述代码中将视图容器分为10份，font-size用十分之一的宽度来表示，最后在header标签中执行这段代码，就可以动态定义font-size的大小，从而1rem在不同的视觉容器中表示不同的大小，用rem固定单位可以实现不同容器内布局的自适应。*/
function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

REM布局也是目前多屏幕适配的最佳方式。默认情况下我们html标签的font-size为16px,我们利用媒体查询，设置在不同设备下的字体大小。

/* pc width > 1100px */
html{ font-size: 100%;}
body {
    background-color: yellow;
    font-size: 1.5rem;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
      background-color: #FF00FF;
      font-size: 1.4rem;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
      background-color: green;
      font-size: 1.3rem;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
      background-color: blue;
      font-size: 1.25rem;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
      font-size: 1.125rem;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
      background-color: #0FF000;
      font-size: 1rem;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
      background-color: #0FF000;
      font-size: 0.75rem;
    }
}

6.视口单位

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：

单位	含义
vw	相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw
vh	相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh
vmin	vw和vh中的较小值
vmax	vw和vh中的较大值

用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为横屏情况）。例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。

那么vw或者vh很类似百分比单位。vw和%的区别为：

单位	含义
%	大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
vw/vh	相对于视窗的尺寸

从对比中我们可以发现，vw单位与百分比类似，单确有区别，前面我们介绍了百分比单位的换算困难，这里的vw更像”理想的百分比单位”。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

使用视口单位来实现响应式有两种做法：

1.仅使用vw作为CSS单位

• 对于设计稿的尺寸转换为为单位，我们使用Sass函数编译

  //iPhone 6尺寸作为设计稿基准
  $vm_base: 375; 
  @function vw($px) {
      @return ($px / 375) * 100vw;
  }
  

• 无论是文本还是布局宽度、间距等都使用vw作为单位

  .mod_nav {
      background-color: #fff;
      &_list {
          display: flex;
          padding: vm(15) vm(10) vm(10); // 内间距
          &_item {
              flex: 1;
              text-align: center;
              font-size: vm(10); // 字体大小
              &_logo {
                  display: block;
                  margin: 0 auto;
                  width: vm(40); // 宽度
                  height: vm(40); // 高度
                  img {
                      display: block;
                      margin: 0 auto;
                      max-width: 100%;
                  }
              }
              &_name {
                  margin-top: vm(2);
              }
          }
      }
  }
  

• 1物理像素线（也就是普通屏幕下1px,高清屏幕下0.5px的情况）采用transform属性scale实现

  .mod_grid {
      position: relative;
      &::after {
          // 实现1物理像素的下边框线
          content: '';
          position: absolute;
          z-index: 1;
          pointer-events: none;
          background-color: #ddd;
          height: 1px;
          left: 0;
          right: 0;
          top: 0;
          @media only screen and (-webkit-min-device-pixel-ratio: 2) {
              -webkit-transform: scaleY(0.5);
              -webkit-transform-origin: 50% 0%;
          }
      }
      ...
  }
  

• 对于需要保持宽高比的图，应该用padding-top实现

  .mod_banner {
      position: relative;
      padding-top: percentage(100/700); // 使用padding-top
      height: 0;
      overflow: hidden;
      img {
          width: 100%;
          height: auto;
          position: absolute;
          left: 0;
          top: 0; 
      }
  }
  

2.搭配vw和rem

虽然采用vw适配后的页面效果很好，但是它是利用视口单位实现的布局，依赖视口大小而自动缩放，无论视口过大还是过小，它也随着时候过大或者过小，失去了最大最小宽度的限制，此时我们可以结合rem来实现布局

• 给根元素大小设置随着视口变化而变化的vw单位，这样就可以实现动态改变其大小

• 限制根元素字体大小的最大最小值，配合body加上最大宽度和最小宽度

  // rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
  $vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
  @function rem($px) {
       @return ($px / $vm_fontsize ) * 1rem;
  }
  // 根元素大小使用 vw 单位
  $vm_design: 750;
  html {
      font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
      // 同时，通过Media Queries 限制根元素最大最小值
      @media screen and (max-width: 320px) {
          font-size: 64px;
      }
      @media screen and (min-width: 540px) {
          font-size: 108px;
      }
  }
  // body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
  body {
      max-width: 540px;
      min-width: 320px;
  }
  

7.图片响应式

这里的图片响应式包括两个方面，一个就是大小自适应，这样能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况；一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就是当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。

1.使用max-width（图片自适应）:

图片自适应意思就是图片能随着容器的大小进行缩放，可以采用如下代码：

img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

inline-block 元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。 max-width保证了图片能够随着容器的进行等宽扩充（即保证所有图片最大显示为其自身的 100%。此时，如果包含图片的元素比图片固有宽度小，图片会缩放占满最大可用空间），而height为auto可以保证图片进行等比缩放而不至于失真。如果是背景图片的话要灵活运用background-size属性。

那么为什么不能用width：100%呢？因为这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下，图片会被无谓地拉伸。

2.使用srcset

<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">

如果屏幕的dpi = 1的话则加载1倍图，而dpi = 2则加载2倍图，手机和mac基本上dpi都达到了2以上，这样子对于普通屏幕来说不会浪费流量，而对于视网膜屏来说又有高清的体验。

如果浏览器不支持srcset，则默认加载src里面的图片。

但是你会发现实际情况并不是如此，在Mac上的Chrome它会同时加载srcset里面的那张2x的，还会再去加载src里面的那张，加载两张图片。顺序是先把所有srcset里面的加载完了，再去加载src的。这个策略比较奇怪，它居然会加载两张图片，如果不写src，则不会加载两张，但是兼容性就没那么好。这个可能是因为浏览器认为，既然有srcset就不用写src了，如果写了src，用户可能是有用的。而使用picture就不会加载两张

3.使用background-image

.banner{
  background-image: url(/static/large.jpg);
}

@media screen and (max-width: 767px){
  background-image: url(/static/small.jpg);
}

4.使用picture标签

picturefill.min.js ：解决IE等浏览器不支持 的问题

<picture>
    <source srcset="banner_w1000.jpg" media="(min-width: 801px)">
    <source srcset="banner_w800.jpg" media="(max-width: 800px)">
    <img src="banner_w800.jpg" alt="">
</picture>

<!-- picturefill.min.js 解决IE等浏览器不支持 <picture> 的问题 -->
<script type="text/javascript" src="js/vendor/picturefill.min.js"></script>

picture必须要写img标签，否则无法显示，对picture的操作最后都是在img上面，例如onload事件是在img标签触发的，picture和source是不会进行layout的，它们的宽和高都是0。

另外使用source，还可以对图片格式做一些兼容处理：

<picture>
    <source type="image/webp" srcset="banner.webp">
    <img src="banner.jpg" alt="">
</picture>

总结：响应式布局的实现可以通过媒体查询+px,媒体查询+百分比，媒体查询+rem+js,vm/vh,vm/vh +rem这几种方式来实现。但每一种方式都是有缺点的，媒体查询需要选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配，另外用户体验也不友好，布局在响应断点范围内的分辨率下维持不变，而在响应断点切换的瞬间，布局带来断层式的切换变化，如同卡带的唱机般“咔咔咔”地一下又一下。通过百分比来适配首先是计算麻烦，第二各个属性中如果使用百分比，其相对的元素的属性并不是唯一的，这样就造成我们使用百分比单位容易使布局问题变得复杂。通过采用rem单位的动态计算的弹性布局，则是需要在头部内嵌一段脚本来进行监听分辨率的变化来动态改变根元素字体大小，使得CSS与JS 耦合了在一起。通过利用纯css视口单位实现适配的页面，是既能解决响应式断层问题，又能解决脚本依赖的问题的，但是兼容性还没有完全能结构接受。

四、响应式布局的成型方案

现在的css，UI框架等都已经考虑到了适配不同屏幕分辨率的问题，实际项目中我们可以直接使用这些新特性和框架来实现响应式布局。可以有以下选择方案：

• 利用上面的方法自己来实现，比如CSS3 Media Query,rem，vw等
• Flex弹性布局，兼容性较差
• Grid网格布局，兼容性较差
• Columns栅格系统，往往需要依赖某个UI库，如Bootstrap

五、响应式布局的要点

在实际项目中，我们可能需要综合上面的方案，比如用rem来做字体的适配，用srcset来做图片的响应式，宽度可以用rem，flex，栅格系统等来实现响应式，然后可能还需要利用媒体查询来作为响应式布局的基础，因此综合上面的实现方案，项目中实现响应式布局需要注意下面几点：

• 设置viewport
• 媒体查询
• 字体的适配（字体单位）
• 百分比布局
• 图片的适配（图片的响应式）
• 结合flex，grid，BFC，栅格系统等已经成型的方案

参考链接：

[响应式设计]: “https://juejin.cn/post/6844903814332432397 “

如何设计一个组件

在开发过程中，我们经常会遇到现有组件库无法满足需求，需要自己设计和实现组件的情况。那么，如何才能设计一个既满足产品需求，又易于开发人员使用的组件呢？本文就以一个级联组件的设计为例，探讨一下如何设计一个优质组件。

组件设计

需求分析

开发这个组件的原因是来自工作中遇到的一个需求。

产品提出的业务需求是实现一个地区的级联选择，并且应设计师要求，不能使用 Ant Design 的Cascader 级联选择，因此需要自己实现一个级联选择。

通常需要从 4 个角度对需求进行分析：

1. 业务需求角度
2. UI 设计角度
3. 开发人员角度
4. 与其他组件配合角度

业务需求角度

在拿到一个需求之后，我们不应当直接考虑如何实现，而要先思考一下，这个需求是不是真正的需求。或者说，这个需求背后，是否还有更加基础和核心的需求。

现在，我们拿到了一个地区级联选择的需求，那么我们应该仅仅实现地区级联选择吗？我认为不是的，今天我们拿到的是地区选择的需求，明天就可能变成职业选择。

因此，我们实际需要实现的，应该是一个支持N 级的级联选择框。

UI 设计角度

既然已经确定了要实现 N 级级联选择框，就需要考虑其在各个屏幕尺寸的兼容情况，于是我在组件中引入了 Grid 栅格 。并默认设置了 3 级级联的样式，同时为使用者提供了相应的配置选项，如下：

<Cascade
  rowProps={{
    gutter: 10,
  }}
  colProps={{
    xs: 24,
    sm: 24,
    md: 8,
    lg: 8,
    xl: 8,
  }}
/>

开发人员角度

我们开发的组件，不止会被我们的团队成员使用，甚至会开源给其他开发者使用。那么，提供给开发者更好的体验就尤为重要。

为了节省开发人员的学习成本，我们可以按照以下思路考虑：

1. 在满足基本需求的前提下，提供尽量少的 API。
2. 为 API 选项提供尽量少的配置项。
3. 为代码，特别是 API 提供尽量好的文档或注释。

定义的 Cascade 组件 Props 示例如下：

interface Props<T> {
  cascadeKeys?: CascadeKeys; // 自定义 dataSource 中 value label children 的字段
  value?: T[]; // 指定当前选中的条目
  onChange?: (value: T[], level: number) => void; // 选中选项时，调用此函数
  rowProps?: RowProps; // 行排列方式，可参考https://ant.design/components/grid-cn/
  colProps?: ColProps; // 列排列方式
  loading?: boolean[]; // 选择框loading装填
  dataSource?: T[] | CascadeData<T> | T[][]; // 可选项数据源
}

可以看到， Props 中只有 dataSource 是必须的。也就是说，如果你对配置项并不了解，组件也只需要最简单的配置，就可以正常工作了，例如：

<Cascade
  dataSource={pcaCascadeData}
/>

1. 在使用 TypeScript 时，还需要特别考虑类型匹配的问题。例如可以在使用组件时，传入一个类型，并且在 onChange 事件中如果使用了其他类型， TypeScript 检查就会提示错误，如下面例子中的 PCAItem 。

   <Cascade<PCAItem>
     dataSource={pcaCascadeData}
     cascadeKeys={pcaCascadeKeys}
     onChange={async (value: PCAItem[], level: number) => {
       setPCAData(value);
       setPCAIndex(level);
     }}
   />
   

2. 对于级联组件，我们还需要考虑 dataSource 的数据来源可能有两种。

   • 组件初始化时，就传入了所有的级联数据，例如 省/地/县/乡层级数据 。对应 Demo 中的“同步级联数据”，以及 Props 中 dataSource 类型定义的 CascadeData<T> | T[][] 。
     • 在某些场景下，虽然没有级联选择框存在，但也需要处理树形数据，包括数据的查询和校验等功能，因此将该方法封装到 CascadeData 类中。
     • 考虑到树的数据量可能非常庞大，如果在每次选择时都在树中搜索效率较低。因此设计成在组件创建时，直接遍历树中的所有节点，然后将每个层级所有节点的数据都存储在相应的 Map 中，之后就能很方便地查询数据。
     • 虽然在组件初始化时遍历所有节点比较耗时，但考虑到用户从进入页面到操作组件有一定时间差，因此我认为这个问题可以忽略。
     • 基于以上考虑，你在 Props 中 dataSource 类型中看到的 CascadeData<T> ，就表示直接传入了一个 new CascadeData(treeData) 。而T[][]就表示直接传入树形数据，由组件内部进行 new CascadeData(treeData) 。
   • 组件初始化时，只传入了第一级的选项，之后每级的选项通过前一级所选择的参数，从服务端获取。对应 Demo 中的“异步级联数据”，对应 dataSource 类型中的 T[] 。
     • 组件初始化时，只传入第一级的数据，其他级别传入空数组，如：[[{"code":110000,"name":"北京市"}],[],[]]，组件会渲染出 3 层级联选项。
     • 当进行选择时，需要使用者通过 onChange 事件自行更新下一级的数据。也就是说，组件完全放弃了对数据的控制。

与其他组件配合角度

由于该组件需要与 Ant Design 其他组件配合使用，如前面讨论过的 UI 部分，该组件就结合了 Grid 栅格 组件。既保证了该组件在各屏幕宽度下正常显示，又保证了与其他组件的显示一致。

除此之外，还需要考虑与 Form 表单 组件的配合，特别是兼容表单校验功能。

总结

本文通过一个级联组件的设计案例，探讨了如何从四个角度分析，进而设计一个优秀的组件。这 4 个角度分别是：

1. 业务需求角度
2. UI 设计角度
3. 开发人员角度
4. 与其他组件配合角度

我认为很多时候组件的设计并没有最优解，总是需要根据需求在各种方案中取舍。但只要按照本文提到的 4 个角度进行分析，就能设计出优秀的组件。

react-native环境搭建（Mac M1）

一、本机安装环境

安装官方的说法，需要具备的环境条件

node和npm的安装就不说了

下载yarn：

npm install -g yarn

react-native：

yarn add react-native --exact

//Mac m1 安装 Homebrew
/bin/bash -c "$(curl -fsSL https://gitee.com/ineo6/homebrew-install/raw/master/install.sh)"

环境变量：
 echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/mengfeng/.zprofile
   eval "$(/opt/homebrew/bin/brew shellenv)"

建议同学们早上去下载（网好），当然，不可避免的还是要出现一系列的问题，我们根据错误提示去查询相应的解决方案就行（因为每个同学的问题都不太一样）

下载watchman：

brew install watchman

下载pod（cocoapods）：

brew install cocoapods

到目前为止，我们已经安装了 Node、Homebrew、watchman、cocoapods

下面我们来安装xcode

二、xcode安装模拟器

我们在app store下载就可以，当然版本历史记录可以查看以前的xcode版本

当我们创建了一个项目，点击小三角，模拟器完美运行

三、react-native创建项目

创建项目

npx react-native init testapp

出现报错

解决以上问题的第一个error

报了一个警告，大概意思是不安全的写权限，目录是 /opt/homebrew/bin
于是我们把这个目录的写权限去掉

sudo chmod -R go-w /opt/homebrew/bin
sudo chmod -R go-w /opt/homebrew

解决第一个问题

我们需要下载ruby 2.7.5并将ruby版本指向2.7.5

如果你有条件的话请试试macruby109美元终身，ruby不太友好

下篇文章继续

参考链接：

[Mac下的环境搭建]: “https://juejin.cn/post/7119039164074426375 “
[rbenv下载缓慢解决]: “https://blog.csdn.net/shine_a/article/details/103927374 “
[mac下载rbenv]: “https://juejin.cn/post/6899650892313100302 “
[CocoaPods安装方法]: “https://blog.csdn.net/Wulitc/article/details/115682720"

C4d && OC

我们这篇文章是基于Mac Book Pro M1 Max芯片条件下运行的

（建议玩三维oc的同学还是再拥有一台windows比较好）

今天我们来学习另一款三维软件C4d，我们上面的文章介绍了blender，也说了C4d和blender的区别。

C4d触及到了版权问题和付费服务，但是还是有许多人热衷于C4d和我们大名鼎鼎的oc渲染器。

blender（开源免费功能全）

下面我们就来讲讲C4d和oc的安装初始化设置

我们先来看一下oc渲染器输出的效果

一、软件的安装

C4D软件下载方式二选一
网页不限速下载地址01：https://www.yuque.com/docs/share/42f77525-e323-4343-8b75-947b896f9b99?#

百度网盘下载地址02：https://pan.baidu.com/s/14HfYqsok_VNNTpqgM2lisg
提取码：ocye

不要下载到有中文目录的地方

下载完成之后里面有安装的教学视频，我简单的表述一下

1.点进链接，选择我们需要的版本下载即可

2.安装软件

打开之后，双击安装Cinema 4D Installer即可（按照引导安装，安装完要打开一次）

按Quit即可

二、软件的汉化

将汉化补丁拖进C4的界面就可以了（记得拖动的时候需要按住shift）

如果需要更新软件

将Chinese_26010_202204041.c4dupdate拖到界面更新即可

点击进入软件

软件安装及其汉化完成

三、oc渲染器的下载和安装

进入这一步我们首先需要科学上网（你懂的）

1.账户注册

我们先要注册一个oc官网的账户

这个我们根据提示填写信息和邮箱验证就可以了

2.下载oc（正版的哈，需要花钱的）

我们点击Downloads，进入下载界面，我们可以根据我们所使用的软件和系统来选择下载我们的软件

（目前好像M1可以试用一年）如果不行需要你登录，那你就交钱吧哈哈哈

下载之后解压文件

3.安装oc

mac用户使用这个建议使用一个稳定的软件版本，要不然会经常崩溃

这个oc是个插件，我们以后安装插件差不多都是这个流程

找到我们的安装目录，如果里面没有plugins就新建一个

将我们解压好的oc文件夹复制到我们的plugins里面

oc的文件夹里面有适配的c4d版本

重新打开我们的c4d软件，我们就可以看见oc了

四、oc渲染器的订阅流程

登陆进我们的官网，点击导航栏的shop，我们就看到了购买界面，有按年来算的，和按月来算，如果你是要长期使用oc

那么年度订阅那肯定是便宜的（一个月现在涨价了，以前是150多，现在170多）可以使用支付宝支付

然后购买完成，我们返回我们的软件界面，登陆账号，就可以使用oc了

有条件的再配个屏幕吧，这个太小了

五、oc渲染器的初始化设置

实时渲染的设置就这些，其他的可以看这里

目前新版的mac下的oc没有汉化补丁，所以看起来会不习惯一些

参考链接：

[新版oc设置]: “https://www.bilibili.com/video/BV1944y1Q7zY/?spm_id_from=333.999.0.0&vd_source=e6ad490de8a011714c955dbf8a265e32"
[oc官网]: “https://home.otoy.com/render/octane-render/"

Blender基本操作

虽然我们是程序员一枚，但是，既然学了3D那么我们就要拓展我们的技能

那么这篇文章就来讲讲这款免费的3维软件Blender（英文版）

你要问我C4d和Blender哪个好（Blender是免费的，不要钱）要是不差钱也可以玩玩oc渲染器（比较香）

具体操作还得看视频，我今天就总结一些快捷键

一、安装软件

下载—安装

二、更改配置

更改页面语言，如果需要更改为简体中文的话（如果找不到配置了，改为简体中文后就方便了）

三、界面快捷键

这些快捷键有点多，加油（当然，你也可以根据你的习惯去修改你的快捷键）

具体步骤如图所示：

我建议，在你选择直接使用快捷键的时候，尽量先去了解界面，快捷键是提高工作效率的首选，但初学者还是要先熟悉软件的界面操作，再逐步的去熟悉我们大量的快捷键来提高我们的工作效率。

在一些情况下，快捷键却会让你行云流水的操作变得生硬

其他快捷键我们都可以去视频练习哦

最后，一款双语切换插件给你们

参考链接：

[blender基础操作]: “https://www.youtube.com/watch?v=prQj0xVwMeo&list=PL3bztmH9zKvv4sjPb6PJyLgULvQYJ8e0f&index=4"
[双语切换]: “https://github.com/Mister-Kin/ToggleLanguage/releases/tag/v1.1"
[双语切换]: “https://mister-kin.github.io/manuals/toggle-language/ “

playcanvas初级

我们在开始本文章之前，推荐大家一个小工具，方便我们在油管上看英文视频

YouTube™ 双字幕

我们通过YouTube上Daniel Wood博主的playcanvas视频来浅入一下（看着文章来梳理视频内容食用更佳哦！）

start：工具下载

YouTube™ 双字幕可以帮助我们添加双语字幕

安装步骤：谷歌浏览器->设置->扩展程序->打开应用商店->查找->安装

下载完成之后，我们在扩展程序图标上就可以使用了，如果不起效果，请重新打开浏览器

一、第一课（Getting started with PlayCanvas）

我们第一课先来简单使用一下我们的可视化平台

第一节课主要是熟悉我们的可视化面板，上一篇playcanvas初识有讲解，如果感兴趣，我们还是可以看看我们的第一课的视频的

二、第二课（Entities and materials）

实体和材质是什么？

实体就是我们编辑器里面的方块、平面等几何体

材质是我们实体需要结合的属性

1.当我们创建材质资源的时候，我们可以将其分成一个组，方便我们以后去管理我们的材质

2.我们的贴图，那些属性，我建议先去看看Three.js的教程吧，或者有三维软件的使用基础也是容易理解的，如果不具备这些基础概念可以看看我之前的threejs的文章

3.简单的赋予实体材质的步骤就是如下图（还是比较容易的）

4.这节课视频主要讲的是贴图和材质和我们材质的一系列属性（不是api）

5.点击我们的Camera（摄像机）调节角度，点击界面右上角的Launch就可以渲染我们的画面了

三、第三课（Lighting）

我们的灯光也是有3种，平行光、点光源、聚光灯

这节课除了讲解几种灯光的属性之外，也有灯光与阴影的关系

聚光灯效果，我们在右边的属性栏也可以去修改我们聚光灯的其他属性

点光源效果（可以看成一个灯泡）

四、第四课（Skyboxes in PlayCanvas）

主要展示如何添加天空贴图

我们的贴图就是从这里下载的，可以去试试

[贴图纹理]: “http://www.humus.name/index.php?page=Textures “

具体的步骤总结：

⚠️注意：还是看视频详细，这只是总结一下哈哈哈

五、第五课（Particle systems in PlayCanvas）

这节课的东西我比较喜欢，粒子系统（会生成粒子和粒子动画）

具体的步骤总结：

这个比较简单，到了后面，这个会生成很多惊艳的动画效果

⚠️注意：这个属性比较多，认真看

六、第六课（Overview of scripts in PlayCanvas）

这节课没什么东西，就是讲解一下我们script资源文件的构造（给没有javaScript基础的同学讲的）

有基础的同学可以快速略过了

具体的步骤总结：

主要是讲一下script资源的操作

七、第七课（Make a 3D object move with code）

这节课开始就要编写js脚本文件了

通过我们下面的脚步编译，我们就可以渲染出方块渐行渐远的动画了

具体的API我们可以查询文档了

//test.js
var Test = pc.createScript('test');
var Move = function(entity){
  this.entity = entity;
}
// initialize code called once per entity
Test.prototype.initialize = function() {
    
};

// update code called every frame
Test.prototype.update = function(dt) {
    this.entity.translateLocal(-0.01,0,0);
};

// swap method called for script hot-reloading
// inherit your script state here
// Test.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// https://developer.playcanvas.com/en/user-manual/scripting/

八、第八课（Moving objects with keyboard input）

利用键盘的按键来控制我们实体的移动、旋转等

建议不要跟着视频的写法来练习，要自己去查文档，因为视频已经有点陈旧了

api都有所变化

我们的脚本实现的是利用键盘的上下左右来控制实体的上下左右

//test.js
var Test = pc.createScript('test');
var keyboard = new pc.Keyboard(window);
var Move = function(entity){
  this.entity = entity;
}
// initialize code called once per entity
Test.prototype.initialize = function() {
    
};

// update code called every frame
Test.prototype.update = function(dt) {
   if(keyboard.isPressed(pc.KEY_RIGHT)){
       this.entity.translate(0.01,0,0);
   }
    if(keyboard.isPressed(pc.KEY_LEFT)){
       this.entity.translate(-0.01,0,0);
   }
    if(keyboard.isPressed(pc.KEY_UP)){
       this.entity.translate(0,0,-0.01);
   }
    if(keyboard.isPressed(pc.KEY_DOWN)){
       this.entity.translate(0,0,0.01);
   }
};

// swap method called for script hot-reloading
// inherit your script state here
// Test.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// https://developer.playcanvas.com/en/user-manual/scripting/

九、第九课（Rotating objects with keyboard input）

这节课和上节课的内容差不多，就是利用键盘按键去控制实体的其他属性

教js零基础的同学一下变量的基础写法（可以快速略过了哈哈哈，还得扫一眼哈）

十、第十课（Rigid Bodies and Collision in PlayCanvas）

PlayCanvas中的刚体和碰撞这节课的知识点还是可以的

大体是讲物体碰撞的属性和运动

根据步骤可以实现碰撞

十一、第十一课（Adding sound to your game）

我们的游戏进去是不是有背景音乐呀，这节课就是将背景音乐加载进来

Audio Listener可以简单的说像耳朵一样，可以听见附近的声音

大体步骤如下，具体可以看视频了（还有许多细节）

十二、第十二课（Controlling audio with scripts）

这节课就是延续上面的，对于audio的属性讲解和脚本编写了，

这个任务交给你们了，写好评论，给你点大赞👍

参考链接：

[playcanvas初级教程]: “https://www.youtube.com/watch?v=fXc-JjH2nNo&list=PLGmYIROty-5ZX-a88X8ztUeYSPeuBj7rG “
[playcanvas官网API]: “https://developer.playcanvas.com/en/api/ “
[playcanvas中文]: “https://developer.playcanvas.com/zh/ “