uni-app

uni-app是一个使用vue.js开发所有前端应用的框架基本语言包括js、vue、css，开发者编写一套代码，可发布到iOS、Android、H5 以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝等)、快应用等多个平台。作为一名前端工程师需要需要一个支持多平台使用、扩展灵活的开发工具。uniapp是一个使用vue.js开发所有前端应用的框架，可支持小程序，web端... 简单来说，就是一套代码多端使用。开发多个平台的时候，就是开发多端，其中包括安卓、IOS、H5/公众号、微信小程序、百度小程序...等其它小程序时，如果每个平台开发，人力开发成本高，后期维护也难，原生开发周期也长，那Unipp是优先选择。

关于uniapp的一些使用介绍：
开发工具：HBuilderX，微信开发者工具... HBuilderX内置相关环境，开箱即用，无需配置nodejs。

插件：可以去插件市场找，一般需要的插件市场都会有，也会有一些UI框架，比如uView，用起来也比较可以，有很多组件可以直接使用。正常的开发还是比较满足的，如果还是不满意就去插件市场找或者自己写组件了。

写法：因为uni是用vue开发的嘛，所以基本上就是vue的写法，只是一些标签使用不同，比如div是view，span是text...更多的可以直接看文档，文档写的很清楚。

页面路由：在pages.json里面可以写文件的路径、窗口样式、原生的导航栏、底部的原生tabbar，类似于这种。

  

                                                                       （页面跳转）

在uniapp课程学习时，先学习认识了组件Uni-APP是一款跨平台开发框架。在 uni-app 中，提供了丰富的组件库，以下是一些常用的组件：

1. 基础组件：包括页面、滚动容器、文本、图标、按钮、表单等基础组件，可以满足基本的开发需求。

2. 列表组件：包括列表、卡片、表格等组件，可以快速构建列表页面。

3. 导航组件：包括标签栏、导航栏、选项卡等组件，帮助用户快速找到需要的内容。

4. 提示组件：包括模态框、加载动画、提示框等组件，通过提示组件可以更加友好的展示信息给用户。

5. 媒体组件：包括图片、视频、音频等组件，可以让应用程序支持多媒体内容展示。

6. 展示组件：包括轮播图、图集、走马灯等组件，可以更好地展示内容。

7. 业务组件：包括日历、图表、时间选择器等组件，可以帮助开发者处理更多的业务需求。

总之，uni-app 中提供了众多的组件，可以满足不同场景下的开发需求，同时也支持自定义组件和插件开发。开发者可以根据具体的开发需求来选择合适的组件，高效地开发多端应用程序。

    

看到这里，是不是觉得它非常强大，竟然一套代码，可以兼容多端，基本应用软件可以直接一套搞定，但是还是那句话，包容性如此强，肯定也有相对应不足的地方，比如性能方面，还需要了解各平台，还有未知的坑，当然正常的软件小程序是不影响，如商城啊等等，不过要大型的就可能有点不足，它的路由就做不到这点，比如一个页面，功能许多，很复杂，当然会卡，有些非常强大的框架如nuxt等服务器渲染，它的路由是可以切换页面，有点类似放一个iframe,这种性能上，确实会好很多。但是不要忽视它的强大，目前来说大部分软件，小程序它都可以做到。该团队也非常棒。

如何创建运行发布项目？介绍通过命令行创建项目、运行或发布到各平台

1. 全局安装 vue-cli：

npm install -g @vue/cli

2.创建项目：

vue create -p dcloudio/uni-preset-vue 项目名称

3.运行项目：

npm run dev:%PLATFORM%

4.发布项目：

npm run build:%PLATFORM%

开发规范

uni-app 使用vue的语法结合小程序的标签和API。 为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

1.页面文件遵循 Vue 单文件组件 (SFC) 规范

2.组件标签靠近小程序规范，详见uni-app 组件规范

3.接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范

4.数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期

5.为兼容多端运行，建议使用flex布局进行开发

在使用 uni-app 进行开发的过程中，通常需要与后端进行数据交互，这就需要用到接口。下面介绍一些 uni-app 写接口的方法：

1. 使用 uni.request 方法发送请求

uni.request 方法是 uni-app 提供的一个发送请求的 API，可以发送各种类型的请求，包括 GET、POST 等等，可以传入相应的参数，比如请求路径、请求头、请求参数等等。代码示例：

 

2. 使用 uni.uploadFile 方法上传文件

如果需要上传文件，可以使用 uni.uploadFile 方法，该方法支持文件上传和参数传递。代码示例：

 

3. 使用 uni.downloadFile 方法下载文件

如果需要下载文件，可以使用 uni.downloadFile 方法，该方法可以将文件下载到本地。代码示例：

 

以上是 uni-app 写接口的一些方法，可以根据需要选择和使用。需要注意的是，在请求接口时，要合理设置请求头和请求参数，确保请求的安全性和正确性。

在 uni-app 课程学习中我们主要使用 `uni.request` 方法来发送请求，该方法可以发送各种类型的请求，包括 GET、POST 等等，可以传入相应的参数，比如请求路径、请求头、请求参数等等。

                                                   （新闻页面实例上课代码）

下面是使用 uni.request 方法发送请求的示例代码：

 

在上面的示例中，`url` 参数指定了请求的地址，`method` 参数指定了请求的类型，`header` 参数指定了请求头，`data` 参数指定了请求的数据。`success` 回调函数在请求成功后被调用，`res` 参数包含了响应的数据。如果请求失败，`fail` 回调函数会被调用，`err` 参数包含了错误信息。

需要注意的是，在发送请求时，要注意接口的安全性和正确性，确保请求参数正确，并且要遵循后端接口的规范。同时，要注意处理请求的结果，确保页面能够正常地展示数据。

使用 `uni.request` 方法发送请求有如下优点：

1. 灵活性高：`uni.request` 方法可以发送各种类型的请求，包括 GET、POST 等等，可以传入相应的参数，比如请求路径、请求头、请求参数等等，非常灵活。

2. 更好的兼容性：`uni.request` 方法可以在多个平台上运行，包括微信小程序、H5、App 等等，具有更好的兼容性，可以大大减少开发者的工作量和学习成本。

3. 易于调试：`uni.request` 方法可以方便地在开发者工具中进行测试，提供了方便的调试工具和技巧，比如模拟请求、查看响应、调试报错等等，可以大大提高开发效率。

4. 方便的错误处理：`uni.request` 方法提供了错误处理机制，可以方便地处理请求失败和响应异常等错误，提高了应用程序的健壮性。

5. 常见的安全性措施：`uni.request` 方法已经考虑了常见的安全性措施，比如 Cross-Origin Resource Sharing (CORS)、HTTPS 等等，可以避免一些常见的安全漏洞和攻击。

综上所述，使用 `uni.request` 方法发送请求具有灵活性高、更好的兼容性、易于调试、方便的错误处理和常见的安全性措施等优点，是 uni-app 开发者进行数据交互的良好选择。

使用 `uni.request` 方法发送请求也存在一些缺点，主要包括如下几个方面：

1. 代码量较大：相比较其他一些框架，使用 `uni.request` 方法发送请求需要编写的代码量相对较大，这在一定程度上会影响开发效率和开发体验。

2. 需要手动处理返回结果：使用 `uni.request` 方法发送请求需要开发者手动处理返回的结果，包括响应数据的解析、错误处理等，需要花费较多精力。

3. 不支持 Promise 封装：`uni.request` 方法本身并不支持 Promise 封装，开发者需要手动进行封装，这也影响了代码的复用性和可扩展性。

4. 不支持自动取消请求：`uni.request` 方法不支持自动取消已经发送的请求，需要手动终止请求，这在一些场景下造成了额外的麻烦和工作量。

综上所述，使用 `uni.request` 方法发送请求存在一些缺点，主要包括代码量较大、需要手动处理返回结果、不支持 Promise 封装、不支持自动取消请求等方面。开发者在使用 `uni.request` 方法时需要考虑这些缺点，以选择合适的开发方式。

Uniapp的rps自适应手机端和pc端，RPS 表示 “Remote Procedure Service”，是在UniApp中实现跨平台开发的一种技术方案，它可以将应用的业务逻辑封装成为服务的形式，并通过远程调用的方式在不同平台上进行调用。使用 RPS 可以避免在不同平台上对业务逻辑进行重复编写，提高了业务逻辑的复用性和开发效率。

RPS 在 UniApp 中的使用步骤如下：

1. 在 app.vue 文件或其他页面的 .vue 文件中使用 $rps 方法来执行服务器端提供的方法。

2. 在服务器端编写 RPS 方法，并通过发送请求调用该方法。

3. 如果发生错误，RPS 将抛出异常。开发者可以在页面上通过捕获 try-catch 语句来处理异常。

4. RPS 支持 Promise，可以使用 async / await 来编写异步方法。

需要注意的是，使用 RPS 需要在服务器端提供对应的方法，而客户端的调用仅仅是调用服务端的方法，因此需要保证服务端和客户端的接口一致。另外，对于一些敏感信息，也需要在服务端进行数据校验和安全性检查，同时客户端也需要进行一些必要的安全性验证。

总之，RPS 是 UniApp 上一种适合于跨平台开发的技术方案，在开发过程中需要注意服务端和客户端的接口一致性、数据安全以及异常处理等问题。使用 RPS，可以加快开发效率，降低维护成本，提高开发质量。

在使用uniapp小程序时时常会出现很多问题，对此我做了一些解决方法和问题的总结问题

1、uView的form校验，手动赋值某个字段后，页面校验信息未同步更新校验问题。

问题：手动赋值是Number，将其转换成字符串类型，则可以校验通过

this.$set(this.formParamters,'estimateScore',sum.toString())

2、解决uni-app中第二次访问tabbar页面时不会加载数据的问题

原因：tabbar页面是一个webview,而在切换页面时候，webview没有关闭，只是被其他页面覆盖了而已，需要显示时候就把它显示出现，所以页面是不会重新加载数据的。 解决方法： 将相关方法写在onShow()里面

3、uniapp跳转到tabbar页并刷新页面

 

1. 利用正则校验的方式在前端实现模糊搜索的功能

 

5、使用depp在小程序中子组件修改第三方ui库uview，样式不生效问题

问题：修改子组件第三方ui库样式，样式不生效

解决：子组件下要和data同级下添加options: {styleIsolation: 'shared' // 解除样式隔离}

6、uni-app 中实现 onLaunch 异步回调后执行 onLoad 最佳实践

解决方案一：（使用async后调用其他接口有问题）

既然在onLaunch中请求是异步的原因导致这个问题，那改成同步的不就行了，这里利用Promise来解决这个问题

解决方案二：

正好项目中用到了uni-simple-router插件，提供了全局前置守卫事件beforeEach，其本质是代理了所有的生命周期，让生命周期更加可控，这样就可以很好的解决我们面临的问题了。

解决方案三：使用全局变量

遇到坑了怎么解决？
很多时候我们真的会遇到很神奇的问题，就比如以前我们遇到的坑。官方的插件uni-list方面，，用ios list不能给view，必须最外面才能滑动，而android的list就需要用一个view包起来，就很神奇。后面我们公司大佬提出，直接用官方的list来解决，至于兼容h5等则用标记判断使用scrollview，而且它的list要用cell搭配可以提高性能。文档有提，当然坑当然不会提。不过官网团队确实很努力，就是很多时候需要你认真去翻文档，它的文档真的非常多但是可不一定好找，需要认真的看，都是在不经意间给你想要的结果。

现在好了改版了页面，新版可以直接搜索，还可以直接社区搜索，更快效率的找到你想要的答案。同时可以参考人家的项目开发，比如npro、uview他们做的真的也非常棒，他们的代码的思考，我也学到了许多！我有时候做一些难题，或者优化的时候，也会参考他们一些相关知识和官方的进行一个对比。