微信小程序Ⅶ [外部文件引用的注意点]

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1333884

前言

• 在学习过程中，注意到：

小程序对外部文件的引用规范有限制，需要注意下，以免代码报错

正文

• 外部文件引用，一般分为三种（也就是最常见的文件咯！）：

①. 外部 js文件的引用

当前阶段，对js文件的引用，需要关键字 require，并且只能满足 相对路径，参考代码如下：

//注意 只能使用相对路径
var postsData_js = require('../../data/posts-data.js')

• 具体操作，可参考之前的一篇文章 — 微信小程序Ⅳ [js文件的外部引用]

②. Template 模板的引用

• 即为 wxml 文件的引用方式

测试发现，对 template 的引用，需要关键字 import，可同时满足 相对路径 和 绝对路径 :

<!-- 引用模板文件 相对路径、绝对路径都可以 -->
<!-- <import src="post-item/post-item-template.wxml"/> -->
<import src="/pages/posts/post-item/post-item-template.wxml"/>

• 具体操作，请参考官方文档 — 小程序->模板

【注意】： 尤其要注意，不要忘记标签 <import> 的结尾 /！

③. wxss 样式文件的引用

对 wxss 样式文件的引用，需要关键字 import，可同时满足 相对路径 和 绝对路径 :

/*@import '/pages/posts/post-item/post-item-template.wxss'; */
@import 'post-item/post-item-template.wxss';

【注意】： 引用语句的最后，不要忘记以分号 ; 结尾！

附录

• 多扯一句，建议掌握小程序的 模板化思想，方便代码复用
• 同时注意一点，脚本逻辑的模板化暂不支持，不要做无多功…