项目流程以及技术点.docxVIP

移动智能社区项目日志 项目简介 智慧社区?app（）,是一个面向移动端的?webApp,布局是面向小屏设备.主要功能模 块:用户登录/注册/购物/服务/动态/个人中心. 项目需求 项目流程 1.项目开始之前 客户公司公开招标——技术公司参与竞标（出?Demo）——竞标成功开始项目 2.项目启动 1.环境搭建 （1）使用?webston?编辑器 （2）安装?node?环境 （3）测试环境 node-v（6.10+）?npm-v（3.0+）?淘宝镜像 （4）安装?bower cnpm?I?bower?-g （5）安装?less cnpm?I?less?–g 2.项目库环境-脚手架安装 可选: （1）安装?yeoman?脚手架（方便项目搭建）?npm?I?–g?yo （2）本地安装?yeoman?的?generator npm?generato-react-webpack （3）使用妹子?UI?脚手架【本项目使用该方式搭建】 （4）使用脚手架搭建项目环境 （5）查看?package.json?文件?安装依赖包 npm?install （6）启动项目效果 安装一个懒人插件?opn npm?I?opn?–save 3.技术栈:?Css3 webpack react.js15.3.0 Less/Sass?yeoman 项目实施 1.登录页面 (1)pages?文件夹搭建登录页面组件?(由一个主容器,两个小容器组成[logo?和?form]) A:logo:?图片和文字 图片:import?引入图片路径;设置图片大小:不同设备尺寸大小不一致,不能设 置固定宽高,可按百分比设置响应式效果 B:form?表单 ①创建输入框组件?创建组件实例 编写样式(用到?css3?样式) ②LoginPage?组件页面引入输入框组件 (2)app.js?主组件中引入登录页面组件模块(类);渲染中应用组件实例 (3)使用?SCSS?预编译器编写样式 (4)loginPage?页面引入样式?:import?‘样式路径’ (5)web?字体图标的引用?(创建自己文件,导入字体库图标) 一般使用的框架是自带?web?字体的,如果框架字体库达不到需要,则可引入额 外的第三方字体库,如?icomoon. 步骤:①找到需要的字体,去?icomoon?官网下载. ②把字体库导入到项目中,创建字体文件夹 ③在项目中使用:在入口文件?引入字体库样式(全局引入) （6）运用到数据流的概念，将?input?标签的?type?属性和图标样式动态添加 C:登录页面的交互功能,可以使用”受控组件”和”不受控组件”两种方式.受控组件 更简单 思路:更改父组件的状态,子组件也会更新. ①父组件创建?handelChange?的方法,获取到?input?的值,赋值给一个新对象.再改 变父组件的状态?this.setState ②父组件创建?handelClick?的方法,该方法用来获取到?input?的状态值. ③登录按钮子组件引用父组件的?handeClick?方法.获取到输入框的值,就可以发 起请求. 注意①react?里面?this?的指向问题.②子组件引用父组件的方法,可以通过 由父 组件创建?construct?构造器将所有属性与方法以?props?传参的方式,用?super()继承 父组件的所有属性和方法.子组件通过?ps?去获取父组件的属性 问题: 1.LoginPage?is?not?defind 组件未找到?//查看路径是否正确 2.?Margin?塌陷问题:?解决方法?设置父容器的?overflow:hidden 3.清除浮动 4.?无法引入图标、图标显示不出来，出现以下错误 以上问题报错是由于?i?标签内没有内容 原因：图标路径出错，应该放在根目录?dist?下面。 解决办法：在配置文件中配置字体库加载器,手动使用命令?npm?run?preview?（该 命令会先清空跟目录，再用插件打包，会把图标文件打包到根目录下面） 5.无法获取?input?输入框里面的值 运用受控组件获取?input?框里面的值,无法获取.主要是子组件无法引用父组件的 方法. 原因:在子组件中 Tps?获取的是父组件里的属性,而?handeleClick?是一个方法,这里应该修改为 OnClick?才是组件上定义的属性.这样就可以获取到了 6.js?代码编写时出现以下报错 5.难点: 如果在父组件中,使用箭头函数,响应函数在箭头函数中执行,最初?this?指向最外 层的父组件对象,子组件中无解. 那么最外层只负责传递,让子组件使用箭头函数修改?this,this?自然指向子组件对 象,这时就可以修改状态 如果修改?onchange?函数的?this?指向子组件,那么可以通过状态的修改影响?inp