开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 907|回复: 0
收起左侧

[技术分享] 【零基础学会uniapp系列】8、 静态资源的引用

[复制链接]
发表于 2021-10-27 10:30:01 | 显示全部楼层 |阅读模式   广东省揭阳市

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 <Module Name>
卸载某个模块:
npm uninstall <Module Name>

尝试在项目中安装一个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

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

加QQ群:326576256





视频教程在线观看:https://www.eyuyan.tv/?mod=play&tvid=3230

课件下载: 【从资源网下载】

从GIT关注:
https://gitee.com/JYtechnology/uniapp-learn
您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 793400750,邮箱:wp@125.la
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表