wemix
v2.6.1
Published
this is a wechat small program component extension package
Downloads
100
Maintainers
hisanshaoReadme
__ ____ __ __ _ _ _
( \/\/ )(____)( \/ )( )( \_/ )
) ( )__) ) ( ( ) ) _ (
(__/\__)(____)( /\/\ )(_)(_/ \_)
#小程序wemix框架使用指南 ##项目创建
###安装wemix工具
npm install wemix-cli -g###进入开发目录生成空项目并开启实时编译
cd xxx
wemix new projectName
cd projectName
wemix build --watch //开发
wemix build -p --no-cache //线上####目录结构
|-- dist 微信开发者工具指定的目录
|-- node_modules
|-- src 开发目录
| |-- pages 页面文件夹(文件夹名不允许改动)
| | |-- index.js
| | |-- index.html
| | |-- index.less
| |-- components 页面依赖的组件文件夹(文件夹名不允许改动)
| | |-- com.js
| | |-- com.html
| | |-- com.less
| |-- app.js
| |-- app.less
|-- package-lock.json
|-- package.json⚠️注：命名为pages和components的文件夹请勿更改
###重要微信开发者工具设置
- 本地开发选择
dist目录 - 详情-->项目设置-->取消勾选ES6转ES5
- 详情-->项目设置-->取消勾选上传代码时样式自动补全
##开发前阅读
- 变量与方法使用尽量使用驼峰式命名，避免使用$开头。
- 小程序repeat组件内部禁止使用自定义组件(暂时)。
##使用wemix的优点 在原有的小程序的开发模式下进行再次封装：
- App实例增加onRoute生命周期,监听路由变化。
- Page实例增加onRoute生命周期避免onShow方法多次执行。
- 增加组件化开发，使组件间交互更加贴近于react的实现。
- 支持加载外部NPM包。
- 默认使用babel编译，具体默认配置参见wemix.config.js。
- 针对wx.request并发问题进行优化。
##实战说明 ###关于编译及插件
当前仅支持less编译 注： 如果是通用less文件，请单独创建一个文件夹存放
babel使用的preset为babel-preset-env，默认配置为(自定义配置需更改wemix.config.js)：
{ transformRuntime: { helpers: false, polyfill: true, regenerator: false, moduleName: 'babel-runtime' } }线上构建的时候指定以下插件进行压缩，暂时不可配置：
{ filemin: { filter: /\.(wxml|xml|json)$/, config: {} }, uglifyjs: { filter: /\.js$/, config: { toplevel: true } }, imagemin: { filter: /\.(jpg|png|jpeg)$/, config: { jpg: { quality: 80 }, png: { quality: 80 } } } }
###HTML说明
#####基于编译效率优先原则，所有this.data内的变量的引用均需要加入#{}包围
<view class='container'>
<view class='title'>Hello Wemix</view>
<view class='sub-title'>{{#{text}}}</view>
<button bindtap='#{viewTap}' data-from='page'>set page</button>
</view>
<view>This is component:</view>
<view class='component'>
<com v-on:viewTap='#{viewTap}' text='{{#{text}}}'></com>
</view>###实例 #####App实例
import wemix from 'wemix'
export default class extends wemix.app {
constructor () {
super()
this.config = {
pages: [
'pages/login'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#FFFFFF',
navigationBarTitleText: 'WEMIX',
navigationBarTextStyle: 'black'
},
networkTimeout: {
request: 10000,
downloadFile: 10000
}
}
// only define in app
this.globalData = {
}
}
onLaunch (options) {
}
onShow (options) {
}
onRoute () {
}
onHide () {
}
onError (msg) {
console.log(msg)
}
}
#####Page和Component实例
// 如何设置改变globalData
app实例：
1.let data = this.globalData.data
page或component实例：
1.constructor(app, page) { let data = app.globalData.data }
2. let data = wemix.$instance.globalData.dataimport wemix from 'wemix'
export default class LoginComponent extends wemix.component {
constructor (app, page) {
super()
this.data = {
}
this.components = {
}
this.listeners = {
}
this.customerData = {
}
this.methods = {
}
}
onLoad (options) {
}
onReady () {
}
onShow () {
}
onRoute () {
}
onHide () {
}
onUnload () {
}
onPullDownRefresh () {
}
onReachBottom () {
}
}###组件说明 #####不管组件是否显示，一旦引用，其内部生命周期都会和page的生命周期一起执行，所以如果需要显示的时候才调用目前只能通过监听的方式实现
import wemix from 'wemix'
import LoginCom from '../components/login'
export default class LoginPage extends wemix.page {
constructor (app) {
super()
this.config = {
navigationBarTitleText: '请登录',
disableScroll: true
}
this.components = {
LoginCom: LoginCom
}
this.data = {
}
this.customerData = {
}
this.listeners = {
}
// methods包括小程序的bindtap,catchtap等事件，及props对应的事件
this.methods = {
}
}
onLoad (options) {
}
onReady () {
}
onShow () {
}
onRoute () {
}
onHide () {
}
onUnload () {
}
onPullDownRefresh () {
}
onReachBottom () {
}
onShareAppMessage () {
}
onPageScroll () {
}
}
###组件 小程序支持js模块化，但彼此独立，业务代码与交互事件仍需在页面处理。无法实现组件化的松耦合与复用的效果。 例如模板A中绑定一个bindtap='#{myclick}'，模板B中同样绑定一样bindtap='#{myclick}'，那么就会影响同一个页面事件。对于数据同样如此。因此只有通过改变变量或者事件方法，或者给其加不同前缀才能实现绑定不同事件或者不同数据。当页面复杂之后就十分不利于开发维护。 因此wemix让小程序支持组件化开发，组件的所有业务与功能在组件本身实现，组件与组件之间彼此隔离，上述例子在wemix的组件化开发过程中，A组件只会影响到A绑定的myclick，B也如此。
####组件间通讯
- 传递事件需要在变量名前添加
v-on:来标记事件 - 传递静态值需要在变量名前添加
static:来标记静态参数
⚠️注：组件属性请勿添加 || && 等操作，只传递单一静态或动态值进去
<LoginCom v-on:viewTap='#{viewTap}' text='{{#{text}}}' static:show='{{true}}'></LoginCom>可在js中通过this.props.xxx获取事件或变量值
export default class Com extends wemix.component {
defaultProps = {
text: 'page text'
}
}<view>
<view wx:if='{{#{props.show}}}' class='title'>{{#{props.text}}}</view>
<button bindtap='#{props.viewTap}' data-from='page'>set page</button>
</view>⚠️注：wemix中的组件都是静态组件，是以组件ID作为唯一标识的，每一个ID都对应一个组件实例，当页面引入两个相同ID组件时，这两个组件共用同一个实例与数据，当其中一个组件数据变化时，另外一个也会一起变化。 如果需要避免这个问题，则需要分配多个组件ID和实例
import wemix from 'wemix'
import Com from '../components/com'
export default class Index extends wemix.page {
components = {
com: Com
com1: Com
}
}###监听 ####监听的方式有两种：
- 指监听当前页面及当前页面的组件内的listeners，需要将listenCurrentRoute：true。
- 指监听路由栈内的所有页面及组件内的listeners，需要将listenCurrentRoute：false。此为默认方式。
this.$emit({listenerName: 'name', listenCurrentRoute: true}, args)
this.listeners = {
['name'] (args) {}
}