   __    ____  __  __  _  _   _
( \/\/ )(____)(  \/  )( )( \_/ )
 )    (  )__)  )    ( ( ) ) _ (
(__/\__)(____)( /\/\ )(_)(_/ \_)

小程序 wemix 框架使用指南

使用前阅读

基础库最低版本要求：微信端：2.3.0；支付宝端：1.11.0；百度端：2.0.3；头条端：无
为兼容多端 for 语句的 key 不要用{{}}包裹
为兼容多端资源引用路径请使用绝对路径
不要在 extends wemix.app 类内的函数中调用 wemix.getApp() 函数，使用 this 就可以拿到 app 实例
不要在 onLaunch 中调用 wemix.getCurrentPages() ，此时，page 还没有生成

项目创建

安装wemix工具

npm install @wemix/cli -g

进入开发目录生成空项目并开启实时编译

cd xxx
wemix new projectName -t empty
cd projectName
wemix build --config wemix.development.config.js -w // 开发
wemix build --config wemix.development.config.js // 线上
wemix mkpage `path` // path不带/可以自动在pages目录内生成
wemix mkcomponent `path` // path不带/可以自动在components目录内生成

目录结构

|-- wechat                     微信开发者工具指定的目录
|-- alipay                     支付宝开发者工具指定的目录
|-- swan                       百度开发者工具指定的目录
|-- tt                         头条开发者工具指定的目录
|-- wemixconfig                小程序配置文件信息
|-- node_modules
|-- src                        开发目录
|   |-- pages                  页面文件夹
|   |   |-- index.js
|   |   |-- index.html
|   |   |-- index.less
|   |-- components             页面依赖的组件文件夹
|   |   |-- normal
|   |   |   |-- index.js
|   |   |   |-- index.html
|   |   |   |-- index.less
|   |   |-- wechat
|   |   |   |-- index.js
|   |   |   |-- index.html
|   |   |   |-- index.less
|   |   |-- alipay
|   |   |   |-- index.js
|   |   |   |-- index.html
|   |   |   |-- index.less
|   |   |-- swan
|   |   |   |-- index.js
|   |   |   |-- index.html
|   |   |   |-- index.less
|   |   |-- tt
|   |   |   |-- index.js
|   |   |   |-- index.html
|   |   |   |-- index.less
|   |-- app.js
|   |-- app.less
|-- package-lock.json
|-- package.json

使用wemix的优点

在原有的小程序的开发模式下进行再次封装：

App 实例增加 onPageShow 生命周期,监听页面变化。
App 实例增加 onPageHide 生命周期,监听页面变化。
App 实例增加 onLog 事件捕获器,监听点击事件。
支持加载外部 NPM 包。
支持 less 编译。
针对 wx.request 并发问题进行优化。
@iconfont: '//at.alicdn.com/t/xxx.css';可自动引入 iconfont

单独新建一个 iconfont.less 文件存放@iconfont: '//at.alicdn.com/t/xxx.css'; 其它文件引用该文件@import 'iconfont.less' 或者通过配置信息的 imports 自动全局注入 iconfont.less

实例

App 实例

import wemix from "@wemix/core"

export default class Main extends wemix.app {
  constructor() {
    super()
  }
  onLaunch(options) {}
  onShow(options) {}
  onHide() {}
  onError(msg) {}
  onPageShow() {}
  onPageHide(tp) {}
  onLog(type, e, data) {}
}

Main.config = {
  pages: [""],
  debug: false,
  subpackages: [],
  window: {
    navigationBarBackgroundColor: "",
    navigationBarTextStyle: "",
    navigationBarTitleText: "",
    backgroundColor: "",
    backgroundTextStyle: "",
    enablePullDownRefresh: false,
    onReachBottomDistance: 50
  },
  tabBar: {
    color: "",
    selectedColor: "",
    backgroundColor: "",
    list: [
      {
        pagePath: "",
        text: "",
        iconPath: "",
        selectedIconPath: ""
      }
    ]
  },
  wechat: {
    window: {}
  },
  alipay: {},
  swan: {},
  tt: {}
}

Page 实例

import wemix from "@wemix/core"

export default class Index extends wemix.page {
  constructor() {
    super()
    this.data = {}
  }

  onLoad(options) {}
  onShow() {}
  onHide() {}
  onUnload() {}
  onShareAppMessage() {}
  onPageScroll() {}
  onReachBottom() {}
  onPullDownRefresh() {}
}

Index.config = {
  navigationBarBackgroundColor: "",
  navigationBarTextStyle: "",
  navigationBarTitleText: "",
  backgroundColor: "",
  backgroundTextStyle: "",
  enablePullDownRefresh: false,
  disableScroll: false,
  onReachBottomDistance: 50,
  usingComponents: {
    "a-component": "/components/normal/a"
  },
  wechatComponents: {
    "b-component": "/components/wechat/b"
  },
  alipayComponents: {
    "b-component": "/components/alipay/b"
  },
  swanComponents: {
    "b-component": "/components/swan/b"
  },
  ttComponents: {
    "b-component": "/components/tt/b"
  }
}

Component 实例

import wemix from "@wemix/core"

export default class Index extends wemix.component {
  constructor() {
    super()
    this.data = {}
  }
  onLoad() {}
  onUnload() {}
}

Index.config = {
  component: true,
  usingComponents: {}
}
Index.properties = {
  name: {
    type: String,
    value: ""
  }
}

打包配置文件

const path = require("path")
const TransformPlugin = require("@wemix/transform-plugin")

module.exports = {
  entry: [
    path.join(__dirname, "src/app.js"),
    path.join(__dirname, "src/assets")
  ],
  loaders: [
    {
      test: /\.js$/,
      include: [path.join(__dirname, "src")],
      use: [
        {
          loader: "@wemix/babel-loader",
          options: {
            configFile: path.resolve("babel.config.js")
          }
        }
      ]
    },
    {
      test: /\.less$/,
      // 样式文件可以通过imports 注入进所有的样式页面，方便变量的使用
      imports: [path.join(__dirname, "src/global.less")],
      use: [
        {
          loader: "@wemix/postcss-loader",
          options: {
            configFile: path.resolve("postcss.config.js")
          }
        },
        { loader: "@wemix/less-loader" }
      ]
    },
    {
      test: /\.css$/,
      use: [
        {
          loader: "@wemix/postcss-loader",
          options: {
            configFile: path.resolve("postcss.config.js")
          }
        }
      ]
    }
  ],
  plugins: [new TransformPlugin()]
}

wemix 属性及方法

部分 api 需要做兼容处理，其他未列出的 api 暂时调用 wemix.wx wemix.my wemix.swan wemix.tt 调用

wemix.env // wechat alipay swan tt
wemix.global // 全局变量可以存在此处
wemix.config // app 和 page 的 json 文件信息
wemix.wx // 微信 api
wemix.my // 支付宝 api
wemix.swan // 百度 api
wemix.tt // 头条 api
wemix.getApp() // 获取 app 实例
wemix.getCurrentPages() // 获取路由栈 pages 实例
wemix.compareVersion() // 比较版本
wemix.parse()
wemix.stringify()
wemix.isString()
wemix.isArray()
wemix.isBoolean()
wemix.isUndefined()
wemix.isNull()
wemix.isNumber()
wemix.isObject()
wemix.isEmptyObject()
wemix.isFunction()
wemix.isSymbol()
wemix.saveImageToPhotosAlbum
wemix.previewImage
wemix.getImageInfo
wemix.compressImage
wemix.chooseMessageFile
wemix.chooseImage // 数据存储
wemix.setStorageSync
wemix.setStorage
wemix.removeStorageSync
wemix.removeStorage
wemix.getStorageSync
wemix.getStorage
wemix.getStorageInfoSync
wemix.getStorageInfo
wemix.clearStorageSync
wemix.clearStorage // 下拉刷新
wemix.stopPullDownRefresh
wemix.startPullDownRefresh // 转发
wemix.updateShareMenu
wemix.showShareMenu
wemix.hideShareMenu
wemix.getShareInfo // 位置
wemix.openLocation
wemix.getLocation
wemix.chooseLocation // 导航栏
wemix.showNavigationBarLoading
wemix.setNavigationBarTitle
wemix.setNavigationBarColor
wemix.hideNavigationBarLoading // 背景
wemix.setBackgroundTextStyle
wemix.setBackgroundColor // 收获地址
wemix.chooseAddress // 交互
wemix.showToast
wemix.showModal
wemix.showLoading
wemix.showActionSheet
wemix.hideToast
wemix.hideLoading // 系统信息
wemix.getSystemInfoSync
wemix.getSystemInfo // 路由
wemix.navigateTo
wemix.redirectTo
wemix.navigateBack
wemix.switchTab
wemix.reLaunch // 网络
wemix.request // 用户信息
wemix.getUserInfo

page 实例属性

this.data
this.options
this.route
this.search
this.setData()
this.selectComponent()
this.selectAllComponents()

component 实例属性

this.data
this.props
this.setData()
this.selectComponent()
this.selectAllComponents()
this.triggerEvent()

WemixJS / wemix