uni-app 入门到精通 （二）

Posted 2023-03-08

参考技术A

18 年时候有幸接触到 uniapp , 写了一篇 《uni-app 入门到精通》 ，由于一些原因，该方案并没有执行，该项目一系列文章也就没有再写下去，所以遭受到了许多人评论的吐槽，到如今公司项目的需求又要根据 uniapp 写 H5 嵌入到 app 中，所以想根据项目实际开发分享一下，有兴趣的伙伴可以参考和吐槽。

这一篇文章主要分享一下内容

uniapp 模板项目有两种初始化方式

由于无法舍弃 VSCode ，我们采用 vue-cli 来初始化项目， HBuilderX 大家可以参照官方文档

这种方式是可以通过 vue 脚手架命令指定模板，这个是 dcloudio 的官方提供模板

我们选择默认模板即可，
成功后我们执行

打开浏览器地址，直接运行即可。

一般刚接触前端的小伙伴可能会对 postcss 不太了解，这里简单介绍一下，

当然 PostCSS 具体使用是需要引入一些插件的，例如常用的是 autoprefixer postcss-preset-env 等, 具体如何使用大家可以自行参考资料，毕竟这块知识还是挺多的就不具体展开解释了。

通常我们在写移动端时候需要做的是页面适配方案的确定， uni-app 支持的通用 css 单位包括 px、rpx ， 之前的 upx 方案已经被废弃掉，官方解释是目前市面上已经基本上支持了微信的 rpx 方案，所以 upx 中转方案已经意义不大了，不过还可以继续使用，不过已经不再推荐。

rpx 之初是由微信小程序提出一种方案，即根据宽度来进行适配以 750 宽屏幕为基准， 750rpx 恰好为屏幕宽度, uni-app 规定屏幕基准宽度 750rpx 。所以说如果你们的UI 设计以 750*1334 iphone 6/6s 为基准设计的话，你只需要将屏幕上 px 写为 rpx 即可，不用做任何换算，如果不是的话，你就需要做如下换算：

uniapp 有自己一套路由管理机制，而未采用 vue-route 方案，个人认为这套方案还是比较成熟和好用的，以及可以满足我们日常的需求:

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

2.uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

3.uni.reLaunch(OBJECT)
关闭所有页面，打开到应用内的某个页面。

注意： 如果调用了 uni.preloadPage(OBJECT)) 不会关闭，仅触发生命周期 onHide

4.uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

注意： 如果调用了 uni.preloadPage(OBJECT)不会关闭，仅触发生命周期 onHide

5.uni.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

5.uni.preloadPage(OBJECT)

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。

以上路由API 已经满足我们的需求，当然进行路由跳转的前提是我们需要在 pages.json 进行路由配置, 包括路由和具体的样式配置

而进行具体路由跳转我们需要如下，需要多加一个 /

需要特别注意的一点是, 利用浏览器 在 进行 移动H5页面调试时候，会出现页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。

uniapp 提供网络请求的 api 是 uni.request ，具体支持的请求方法可以参考官网 method 有效值

不过我们通常不会直接使用，而是进过一系列的封装以方便我们的使用，具体封装接口使用会在随根据页面数据请求一并展示。

flutter从入门到精通二

静态方法和静态属性（static）：

• 通过static修饰的方法和属性称为静态方法和静态属性，注意静态方法和静态属性只能通过类名访问，不能通过对象访问。
• 静态方法不能访问非静态的属性和非静态方法，反正可以

class Person{
  String name;
  int age;
  Person(this.name,this.age);
  printInfo(){
    //在字符串中，可以直接通过${}访问类的属性和方法
    print('${this.name}---${this.age}');
  }
}

class Web extends Person{
  /**
    *super 是调用父类的构造方法
    *构造函数是无法继承,所有在子类继承父类的时候，需要super来实现父类的构造方法
    */
  Web(String name, num age) : super(name, age);
    
  // override可写，可不写，建议写上
  @override
  printInfo(){
    print('子类中的${this.name}---${this.age}');
  }
}
main(){
  /**
   * Dart中对象操作符
   * ？条件运算符
   * is类型判断
   * ..级联操作
   */
  Person p1;
  // 下面表示如果p1是空，表示不执行后面的，如果有值，执行后面的
  p1?.printInfo();
  Person p2=new Person('张三',20);
  p2?.printInfo();

  p2..name='李四'
    ..age=20
    ..printInfo();
}  

抽象类:用abstract修饰的类

抽象类中有抽象方法，其是没有方法体的，继承抽象类的子类必须要实现子类的抽象方法

abstract class Animal{
  // 抽象方法,子类必须要实话抽象方法
  eat(); 
}

class Dog extends Animal{
  @override
  eat() {
    print('我是小狗');
  }
}
main(){
  /**
   * 抽象类（abstract主要用来指定标准)
   * 在dart中，定义接口和定义抽象类一样，都使用abstract，**dart中接口没有使用interface定义**
   * 抽象类不能被实例化，只有继承他的子类实例化 
   * 接口里面必须全部是抽象方法，没有普通的方法，但是抽象类中可以既有普通方法，也有抽象方法
   */
  Dog d=new Dog();
  d.eat();
}  

一个类可以实现多个接口,但是只能单继承抽象类，如果模仿多继承，可以使用mixins，作为mixins的类只能继承Object，不能继承其他的类，作为mixins的类不能有构造函数，如下：

class A{
  printA(){
    print('A');
  }
}
class B{
  printB(){
    print('B');
  }
}
//如果模仿多继承，可以使用mixins
class C with A,B{

}
main(){
  C c1=new C();
  c1.printB();
}  

泛型：可以解决代码重用和不特定的类型校验的问题

// 泛型方法，注意需要加上三个地方T
T getData<T>(T data){
  return data;
}
main(){
  
  print(getData<String>('我叫唐凯震'));
}  

dart中的库

import 'package:http/http.dart';
main(){
  /**
   *  库
   * dart中，库通过import引入,注意是没有from
   * 每个dart文件都是一个库
   * 库分类：
   * 1，自定义库
   * 2，系统内置的库：import 'dart:xxx'
   * 3，第三方库，托管到pub包管理系统中的
   * 第三方库可以从下面的地址中寻找：
   * https://pub.dev/packages
   * 
   * 使用第三方库按照下面步骤：
   * 1，创建pubspec.yaml文件
   * 2,配置pubspec.yaml文件
   * 3，运行put get获取远程库
   * 5，看文档引入库使用
   */
}  

con

扫码关注公众号，有更多精彩文章等你哦