微信小程序调用外部js使用

---

前言：我们在开发安卓写页面，填充数据，一般都是写一个ServerDate.java文件，在这个页面里面创建本地数据来模拟网络请求数据。（为了增强代码可读性，把模拟数据专门放在一个java文件里面创建）

---

联想到微信小程序开发的时候，是不是也可以这样做呢？答案肯定是可以的。

第一步：创建好外部posts.js文件

/**
 * 创建列表数据
 */
var postData = [{

    id: 0,
    date: "Sep 2019-12-12",
    title: "中国特设社会主义国家",
    post_img: "/images/crab.png",
    content: "欲求于人，必先予人少欲无为，身心自在！ 得失从缘，心无增减！ 息心既是息灾！ 祸福同行，子去子来锦上添花易，雪中送炭难说话口中留半刻，脑中思三分",
    view_num: "121",
    collect_num: "96",
    author_img: "/images/avatar/1.png"
  },
  {
    id: 1,
    date: "Sep 2019-12-12",
    title: "中国特设社会主义国家",
    post_img: "/images/crab.png",
    content: "欲求于人，必先予人少欲无为，身心自在！ 得失从缘，心无增减！ 息心既是息灾！ 祸福同行，子去子来锦上添花易，雪中送炭难说话口中留半刻，脑中思三分",
    view_num: "121",
    collect_num: "96",
    author_img: "/images/avatar/1.png"
  }
]

/**
 * 创建banner数据
 */
var banner = {
  indicatorDots: true,
  autoplay: true,
  interval: 5000,
  duration: 1000,
  imageUrls: [
    '/images/xiaolong.jpg',
    '/images/xiaolong.jpg',
    '/images/xiaolong.jpg'
  ]
}

//转化成小程序模板语言 这一步非常重要 不然无法正确调用
module.exports = {
  postUtilsData: postData,
  bannerData: banner
}

第二步：使用微信开发文档 "模块" ，注意不是"模板"

在第一步中，已经创建好了一个外部的js文件，如果使用“模块”呢？

关键字：module.exports

使用：在定义好的外部js 里面使用：

//转化成小程序模板语言 这一步非常重要 不然无法正确调用
module.exports = {
  postUtilsData: postData,
  bannerData: banner
}

第三步：如何引用外部js？

关键字：require

//引用外部的js文件(一定得是相对路径  一定得是相对路径  一定得是相对路径,重要事说三遍)
var posts = require('../../data/posts.js');

在需要使用外部js 引用

//引用外部的js文件(一定得是相对路径)
var posts = require('../../data/posts.js');
var banners = require('../../data/posts.js');

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  onLoad: function() {
    //设置数据 只接收json数据类型
    this.setData({
      postData: posts.postUtilsData,
      banner: banners.bannerData
    })
  }
})

注意看目录结构：在data里面定义了一个外部posts.js文件，在pages/posts下的posts.js使用

yhx.png yhx.png yhx.png

很详细的教程，不懂的可以留言哦