3 资源互相引用

NPM支持

在项目根目录执行命令安装npm包：

    npm install packageName --save

使用

安装完即可使用npm包，js中引入npm包：

    import package from 'packageName'
    const package = require('packageName')

模板内引入静态资源

template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径，形式如下

    <!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
    <image class="logo" src="/static/logo.png"></image>
    <image class="logo" src="@/static/logo.png"></image>
    <!-- 相对路径 -->
    <image class="logo" src="../../static/logo.png"></image>

注意

  • @开头的绝对路径以及相对路径会经过 base64 转换规则校验
  • 引入的静态资源在非 h5 平台，均不转为 base64。
  • H5 平台，小于 4kb 的资源会被转换成 base64，其余不转。
  • 自HBuilderX 2.6.6起template内支持@开头路径引入静态资源，旧版本不支持此方式
  • App 平台自HBuilderX 2.6.9起template节点中引用静态资源文件时（如：图片），调整查找策略为【基于当前文件的路径搜索】，与其他平台保持一致
  • 支付宝小程序组件内 image 标签不可使用相对路径

css 引入静态资源

css文件或style标签内引入css文件时（scss、less 文件同理），可以使用相对路径或绝对路径（HBuilderX 2.6.6）

    /* 绝对路径 */
    @import url('/common/uni.css');
    @import url('@/common/uni.css');
    /* 相对路径 */
    @import url('../../common/uni.css');

注意

  • 自HBuilderX 2.6.6起支持绝对路径引入静态资源，旧版本不支持此方式

css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径，需要注意的是，有些小程序端 css 文件不允许引用本地文件（请看注意事项）。

    /* 绝对路径 */
    background-image: url(/static/logo.png);
    background-image: url(@/static/logo.png);
    /* 相对路径 */
    background-image: url(../../static/logo.png);

Tips

  • 引入字体图标请参考，字体图标 (opens new window)
  • @开头的绝对路径以及相对路径会经过 base64 转换规则校验
  • 不支持本地图片的平台，小于 40kb，一定会转 base64。（共四个平台 mp-weixin, mp-qq, mp-toutiao, app v2）
  • h5 平台，小于 4kb 会转 base64，超出 4kb 时不转。
  • 其余平台不会转 base64

引入原生插件

    const PluginName = uni.requireNativePlugin(PluginName); // PluginName 为原生插件名称

内置原生插件

内置原生插件,uni-app已默认集成，支持直接在内置基座运行。

仅在nvue页面，支持引入BindingX，animation， DOM.addRule等。

在vue页面，支持引入clipboard，storage，stream，deviceInfo等。

使用方式：可通过uni.requireNativePlugin直接使用。

    <template>
    		<view>
    			<text class="my-iconfont">&#xe85c;</text>	
    		</view>
    	</template>
    	<script>
    		export default{
    			beforeCreate() {
    				const domModule = uni.requireNativePlugin('dom')
    				domModule.addRule('fontFace', {
    					'fontFamily': "myIconfont",
    					'src': "url('http://at.alicdn.com/t/font_2234252_v3hj1klw6k9.ttf')"
    				});
    			}
    		}
    	</script>
    	<style>
    		.my-iconfont {
    			font-family:myIconfont;
    			font-size:60rpx;
    			color: #00AAFF;
    		}
    	</style>

非内置原生插件，分为 [本地插件 (opens new window)](https://uniapp.dcloud.net.cn/api/extend/native- plugin#%E6%9C%AC%E5%9C%B0%E6%8F%92%E4%BB%B6%E9%9D%9E%E5%86%85%E7%BD%AE%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6) 和 [云端插件 (opens new window)](https://uniapp.dcloud.net.cn/api/extend/native- plugin#%E4%BA%91%E7%AB%AF%E6%8F%92%E4%BB%B6%E9%9D%9E%E5%86%85%E7%BD%AE%E5%8E%9F%E7%94%9F%E6%8F%92%E4%BB%B6) 。集成原生插件后，需要提交云端打包或制作自定义基座运行才会生效

本地插件(非内置原生插件)

本地插件 ，是uni-app项目nativeplugins目录(目录不存在则创建)下的原生插件

第一步：获取本地原生插件
  • 方式一：插件市场下载免费uni-app原生插件

可以登录uni原生插件市场 (opens new window)，在免费的插件详情页中点击“下载for离线打包”下载原生插件（zip格式），解压到HBuilderX的uni- app项目下的“nativeplugins”目录（如不存在则创建），以下是“DCloud- RichAlert”插件举例，它的下载地址是：https://ext.dcloud.net.cn/plugin?id=36

下载解压后目录结构如下：

  • 方式二：开发者自己开发uni-app原生插件

原生插件开发完成后按指定格式压缩为zip包，参考uni-app原生插件格式说明文档 (opens new window)。 按上图的格式配置到uni-app项目下的“nativeplugins”目录

第二步：配置本地原生插件

在manifest.json -> App原生插件配置 -> 选择本地插件 -> 选择需要打包生效的插件 -> 保存后提交云端打包生效。

第三步：开发调试本地原生插件

在vue页面或nvue页面引入这个原生插件。

使用uni.requireNativePlugin的api，参数为插件的id。

    	const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')
第四步：打包发布

使用自定义基座开发调试本地原生插件后，不可直接将自定义基座apk作为正式版发布。 应该重新提交云端打包（不能勾选“自定义基座”）生成正式版本。

云端插件(非内置原生插件)

云端插件 ，已经在插件市场绑定或购买的插件，无需下载插件到工程中，云打包时会直接合并打包原生插件到APP中。（试用插件只能在自定义基座中使用）

第一步：购买或下载uni-app原生插件

使用前需先登录uni原生插件市场 (opens new window)，在插件详情页中购买，免费插件也可以在插件市场0元购。购买后才能够云端打包使用插件。

购买插件时请选择正确的appid，以及绑定正确包名

第二步：使用自定义基座打包uni原生插件 （注：请使用真机运行自定义基座）

在manifest.json -> App原生插件配置 -> 选择云端插件 -> 选择需要打包的插件 -> 保存后提交云端打包生效。

第三步：开发调试uni-app原生插件

在vue页面或nvue页面引入这个原生插件。

使用uni.requireNativePlugin的api，参数为插件的id。

1.在页面引入原生插件，uni.requireNativePlugin 使用后返回一个对象：

    const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')

2.使用原生插件

    	dcRichAlert.show({
    		position: 'bottom',
    		title: "提示信息",
    		titleColor: '#FF0000',
    		content: "<a href='https://uniapp.dcloud.io/' value='Hello uni-app'>uni-app</a> 是一个使用 Vue.js 开发跨平台应用的前端框架!\n免费的\n免费的\n免费的\n重要的事情说三遍",
    		contentAlign: 'left',
    		checkBox: {
    			title: '不再提示',
    			isSelected: true
    		},
    		buttons: [{
    			title: '取消'
    		}, {
    			title: '否'
    		}, {
    			title: '确认',
    			titleColor: '#3F51B5'
    		}]
    	}, result => {
    		console.log(result)
    	});
[ (opens new window)](https://uniapp.dcloud.net.cn/plugin/native-

plugin.html#%E7%AC%AC%E5%9B%9B%E6%AD%A5-%E6%89%93%E5%8C%85%E5%8F%91%E5%B8%83-2)第四步：打包发布

使用自定义基座开发调试uni-app原生插件后，不可直接将自定义基座apk作为正式版发布。 应该重新提交云端打包（不能勾选“自定义基座”）生成正式版本。

注意事项

1.可以在 插件市场 查看更多插件，如需开发uni原生插件请参考 uni原生插件开发文档 (opens new window)。 2.如果插件需要传递文件路径，则需要传手机文件的绝对路径，可使用 5+ IO模块 (opens new window) 的相关 API 得到文件的绝对路径

Last Updated:
Contributors: leeguooooo