易语言资源网 - 做最全的易语言资源下载社区
【精易招聘】UniApp开发工程师 精易论坛授权登录

【零基础学会uniapp】第8课:静态资源的引用   [复制链接]

    2021-10-27 10:29:28
    uni-app
    易语言资源网
    188 次浏览

8、 静态资源的引用, 通用js的引用,npm包的使用

静态资源,指的是程序中用到的图片、图标、字体等内容,这些内容应该存储于:static文件夹下

可直接在代码中进行引用:

例如:我们在前面tabbar的课程中也有介绍过引用static下面的图片文件。

"tabBar": {
       "color": "#8A8A8A",
       "selectedColor": "#0081ff",
       "borderStyle": "#EEEEEE",
       "backgroundColor": "#F8F8F8",
       "list": [ {
               "pagePath": "pages/index/index",
               "iconPath": "static/index.png",
               "selectedIconPath": "static/index_select.png",
               "text": "概况"
          },
          {
               "pagePath": "pages/user/user",
               "iconPath": "static/user.png",
               "selectedIconPath": "static/user_select.png",
               "text": "用户"
          }
      ],
       "midButton": {
           "height": "60px",
           "iconPath": "static/add.png",
           "text": "添加"
      }
  }

通用js文件:

在项目的编写中,经常会用到一些公共、重复的函数,这时候,就可将函数独立写入到一个js文件中,然后在用到的地方进行引用,就不用重复写同一段代码了,同时也能让程序看起来更加的美观。

一般的,可以将通用的js文件写入到项目下的common目录中,或者写入到utiljs目录中,当然这些名字都是自己起的。

引入其他文件:

可以引入的文件类型: vue/nvue、js、css

路径中的@符号,代表的是项目的根目录。可直接使用:

<script>
import setTabBar from '@/components/api-set-tabbar.nvue';
import provinceData from '@/common/city-data/province.js';
</script>
<style>
@import '@/common/index.css';
</style>

使用npm下载包:

有些时候,在打开他人的工程进行学习时,会无法正常编译,或者会提示缺少某个js文件。

这一般是由于缺少npm包导致的,这个时候我们就需要手动去下载npm包。

安装某个模块:


npm install 


卸载某个模块:


npm uninstall 


尝试在项目中安装一个npm包,然后引用他。

注意事项:
  • 为多端兼容考虑,建议优先从 uni-app插件市场 获取插件。直接从 npm 下载库很容易只兼容H5端。

  • 非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块,安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的 API(兼容小程序 API),比如:支持高德地图微信小程序 SDK。类似jQuery 等库只能用于H5端。

  • node_modules 目录必须在项目根目录下。不管是cli项目还是HBuilderX创建的项目。

  • 支持安装 mpvue 组件,但npm方式不支持小程序自定义组件(如 wxml格式的vant-weapp),使用小程序自定义组件请参考:小程序组件支持

  • 关于ui库的获取,详见多端UI库

本课参考资料:

https://uniapp.dcloud.io/frame?id=npm%E6%94%AF%E6%8C%81

https://ask.dcloud.net.cn/article/19727

@ 课件下载、更多教程、遇到问题或者进行交流,请到: https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流

加QQ群:326576256





点我下载 (已有 5 次下载)

[错误报告]   上一篇:乐玩截图分享     下一篇:CCHTTP 网站开发模块 公测版...