微信小程序如何引用外部js，外部样式，公共页面模板

微信小程序作为一种新型轻量级应用程序开发框架，拥有着使用方便、内置依赖库齐全、开发效率高等优点。但我们也会遇到需要引用外部js、css、公共页面模板等需求。下面将介绍在微信小程序中如何引用外部js、css以及公共页面模板。

引用外部js

在微信小程序中，我们可以通过<script>标签来引入外部js。如下是一个简单的示例：

<view>
  <web-view src="https://xxx/xxx"></web-view>
  <script src="../../utils/md5.js"></script>
  <button bindtap="testMd5">开始加密</button>
</view>

在这个示例中，我们在<view>标签下引入了一个外部链接的web-view，同时我们还引入了一个名叫md5.js的js文件，并在<button>标签的点击事件上绑定了一个加密函数。

同时，在我们需要使用这个md5.js文件的js代码文件中，需要使用require函数引入该js文件：

var md5 = require("../../utils/md5.js");
Page({
  data: {},
  testMd5: function () {
    console.log(md5.hexMD5('hello world'))
  }
})

引用外部样式

微信小程序支持使用<style>标签引入外部样式文件，同时也支持直接在页面上定义样式。

<view class="outer-wrapper">
  <view class="inner-wrapper"></view>
</view>

在这个示例中，我们在<view>标签上添加了一个class为outer-wrapper的样式，我们可以通过外部样式文件来定义该样式：

/* outer.wxss */
.outer-wrapper {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}

.inner-wrapper {
  width: 50%;
  height: 50%;
  margin: 0 auto;
  background-color: #fff;
}

其中，我们在outer.wxss文件中定义了两个样式，其中一个是outer-wrapper，另一个是inner-wrapper，并且我们需要在页面的json文件中，将这个外部样式文件作为页面的样式文件引用进来：

{
  "usingComponents": {},
  "navigationBarTitleText": "外部样式",
  "enablePullDownRefresh": true,
  "usingComponents": {},
  "externalClasses": ["outer-wrapper", "inner-wrapper"]
}

在这个示例中，我们使用了一个叫做externalClasses的属性来引入外部样式里的outer-wrapper和inner-wrapper这两个样式类。这样，我们在页面中就可以直接使用这两个样式类。

引用公共页面模板

在微信小程序中，我们可以通过<template>标签来定义复用的模板，在需要使用这个模板的地方通过<import>标签来将这个模板引入进来。下面是一个简单的示例：

<!-- template.wxml -->
<template name="commonTitle">
  <view>
    <view class="title">{{title}}</view>
    <view class="desc">{{desc}}</view>
  </view>
</template>

在这个示例中，我们定义了一个名叫commonTitle的模板，该模板包含一个标题和一段描述。下面是一个在页面中引用该模板的示例：

<!-- detail.wxml -->
<import src="../../templates/template.wxml"></import>
<view>
  <template is="commonTitle" data="{{title: '这是一个标题', desc: '这是一个描述'}}"></template>
  <view>
    这是一个详情页
  </view>
</view>

在上面这个示例中，我们通过<import>标签将template.wxml模板文件引入进来，在页面中利用<template>标签来引用该模板，并通过data属性向其传递一个数据对象，使模板正确地渲染出来。