微信小程序框架——wepy使后感
更新:2018年1月10日15:32:22
在ios8
及部分机型下会有样式混乱的问题,经查找,原因是缺少浏览器前缀,需要加prefix
。
解决方案见链接:wepy-less-autoprefix
另外:如果直接引入了.wxss
文件,需要改成.less
。
再另:如果使用scss
,使用:wepy-plugin-autoprefixer
综述
- 小程序开发有哪些痛点
- 什么是以及如何使用
wepy
wepy
使用注意事项- ......
一、小程序开发有哪些痛点
RT,这里给几个我认为开发过程中不爽的几个地方,抛砖引玉。
1) 频繁调用 setData
及 setData
过程中页面跳闪,张老师有篇写的很好 Page和data
2) 组件化支持能力太弱(几乎没有)
3) 不能使用 less、jade
等
4) 无法使用 NPM
包及 ES
高级语法
5) request
并发次数限制
6) 一个页面对应4个文件,看的眼花缭乱
......
P.S.如果你还不了解如何开发小程序,那么得抓紧看下小程序开发简易教程了,兄得
二、什么是以及为什么使用 wepy
如果可以,请先花3、5分钟看一下正经官方文档。因为关于wepy
的一切,文档肯定比我说的清楚。
现在,我们这样写小程序,是不是很嗨皮呢,(cou zi shu:
<style lang="less">
@color: #4D926F;
.userinfo {
color: @color;
}
</style>
<template lang="pug">
view(class='container')
view(class='userinfo' @tap='tap')
mycom(:prop.sync='myprop' @fn.user='myevent')
text {{now}}
</template>
<script>
import wepy from 'wepy';
import mycom from '../components/mycom';
export default class Index extends wepy.page {
components = { mycom };
data = {
myprop: {}
};
computed = {
now () { return +new Date(); }
};
async onLoad() {
await sleep(3);
console.log('Hello World');
}
sleep(time) {
return new Promise((resolve, reject) => setTimeout(() => resolve, time * 1000));
}
}
</script>
写到这里我突然发现没什么可写的了,文档都很清楚啊!MDZZ
三、wepy
使用注意事项
由于类Vue
的开发风格,使得开发效率变高了,一个页面对应一个文件,后期维护变得更简单了。然鹅,因为微信的种种限制以及wepy
的黑魔法,导致我们不能随心所欲的管理应用。
3.1 数据管理问题
组件间的数据可以使用框架提供的 $emit
$broast
等方法,但页面之间的数据,就需要我们手动管理,非常麻烦且易于出错。
就目前来看,主要有四种方案可以选择:
-
Gloabal
对象或Storage
使用微信提供的`getApp()`方法,可以在页面间随意访问和改写这个对象。
-
EventBus
通过订阅/发布事件的方式,共享数据
-
Store
(临时想到)创建一个存储类来管理数据,本质上和`Storage`类似,但不能直接对数据进行修改而通过action触发数据变更。
-
wepy-redux
其实官方还是提供了`redux`方案,但没有在文档中暴露出来,使用`wepy new demo --redux`创建。
在拼车小程序中,使用的是第二种方法,按下不表。代码详见
关于第三种Store
方案,原本我想使用mobx
来管理小程序的数据,尝试后失败了。但自己创建一个类来管理数据,总觉得有些地方不妥,真心希望你能给个意见。
Store.js ,代码示例仅提供思路
class Store {
constructor (initState = {}) {
if (typeof initState !== 'object' || initState === null) {
throw new TypeError('[Store] Init state must be a object.')
}
const _state = this._state = deepclone(initState)
this.state = this._hookState(_state)
}
// 禁止直接修改
_hookState (_state) {
const state = {}
Object.keys(_state).forEach(key => {
if (typeof _state[key] === 'object' && _state[key] !== null) {
_state[key] = this._hookState(_state[key])
} else if (typeof _state[key] === 'function') {
throw new TypeError('[Store] state cannot save function.')
}
Object.defineProperty(state, key, {
enumerable: true,
configurable: true,
get () {
return _state[key]
},
set (newVal) {
throw new TypeError('[Store] mutate state failed. Use .mutate() to mutate state')
}
})
})
return state
}
mutate (fn) {
const newState = this._state = deepclone(
fn.apply(null, this._state)
)
this.state = this._hookState(newState)
}
}
module.exports = new Store({})
3.2 数据预加载优化
10-24更新
在使用
onPrefetch
预查询数据时,要注意两点:
- 必须在页面层级上使用路由跳转 =>
this.$navigate(url)
url
必须是相对路径
背景:我在 page1 写了一个倒计时,跳转到 page2 后发现倒计时仍然在进行。这说明什么呢?
这表明在小程序内即便发生跳转,页面的 Javascript
数据并不会从内存中消失,和我们平常开发 H5 页面有很大不同,是吧?
一般而言,我们请求数据是在onLoad
中进行,但是小程序的 page 1
跳转到 page 2
,再到 page 2
的 onLoad
是存在一个 300ms ~ 400ms 的延时的(这点@张帅 的上篇文章也提到了),所以我们白白浪费了这个时间。
wepy
在这里做了很容易被忽略的优化——
-
预加载数据
用于 page1 主动传递数据给 page2,比如 page2 需要加载一份耗时很长的数据。我可以在 page1 闲时先加载好,进入 page2 时直接就可以使用。
-
预查询数据
用于避免于 redirecting 延时,在跳转时调用 page2 预查询。
它扩展了页面生命周期,添加了onPrefetch
事件,使得在 $redirect/$navigate
之时被主动调用。同时,给onLoad
事件添加了一个参数,用于接收预加载或者是预查询的数据,如下:
// params
// data.from: 来源页面,page1
// data.prefetch: 预查询数据
// data.preload: 预加载数据
onLoad (params, data) {}
预加载数据示例:
// page1.wpy 预先加载 page2 需要的数据。
methods: {
tap () {
this.$redirect('./page2');
}
},
onLoad () {
setTimeout(() => {
this.$preload('list', api.getBigList())
}, 3000)
}
// page2.wpy 直接从参数中拿到 page1 中预先加载的数据
onLoad (params, data) {
data.preload.list.then((list) => render(list));
}
预查询数据示例:
// page1.wpy 使用封装的 redirect 方法跳转时,会调用 page2 的 onPrefetch 方法
methods: {
tap () {
this.$redirect('./page2');
}
}
// page2.wpy 直接从参数中拿到 onPrefetch 中返回的数据
onPrefetch () {
return api.getBigList();
}
onLoad (params, data) {
data.prefetch.then((list) => render(list));
}
3.3 数据上报(并没有做)
MTA是腾讯自家的数据分析平台,在小程序发布后MTA平台很快的就支持了小程序的数据上报。因此手机充值选择MTA做为数据上报平台,具体步骤如下:
在MTA官网注册应用;
在mp平台,小程序开发设置中,将https://pingtas.qq.com
添加为可信域名;
安装 mta-analysis
模块:npm install mta-analysis --save
;
在 app.wpy 中添加初始化代码。
import wepy from 'wepy';
import mta from 'mta-analysis';
export default class extends wepy.app {
onLaunch() {
mta.App.init({
"appID":"xxxx", // 注册后得到的appID
"eventID":"xxxx", // 注册后得到的eventID
"statPullDownFresh":true, // 使用分析-下来刷新次数/人数,必须先开通自定义事件,并配置了合法的eventID
"statShareApp":true, // 使用分析-分享次数/人数,必须先开通自定义事件,并配置了合法的eventID
"statReachBottom":true // 使用分析-页面触底次数/人数,必须先开通自定义事件,并配置了合法的eventID
});
};
}
这样就完成了MTA的初始化工作,在每个页面的 onLoad 事件中加入 init 事件完成页面的上报。
export default class Index extends wepy.page {
onLoad () {
mta.Page.init();
};
}
在 app.wpy 中加入报错上报。
export default class extends wepy.app {
onError () {
mta.Event.stat("error",{});
};
}
以及在其它业务逻辑代码上加入一些自定义事件上报,比如下单上报,支持上报等等。
mta.Event.stat("payed",{});
3.4 Integrating TypeScript
还是算求 D:
待续......