angular7.0+ngx-weui公众号开发，开发及框架搭建（二）

 

 

接着上章节打开webstorm开发工具

1.webstorm

使用webstorm打开项目如下图

2.项目开发在手机端和web端要加一句话<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">放在src的index.html文件下。项目还要在手机端调试所以在运行的时候我们的http://localhost:4200/就没有用了,毕竟谷歌浏览器可以模仿手机，但还是和微信公众号有差别，所以修改package.json如下图所示

3.点击webstorm的npm，右键start，点击run start，在浏览器中就是以ip地址访问的了如下图所示。

2.框架搭建

1.上面都是基础玩的，主要让刚用的人玩的，下面开始框架搭建（是我朋友的然后我按自己理解进行改动）觉得不行的可以提哦。

2.我们先来创建common自定义公用组件和指令的core.module.ts 创建后如下图所示

import {NgModule, ModuleWithProviders} from '@angular/core';
import {CommonModule, HashLocationStrategy, LocationStrategy} from '@angular/common';
import {ReactiveFormsModule, FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {LocalStorage} from '../utils/local.storage';
import {SessionStorage} from '../utils/session.storage';
/**
 * 自定义组件
 */
const components = [
];
/**
 * 自定义指令
 */
const directives=[
]

const providers=[
  LocalStorage,
  SessionStorage,
  {provide: LocationStrategy, useClass: HashLocationStrategy}
];
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  declarations: [
    ...components,
    ...directives
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    ...components,
    ...directives
  ]
})
export class CoreModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CoreModule,
      providers: [
        ...providers
      ]
    };
  }
}

3.到这边webstorm肯定报错少了 LocalStorage, SessionStorage这两个TS文件所以我们要到，utils目录下创建local.storage.ts,      session.storage.ts两个文件,在创建一个util.ts公用的方法，在app.module.ts修改如下：

 

import {Injectable} from '@angular/core';

@Injectable()
export class LocalStorage {

  public localStorage: any;

  constructor() {
    if (!localStorage) {
      throw new Error('Current browser does not support Local Storage');
    }
    this.localStorage = localStorage;
  }

  /**
   * 保存字符串
   * @param {string} key
   * @param {string} value
   */
  public set(key: string, value: string): void {
    this.localStorage[key] = value;
  }

  /**
   * 获取保存的字符串
   * @param {string} key
   * @returns {string}
   */
  public get(key: string): string {
    return this.localStorage[key] || '';
  }

  /**
   * 保存对象
   * @param {string} key
   * @param value
   */
  public setObject(key: string, value: any): void {
    this.localStorage[key] = JSON.stringify(value);
  }

  /**
   * 获取保存对象
   * @param {string} key
   * @returns {any}
   */
  public getObject(key: string): any {
    return JSON.parse(this.l