1.0.1 • Published 5 years ago

@wemix/stylus-loader v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
5 years ago
   __    ____  __  __  _  _   _
( \/\/ )(____)(  \/  )( )( \_/ )
 )    (  )__)  )    ( ( ) ) _ (
(__/\__)(____)( /\/\ )(_)(_/ \_)

小程序 wemix 框架使用指南

使用前阅读

  1. 基础库最低版本要求：微信端：2.3.0； 支付宝端：1.11.0； 百度端：2.0.3； 头条端： 无
  2. 为兼容多端 for 语句的 key 不要用{{}}包裹
  3. 为兼容多端资源引用路径请使用绝对路径
  4. 不要在 extends wemix.app 类内的函数中调用 wemix.getApp() 函数，使用 this 就可以拿到 app 实例
  5. 不要在 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的优点

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

  1. App 实例增加 onPageShow 生命周期,监听页面变化。
  2. App 实例增加 onPageHide 生命周期,监听页面变化。
  3. App 实例增加 onLog 事件捕获器,监听点击事件。
  4. 支持加载外部 NPM 包。
  5. 支持 less 编译。
  6. 针对 wx.request 并发问题进行优化。
  7. @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 调用

  1. wemix.env // wechat alipay swan tt
  2. wemix.global // 全局变量可以存在此处
  3. wemix.config // app 和 page 的 json 文件信息
  4. wemix.wx // 微信 api
  5. wemix.my // 支付宝 api
  6. wemix.swan // 百度 api
  7. wemix.tt // 头条 api
  8. wemix.getApp() // 获取 app 实例
  9. wemix.getCurrentPages() // 获取路由栈 pages 实例
  10. wemix.compareVersion() // 比较版本
  11. wemix.parse()
  12. wemix.stringify()
  13. wemix.isString()
  14. wemix.isArray()
  15. wemix.isBoolean()
  16. wemix.isUndefined()
  17. wemix.isNull()
  18. wemix.isNumber()
  19. wemix.isObject()
  20. wemix.isEmptyObject()
  21. wemix.isFunction()

  22. wemix.isSymbol()

  23. wemix.saveImageToPhotosAlbum

  24. wemix.previewImage
  25. wemix.getImageInfo
  26. wemix.compressImage
  27. wemix.chooseMessageFile
  28. wemix.chooseImage // 数据存储
  29. wemix.setStorageSync
  30. wemix.setStorage
  31. wemix.removeStorageSync
  32. wemix.removeStorage
  33. wemix.getStorageSync
  34. wemix.getStorage
  35. wemix.getStorageInfoSync
  36. wemix.getStorageInfo
  37. wemix.clearStorageSync
  38. wemix.clearStorage // 下拉刷新
  39. wemix.stopPullDownRefresh
  40. wemix.startPullDownRefresh // 转发
  41. wemix.updateShareMenu
  42. wemix.showShareMenu
  43. wemix.hideShareMenu
  44. wemix.getShareInfo // 位置
  45. wemix.openLocation
  46. wemix.getLocation
  47. wemix.chooseLocation // 导航栏
  48. wemix.showNavigationBarLoading
  49. wemix.setNavigationBarTitle
  50. wemix.setNavigationBarColor
  51. wemix.hideNavigationBarLoading // 背景
  52. wemix.setBackgroundTextStyle
  53. wemix.setBackgroundColor // 收获地址
  54. wemix.chooseAddress // 交互
  55. wemix.showToast
  56. wemix.showModal
  57. wemix.showLoading
  58. wemix.showActionSheet
  59. wemix.hideToast
  60. wemix.hideLoading // 系统信息
  61. wemix.getSystemInfoSync
  62. wemix.getSystemInfo // 路由
  63. wemix.navigateTo
  64. wemix.redirectTo
  65. wemix.navigateBack
  66. wemix.switchTab
  67. wemix.reLaunch // 网络
  68. wemix.request // 用户信息
  69. wemix.getUserInfo

page 实例属性

  1. this.data
  2. this.options
  3. this.route
  4. this.search
  5. this.setData()
  6. this.selectComponent()
  7. this.selectAllComponents()

component 实例属性

  1. this.data
  2. this.props
  3. this.setData()
  4. this.selectComponent()
  5. this.selectAllComponents()
  6. this.triggerEvent()
@babel/runtimecore-jshttpsstylus
@infinitebrahmanuniverse/nolb-_wem@everything-registry/sub-chunk-1011@zalastax/nolb-_wem
1.0.1

5 years ago

1.0.0

5 years ago