开发者社区> 青年码农> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

微信小程序使用export和import

简介: 微信小程序使用export和import
+关注继续查看

小程序支持模块化开发,可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。引入模块通过require方式。

创建模块

function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

复制

引入模块

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

复制

这是官方提供的方法,我个人还是比较喜欢使用export和import,使用起来比较顺手,可能是因为我一直用Vue开发的原因,下面拿一个实际例子,讲一讲export和import。

最近在开发的一个小程序项目,打算使用Promise对API这块做下封装,统一管理API请求。

新建request.js,提取公共请求路径

// 公共路径
const path = "http://172.16.50.83:82"

复制

定义promise化接口

/**
 * promise化接口
 */
function wxRequest(url, method, params) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: path + url,
      method: method,
      data: params,
      header: {
        'content-type': 'application/json'
      },
      success: res => resolve(res),
      fail: res => reject(res)
    })
  });
}

复制

登录接口

function login(params = {}) {
  return wxRequest('/wechatuser', 'post', params);
}

复制

导出

// 导出
module.exports = {
  login
}

复制

上面这些代码都在一个文件中,完整代码就不展示了。

接下来就是导入新建接口文件,

import {login} from '../../api/request'

复制

调用

login().then(res=>{
  console.log(res)
})

复制

注意一点的是,在引入模块时,要使用相对路径,如果使用绝对路径,在编译后会导致文件找不到。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
uni-app:微信小程序分享页面到微信好友和朋友圈
uni-app:微信小程序分享页面到微信好友和朋友圈
42 0
ES6—56:动态import
ES6—56:动态import
89 0
微信小程序框架 同时兼容QQ小程序
最近一直在开发微信小程序,经过几个版本的迭代开发,代码终于能够达到框架级别,动态配置。除了界面有些寒酸以外,功能上还是挺完备的。 主要有以下特点 1、整个程序所需url地址均在api.js中定义,环境包括公网正式环境和本地调试环境,灵活切换。
1055 0
微信小程序开发系列六:微信框架API的调用
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序之控制器的初始化逻辑 微信小程序开发系列五:微信小程序中如何响应用户输入事件 通过前面五个章节的介绍,大家对微信小程序的视图和控制器,微信调试器,以及如何在微信控制器里编写JavaScript函数来响应微信小程序的用户事件已经有了一个最基本的认识了。
1632 0
微信小程序源码
内带scroll滚动轮播:如图:           微信小程序开发工具:微信开发工具; 文件目录:     images:小程序的图标 pages:小程序页面 utils:方法js git地址:https://github.
1060 0
微信抢红包小程序开发
        现在为大家介绍一款抢红包的微信小程序,叫做“红包店”并且觉得,其中应该蕴含着很大的商业价值,所以就想着介绍给大家 也许有人会问:什么是红包店啊?怎么抢红包啊?抢的红包怎么用啊?等一些问题,那么听我慢慢道来!        比如,小华在商城某商户买了一根烤肠,在收到5元支付消息的同时(没有时差,完全同步),收到了一条“你有到店红包可抢”的提醒。
5108 0
微信小程序开发(4) 企业展示
在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发企业内部宣传展示等功能。   一、小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:   1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch.
1473 0
微信小程序把玩(三十二)Image API
原文:微信小程序把玩(三十二)Image API 选择图片时可设置图片是否是原图,图片来源。这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx.
1626 0
微信小程序与传统APP十大优劣对比
随着微信公众平台的开放,微信端小程序涌现市场,带来很很多便利和简单的原生操作,询:微信端小程序是否会替代传统的APP应用?两者的优劣如何?我们一起来看看传统APP与微信端小程序十大优劣对比       微信正让60%的APP变得没有存在价值,这个观点是从价值层面来谈的,以我们和传统企业合作实践的经验来看,从功能层面来看,未来,80%的传统APP将会被微信端小程序所代替。
1700 0
+关注
青年码农
公众号【青年码农】:有趣、有料,有深度、有广度、有热度。
226
文章
3
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载