项目流程以及技术点

移动智能社区项目日志项目简介智慧社区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 g2.项目库环境-脚手架安装可选:（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 save3.技术栈: 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:hidden3.清除浮动 4. 无法引入图标、图标显示不出来，出现以下错误以上问题报错是由于i标签内没有内容原因：图标路径出错，应该放在根目录dist下面。解决办法：在配置文件中配置字体库加载器,手动使用命令npm run preview （该命令会先清空跟目录，再用插件打包，会把图标文件打包到根目录下面）5.无法获取input输入框里面的值运用受控组件获取input框里面的值,无法获取.主要是子组件无法引用父组件的方法.原因:在子组件中Tps获取的是父组件里的属性,而handeleClick是一个方法,这里应该修改为OnClick才是组件上定义的属性.这样就可以获取到了6.js代码编写时出现以下报错5.难点:如果在父组件中,使用箭头函数,响应函数在箭头函数中执行,最初this指向最外层的父组件对象,子组件中无解.那么最外层只负责传递,让子组件使用箭头函数修改this,this自然指向子组件对象,这时就可以修改状态如果修改onchange函数的this指向子组件,那么可以通过状态的修改影响input组件显示的value值,但是在外部组件的状态没有受影响2.首页(1)顶部:使用妹子ui导航条组件(2)轮播:使用轮播组件(3)八大特色:使用列表组件 平方每列(4)三大广告:使用列表组件(5)牛仔裤:使用网格组件(6)底部:使用工具栏组件问题:(1)三大广告边距设置不相同(2)牛仔裤使用网格组件,无法显示在页面上.原因:使用的是默认网格组件,妹子ui上给该组件设置了一个固定的margin和padding,让内容一直显示在顶部解决方案:手动删除组件的margin和padding(3)底部导航条无法显示原因:整个页面高度不够解决方案:手动将轮播图片高度变小项目拓展1.jsx里面的注释格式 /*/2.em和rem的区别两者都是相对值,最终会由浏览器转换为像素值.一般都用于设置字体大小,但两者参照的值各不相同em参照值取决于其父元素的字体大小设置rem一般取决于内容的根元素:body字体大小的设置,因为em参照值太多不好控制,所以说更多使用rem设置,因为便于管理;在多列布局的情况很容易出现总宽度超过百分之百,不适合使用3.WebApp 与 NativApp相同点:都是面向移动端,布局都是面向小屏设备,不同点: WebAp:使用的是HTML+CSS+Javascript,可以直接在浏览器运行,如果想要运行在各大移动端平台,需要Android和IOS相关开发者来打包.缺点:加载缓慢,如果没有网络,页面是加载不出来的.需要用户记录需要访问的网址.优点:内容都是来自服务端的html,对内容的更新难度很小解决-打包: npm run dist NativApp:使用Android和IOS平台相关的语言.是可以直接打包.缺点:页面所有效果都是使用相应平台的组件搭成,每个组件的代码都是需要编译打包再执行,优点:所有资源都在本地,加载速度很快.使用WebApp就是使用前端3大技术面向移动设备开发,实现的应用模式.(目前还是需要移动端开发者的支持) 4. ES6模板语法(1)引入需要的模块 ES5:var React=require(“react”);ES6:import React from react;(2)定义模块组件类(所有的类都有构造器/属性/方法)ES5: React.creatClass()等价于 var reactClassObj=声明周期的属性Var optionObj=Object.assign(reactClassObj,optionObj) ; /属性拷贝OptionObj._proto_.reactClassObjRender:function(.)_proto_构造器:简单理解就是一个创建类的模板.Function Person()Var p1=new Person(张三)这个时候new这个关键字做了什么?直接调用当前类型的构造器,创建了一个新的object实例,让构造函数中的this指向”当前实例”对象,把当前类的父类需要继承属性和方法挂到object实例的原型上.ES5:Father.call(this) /去调用父类的方法和属性ES6:super() 代表父构造器.call (this) super关键字是自动根据extends 关键字动态去找到父类.再定义子类自己的特征继承: 子类拥有父类所有特征;父类必须存在于子类的原型链中ES5: function Father()Function Son()Father.call(this)1.Stotype=Ftotype /原型对象引用传递,子修改父2.Stotype=new Father() /该方法不好 会有很多垃圾数据产生3.Stotype=Object.create(Ftotype) 继承的方式Object.create创建指定对象的实例 ,在不影响父对象原型的情况下,让子类拥有父类原型的特征.4.还原子类构造器: Stotype.construct= SonES6:class APP extends React.Component /所有的React组件都有构造器,生