uni-app 入门到精通 （二）

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 设计以 7501334 iphone 6/6s 为基准设计的话，你只需要将屏幕上 px 写为 rpx 即可，不用做任何换算，如果不是的话，你就需要做如下换算：

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

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

2uniredirectTo(OBJECT)

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

3unireLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。

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

4uniswitchTab(OBJECT)

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

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

5uninavigateBack(OBJECT)

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

5unipreloadPage(OBJECT)

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

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

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

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

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

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

这个报名页面可以按方式写：

1、创建页面：在Uniapp项目中创建一个新页面，可以通过语法或者可视化的方式实现页面的布局和设计。

2、添加表单：在页面中添加表单，包括姓名、****、报名课程等必要信息，并设置表单中各个控件的属性。

3、验证表单：对表单中的信息进行数据验证，例如检查****是否正确、报名课程是否符合要求等。

4、提交表单：在页面中添加一个提交按钮，当用户填写完表单后，点击提交按钮进行表单信息的提交。

5、处理数据：当用户提交表单后，需要将表单中的数据保存到数据库中，并进行相应的处理，例如发送邮件通知用户、生成报名证书等。

首先介绍最原始的跳转方法，类似于html中的 a 标签，不过在uniapp中需要将 a 标签换成

<navigator url='跳转的地址'>……</navigator>

下面我们来重点介绍下跳转传值的方法

<view @tap="toOpportnity(itemid)">转商机</view>；

写一个onLoad函数

对象传参的接收方法

单个参数的接收，这里使用id来进行介绍

首先要把传递过来的id进行赋值

请求接口，接口的url地址后面要加上传递过来的id /${thisid}/

完整步骤如下：

对象传参报错解决方案（详细请看本篇文章： >

在UniApp中使用原生TCP连接时，可以通过以下步骤从服务端获取数据：

1 创建一个TCP连接，并连接到服务端。可以使用一个socket对象来实现（如： var socket = socketcreateTCPSocket()）。

2 在连接成功后，可以使用socket对象的send方法向服务端发送数据。例如，可以使用以下代码发送一条消息：

```

socketsend({

"data": "Hello World",

"success": function(res) {

// 发送成功

},

"fail": function(res) {

// 发送失败

}

});

```

3 在服务端处理消息后，可以使用socket对象的onReceive方法监听服务端返回的数据。例如：

```

socketonReceive(function(res) {

consolelog(resdata); // 在控制台中打印服务端返回的数据

});

```

4 如果要关闭连接，可以使用socket对象的close方法来关闭连接。例如：

```

socketclose({

"success": function(res) {

// 连接关闭成功

},

"fail": function(res) {

// 连接关闭失败

}

});

```

请注意，以上示例仅供参考，并不是具体实现所需的完整代码。使用TCP连接时，您需要根据自己的实际需求来编写相应的代码，并处理可能出现的错误和异常情况。

什么是组件？

  组件是视图层的基本组成单元。一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。说白了，组件就是我们之前写的HTML标签呗，标签的名不一样而已！

组件属性类型：

组件共同属性类型：

所有组件都有的属性：

特殊属性：

  几乎所有组件都有其自己个儿的属性，可以对该组件的功能或样式进行修饰，这个我们在体验各个组件时就能了解到。

组件分类：

基础组件分为以下十大类：

  视图容器（View Container）

  基础内容（Basic Content）

  表单组件（Form）

  导航（Navigation）

  媒体组件（Media）

  地图（Map）

  画布（Canvas）

  webview（Web-view）

  平台开放数据（Open-data）

  扩展组件（Uni-ui）

Tips:

走，体验去！

以上就是关于uni-app 入门到精通 （二）全部的内容，包括:uni-app 入门到精通 （二）、uniapp报名页面怎么写、uniapp 页面跳转传值和接收等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！