Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
e2e
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

README.md

appbuilder -- build by Angular

本项目是以angular-cli为基础,适用于移动web的项目。

一、包含的功能

二、项目特殊说明

import * as Cookie from 'js-cookie';

三、项目结构说明

  • app
  • -- article 文章模块
  • -- community 论坛模块
  • -- enter 登录、注册、找回密码,非模块仅页面,属于主模块
  •   -- weixin-login-resolve.service 微信登录的特殊处理
  • -- home 首页模块
  • -- mine 个人中心模块
  • -- product 项目的product模块
  • -- share 项目公共模块,包含组件和服务
  •   -- service 公共服务,在根模块引入service.module即可
  •   -- animation 转场动画,来自大漠穷秋老师的nicefish
  •   -- guard 路由守卫(service),最新的angular-cli已将此独立出来,可以单独生成,使用前要在模块引入component.mudule
  •   -- component 公共组件,使用前要在模块引入component.mudule
  •   -- pipe 公共管道,使用前要在模块引入component.mudule

四、使用方法

  • package.json配置:

  • "start": "ng serve --proxy-config proxy.conf.json --host 192.168.1.29 --port 80"

  • host 为本机IP,port为端口

  • npm start 后,手机在同局域网下可访问该IP

1.rem 布局

在根组件调用一次就行。

this.rem.setDpr();
window.onresize = () => {
  this.rem.setDpr();
};

返回文档顶部

2.下拉刷新和上滑加载(翻页)

  • html
<app-load-and-refresh [url]="'/api/index/index'" [body]="body" [dataKey]="'products'" (onRefresh)="refreshData($event)" (onLoad)="loadData($event)" [disabledRefresh]="true" [disabledLoad]="true">
  <!--url: 请求地址,默认get请求-->
  <!--body:请求参数-->
  <!--dataKey:请求返回content内的数据节点名,不写就返回content节点数据-->
  <!--(onRefresh)="refreshData($event)":父组件绑定的刷新事件-->
  <!--(onLoad)="loadData($event)":父组件绑定的翻页事件-->
  <!--class="refresh-content"为组件内嵌tag,不可删除-->
  <!--disabledRefresh:为true就关闭刷新,不使用该接口或为false即为开启-->
  <!--disabledLoad:为true就关闭翻页,不使用该接口或为false即为开启-->
  <div class="refresh-content">
    <!--在这里放入需加载数据的html结构-->
    <div *ngFor="let item of list;let idx = index"></div>
  </div>
</app-load-and-refresh>
  • TS
export class FindComponent implements OnInit {
  list;
  refreshData(action) {
    // 从loader组件返回action
    this.list = action; //返回赋值
  }

  loadData(action) {
    this.list = this.list.concat(action);
  }
  constructor(
  ) { };

  ngOnInit() {
  }
}

返回文档顶部

3.轮播回弹

  • html
<app-carousel [data]="topCarousel" [interval]="3000" [height]="7.31" [width]="10" *ngIf="topCarousel" hasLink="true">
</app-carousel>
<!--data:元素为对象的数组,内部实现需根据接口更改-->
<!--interval:轮播间隔时间,单位为毫秒-->
<!--height:高度,单位rem-->
<!--width:宽度,单位rem-->
<!--hasLink: 为true则可以点击跳转页面,否则就是一般的轮播图-->

返回文档顶部

4.resolver

  • 路由配置
{
  path: 'product',
  component: ProductIndexComponent,
  data: {
    api: '/api/product/list', // 接口地址
    ajaxNeedUserId: true, // 请求是否需要用户ID
    urlParams: 'key1,key2', // 从url上获取指定的参数和值
    body: { // 接口参数
      type: 1,
      page: 1,
      pageCount: 10
    }
  },
  resolve: {
    content: ResolverService // 对应的服务
  }
},
  • TS
export class ProductIndexComponent implements OnInit {
  title;
  detail;
  constructor(
    private route: ActivatedRoute,
  ) { }

  ngOnInit() {
    this.route.data
      .subscribe(res => {
        this.detail = res['content'];
        this.title = res['title'];
      });
  }

}

返回文档顶部

5.封装的http请求

  • TS
export class ProductIndexComponent implements OnInit {
  constructor(
    private api: ApiService
  ) { }

  ngOnInit() {
    this.api
      .ajax({
        method: 'get',
        url: '、api/index/appinfo',
        downNewUserInfo: true, // 是否更新本地的用户信息
        body: {
          // 参数
        }
      })
      .subscribe(res => {
        // do something
      });
  }

}

返回文档顶部

6.storage

  • TS
export class ProductIndexComponent implements OnInit {
  constructor(
    private storage: StorageService
  ) { }

  ngOnInit() {
    // 存放
    this.storage.put({
      type: 'localStorage', // 也可以是sessionStorage
      key: 'appinfo',
      data: [
        // ...
      ]
    });
    // 获取
    this.storage.get('appinfo');
    // 移除
    this.storage.remove('appinfo,id');
    // 清空
    this.storage.remove(); // 清空localStorage和sessionStorage
  }

}

返回文档顶部

7.返回顶部

  • HTML
<app-back-top></app-back-top>

返回文档顶部

8.顶部

<app-header [hasBack]="true" [hasCar]="true" [autoNav]="true" [headerTitle]="'标题'" [hasBottom]="true">
  <!--hasBack:是否有返回按钮-->
  <!--hasCar:是否有购物车按钮-->
  <!--autoNav:是否有默认的首页菜单-->
  <!--headerTitle:标题-->
  <!--hasBottom:是否有底部线-->
  <div class="header-content"></div>
  <!--放自定义内容-->
</app-header>

返回文档顶部

9.底部

<app-footer></app-footer>

返回文档顶部

10.导购列表

<app-guide-list [guides]="guides" [toggle]="toggle" (outGuideToggleValue)="outGuideToggleValue($event)"></app-guide-list>
<!--guides:导购数据-->
<!--toggle:是否显示导购列表-->
<!--outGuideToggleValue:toggle的返回值-->
outGuideToggleValue(action) {
  this.toggle = action.toggle;
  this.guide = action.guide; // 选中的导购信息
}

返回文档顶部

11.全屏遮罩

<app-full-shadow [show]="toggle" (outShadowToggleValue)="outShadowToggleValue($event)">
<!--show:是否显示遮罩-->
<!--outShadowToggleValue:用于接收toggle的返回值-->
</app-full-shadow>
outShadowToggleValue(action) {
  this.toggle = action; // boolen
}

返回文档顶部

12.滚动导航

<app-swipe-menu [productList]="productList" [url]="'/api/product/list'" [categoryId]="'categoryId'" (childEvent)="getChildEvent($event)"  [inputId]='true'>
<!--productList:导航数据数据-->
<!--categoryId:请求时的分类参数,为字符串;不传默认categoryId-->
<!--url:点击导航请求数据的地址-->
<!--getChildEvent:父组件接受子组件的数据,有请求返回请求结果,无url时,返回该导航id-->
<!--inputId:可以不传,当为true时,返回id-->
</app-swipe-menu>
getChildEvent(content) {
  console.log(content);// 请求对象或者导航id
}

返回文档顶部

13.产品列表

<app-product-list [productList]="products" [disBlock]="true" [productType]='promotion'>
<!--productList:产品数据数组-->
<!--disBlock:样式显示true:块状;false:条状-->
<!--productType:产品类型。可以不传。默认普通产品,point:积分产品;promotion:促销产品-->
</app-product-list>

返回文档顶部

You can’t perform that action at this time.