微信小程序 关于模块化

Question

小子这两天再看小程序 尝试着写demo 发现了一点问题 是这样的：发现微信自带的底bar不好看，所以想自己写一个，因为这个底bar每个页面都要有，所以写成了模板 就是template ，ok，wxml可以复用了，样式也挂在了app.wxss上了，OK，现在就剩下js部分，问题就是出在了这里，小程序的文档说

我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

小程序的js都是挂在Page()下的，并不能像普通的js一样模块抛出啊，这里想请教一下，如何把这个页面对应的逻辑模块化呢？
麻烦各位明白的指点一下了 ，谢谢哈

Answer 1

因为小程序的组件相当于只做了View层，所以组件的JS用起来很鸡肋和难用。

就是把公共的方法抽象出来，放到一个JS里，然后在用的页面代码里引入进来，在对应的事件方法里调用。

具体的，你可以参考 高颜值、好用、易扩展的微信小程序 UI 库，Powered by 有赞

比如其中的数量选择组件使用例子：

<import src="path/to/zanui-weapp/dist/quantity/index.wxml" />

<template is="zan-quantity" data="{{ ...quantity, componentId: 'customId' }}" />

var Zan = require('path/to/zanui-weapp/dist/index');

Page(Object.assign({}, Zan.Quantity, {
  data: {
    quantity: {
      quantity: 10,
      min: 1,
      max: 20
    },
  },

  handleZanQuantityChange(e) {
    // 如果页面有多个Quantity组件，则通过唯一componentId进行索引
    var compoenntId = e.componentId;
    var quantity = e.quantity;

    this.setData({
      'quantity.quantity': quantity
    });
  }
}));

PS: 另外，你还可以体验小程序组件化开发框架, 可以拥有类VueJS 的开发体验。

Answer 2

js不一定要放到pages下，你可以新建一个目录src/js/template.js,建议用export导出需要使用的变量或者函数；然后在嵌入组件的页面逻辑js里面import就可以使用了。