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 有效值

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

ok，我们目前已经完成了首页，如果我们只是为了制作一个文章系统的话，首页+列表页+详情页已经足够满足我们的使用了。

所以我们开始在pages中创建这俩页面。

现在pagesjson路由中增加这俩：

前面我们首页中的icon列表是一个静态页面页，我们需要连接才能跳转到列表页面。

这里我们需要用到uniapp内置的跳转方法：

这里我们先把页面之间的跳转关系完成，完成后，我们会在页面之间传递参数，再通过ajax完成动态数据交互！

如法炮制！我们把详情页面也完成：

这里涉及到了一个我们非常熟悉的知识：生命周期，我们需要在生命周期onload的时候，把数据注入到页面中。

所谓生命周期就是onload，onready之类的那一套东西，这里如果细说的话会非常的复杂。因为onshow，onhide在不同的vue中，这里指APPvue和子页面vue中又稍微有所不同。

这里我整理了一个列表，感兴趣的同学可以研究研究。不愿意研究，其实你光掌握一个onload也足够你应对大多数情况了。

学会使用生命周期以后，我们接下来要进入ajax通过端口查询数据，然后渲染到页面上。

uniapp提供一个unirequest方法，帮助我们获取ajax的数据，请看例子：

uniapp的ajax使用方法就是小程序和vue的结合。这里需要注意的是，uniapp在页面跳转的时候，可以发送一个参数，在接收的页面中通过optionsxx来接收。注意看上面的例子，是在onload生命周期中接收的，options就是onload的一个参数。

跳转的时候，可以发现id就是拼接进去的。

这里可能会遇到一个问题，那就是你从本地请求的端口可能会产生跨域的问题。

这里推荐两种解决方法：第一个，使用xhbuilder内置的浏览器

第二个，如果你用的是chrome浏览器，可以安装跨域 插件 来解决这个问题。

这个插件的名字是：Allow-Control-Allow-Origin。如果你打不开chrome插件市场的话，你可能要想办法**一下。

这里还有一个问题，那就是，我们页面顶部的title，是在路由pagesjson中设置的，但是我们的数据是动态的。

当我们点击了某一项的时候，需要动态的修改一下标题，这个时候需要使用uniapp提供的setNavigationBarTitle方法。

上面遗漏了一个知识，就是当我们通过ajax获取到了内容以后，如果这个内容是字符串还好，但是它有可能是一个富文本，就是我们常说的内容详情。

如果内容是一段html的话，我们就不能直接放到项目中，那样是无法解析出来的。这个时候我们需要使用rich-text标签。

这样就可以正确解析出内容了。

到目前为止，我们已经完成了首页， 列表页和详情页。项目的基础功能已经搭建完毕了，接下来，我们将会进入其他强大功能的学习。

因为最近有一些忙，uniapp的教程可能会暂停一段时间，这一段时期我会给大家推荐一些轻松的教程或者龙哥故事汇的一些文章，希望大家见谅哈。

uniapp支持使用unisetStorageSync()来存储多个key，该方法会将多个key和value存储到本地缓存中，并且可以通过unigetStorageSync()来获取指定key的value。此外，还可以使用uniremoveStorageSync()来删除指定key的value。

uniapp打包后配置cdn服务时，服务实例在实例删除。 *** 作步骤在OneAccess管理门户修改后，可在“配置”页签下选择“redis”或“redis”，选择“redis”。您也可以在应用配置页面，更改配置参数，具体如下。参数配置注意事项，不建议修改该配置的配置。内存、索引、索引、COAP信息，默认service配置会生成一个configuration的bin文件。配置文件的配置参数说明如下：表3配置参数说明redisname应用名称，必填。logsurl应用的URL，必须是合法的。

每个url地址之间用英文逗号分割。workspace级配置的key值，配置在打包发布到运行环境时需要指定。scope头域，参考表4。content单击“Send”，在下方的“请求消息头”中增加“Content-Type”，“值”设置为“application/json”，“值”为“/”。APP认证登录AppCube管理中心。在左侧导航栏中，选择“系统管理>系统参数”，查看该租户下创建的所有的表。单击，再单击表头后的“同步”，可进入系统参数配置界面。

配置“显示名称”，该名称将会显示在运营配置页签。您也可单击“导入”，选择系统中已创建的系统参数进行导入。配置相关参数，单击“新建”。表1参数说明参数参数说明使用命名空间系统参数名称中是否加“命名空间__”前缀。勾选该选项时，可确保跨租户全局唯一。名称需要能尽可能地表明参数的业务含义，避免与其它参数混淆。建议您使用“APP/BO名称_系统参数名称”来命名。

1，uni-app中不能用色上司浏览器缓存。不能试用formdata。

在uni-app中如何试用formData呢？

  verifyPasswordLogin: (params) => {

    const ApiToken = unigetStorageSync("apiToken");

    return new Promise((resolve, reject) => {

      unirequest({

        url: `${baseUus}/login`,

        method: "POST",

        header: {

          "content-type": "multipart/form-data; boundary=XXX",

          Authorization: `Bearer ${ApiToken}`,

        },

        data: params,

        success: (res) => {

          if (resdatacode == '0') {

            resolve(resdatadata);

          }

        },

      });

    });

  },

外加这个转化

export function paramsToFormData (obj = {}) {

  let result = ''

  for (let name of Objectkeys(obj)) {

    let value = obj[name];

    result +=

    '\r\n--XXX' +

    '\r\nContent-Disposition: form-data; name=\"'+ name +'\"'+

    '\r\n' +

    '\r\n' + value

  }

  return result + '\r\n--XXX--'

}

要利用文件保存API数据缓存unis。uni-app是一个使用Vuejs(opensnewwindow)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序，uniapp临时路径是临时路径需要利用文件保存API数据缓存unis。

以上就是关于uni-app从入门到精通全部的内容，包括:uni-app从入门到精通、uniamin页面跳转缓存、uni-app 入门到精通 （二）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！