DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(omix): v2.2, support private data for page

This commit is contained in:
dntzhang 2019-11-01 13:03:51 +08:00
parent 461f9b6bb2
commit 157ffe5a41
7 changed files with 171 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/omix-ts/miniprogram/utils/create.ts
View File

@ -188,7 +188,12 @@ function create(store: any | ComponentOption, option?: PageOption) {
}
}
option.data = store.data
const hasData = typeof option.data !== 'undefined'
if (option.data) {
option.data.$ = store.data
} else {
option.data = store.data
}
observeStore(store)
const onLoad = option.onLoad
@ -197,6 +202,7 @@ function create(store: any | ComponentOption, option?: PageOption) {
option.use && (this.__updatePath = getPath(option.use))
this.__use = option.use
this.__hasData = hasData
store.instances[this.route] = []
store.instances[this.route].push(this)
this.computed = option.computed
@ -262,7 +268,15 @@ function _update(kv, store) {
for (let key in store.instances) {
store.instances[key].forEach(ins => {
if(store.updateAll || ins.__updatePath && needUpdate(kv,ins.__updatePath)){
ins.setData.call(ins, kv)
if (ins.__hasData) {
for (let pk in kv) {
kv['$.' + pk] = kv[pk]
delete kv[pk]
}
ins.setData.call(ins, kv)
} else {
ins.setData.call(ins, kv)
}
const using = getUsing(store.data, ins.__use)

5
packages/omix/app.json
View File

@ -1,6 +1,7 @@
{
"pages": [
"pages/index/index",
"pages/index/index",
"pages/index-with-data/index",
"pages/logs/logs"
],
"window": {
@ -10,4 +11,4 @@
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}
}

73
packages/omix/pages/index-with-data/index.js Normal file
View File

@ -0,0 +1,73 @@
import create from '../../utils/create'
import store from '../../store/index'
//获取应用实例
const app = getApp()
create(store, {
use: [
'motto',
'userInfo',
'hasUserInfo',
'canIUse'
],
computed: {
reverseMotto() {
return this.motto.split('').reverse().join('')
}
},
data: {
name: 'omix'
},
//事件处理函数
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.store.data.userInfo = app.globalData.userInfo
this.store.data.hasUserInfo = true
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.store.data.userInfo = res.userInfo
this.store.data.hasUserInfo = true
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.store.data.userInfo = res.userInfo
this.store.data.hasUserInfo = true
}
})
}
setTimeout(() => {
this.store.data.logs.push('abc')
this.store.data.motto = '123456'
}, 1000)
setTimeout(() => {
this.store.data.motto = 'abcdefg'
}, 2000)
const handler = function (evt) {
console.log(evt)
}
store.onChange(handler)
store.offChange(handler)
},
getUserInfo: function (e) {
this.store.data.userInfo = e.detail.userInfo
this.store.data.hasUserInfo = true
}
})

5
packages/omix/pages/index-with-data/index.json Normal file
View File

@ -0,0 +1,5 @@
{
"usingComponents": {
"test-store": "/components/test-store/test-store"
}
}

14
packages/omix/pages/index-with-data/index.wxml Normal file
View File

@ -0,0 +1,14 @@
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!$.hasUserInfo && $.canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{$.userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{$.userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{$.motto}}-{{reverseMotto}}</text>
</view>
<test-store />
</view>

21
packages/omix/pages/index-with-data/index.wxss Normal file
View File

@ -0,0 +1,21 @@
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}

65
packages/omix/utils/create.js
View File

@ -1,5 +1,5 @@
/*!
* omix v2.1.0 by dntzhang
* omix v2.2.0 by dntzhang
* Github: https://github.com/Tencent/omi
* MIT Licensed.
*/
@ -15,24 +15,28 @@ function create(store, option) {
store.instances = {}
}
if(!store.onChange){
store.onChange = function(fn){
if (!store.onChange) {
store.onChange = function (fn) {
changes.push(fn)
}
}
if(!store.offChange){
store.offChange = function(fn){
for(let i = 0,len =changes.length;i<len;i++){
if(changes[i] === fn){
if (!store.offChange) {
store.offChange = function (fn) {
for (let i = 0, len = changes.length; i < len; i++) {
if (changes[i] === fn) {
changes.splice(i, 1)
break
}
}
}
}
option.data = store.data
const hasData = typeof option.data !== 'undefined'
if (option.data) {
option.data.$ = store.data
} else {
option.data = store.data
}
observeStore(store)
const onLoad = option.onLoad
@ -41,6 +45,7 @@ function create(store, option) {
option.use && (this.__updatePath = getPath(option.use))
this.__use = option.use
this.__hasData = hasData
store.instances[this.route] = []
store.instances[this.route].push(this)
this.computed = option.computed
@ -76,8 +81,8 @@ function create(store, option) {
}
}
function compute(computed, store, using){
for(let key in computed){
function compute(computed, store, using) {
for (let key in computed) {
using[key] = computed[key].call(store.data)
}
}
@ -88,12 +93,12 @@ function observeStore(store) {
if (prop.indexOf('Array-push') === 0) {
let dl = value.length - old.length
for (let i = 0; i < dl; i++) {
patch[ fixPath(path + '-' + (old.length + i))] = value[(old.length + i)]
patch[fixPath(path + '-' + (old.length + i))] = value[(old.length + i)]
}
} else if (prop.indexOf('Array-') === 0) {
patch[ fixPath(path)] = value
patch[fixPath(path)] = value
} else {
patch[ fixPath(path + '-' + prop)] = value
patch[fixPath(path + '-' + prop)] = value
}
_update(patch, store)
@ -105,8 +110,16 @@ function observeStore(store) {
function _update(kv, store) {
for (let key in store.instances) {
store.instances[key].forEach(ins => {
if(store.updateAll || ins.__updatePath && needUpdate(kv,ins.__updatePath)){
ins.setData.call(ins, kv)
if (store.updateAll || ins.__updatePath && needUpdate(kv, ins.__updatePath)) {
if (ins.__hasData) {
for (let pk in kv) {
kv['$.' + pk] = kv[pk]
delete kv[pk]
}
ins.setData.call(ins, kv)
} else {
ins.setData.call(ins, kv)
}
const using = getUsing(store.data, ins.__use)
@ -123,18 +136,18 @@ function _update(kv, store) {
store.debug && storeChangeLogger(store, kv)
}
function storeChangeLogger (store, diffResult) {
function storeChangeLogger(store, diffResult) {
try {
const preState = wx.getStorageSync(`CurrentState`) || {}
const title = `State Changed`
console.groupCollapsed(`%c ${ title } %c ${ Object.keys(diffResult) }`, 'color:#e0c184; font-weight: bold', 'color:#f0a139; font-weight: bold')
console.log(`%c Pre State`, 'color:#ff65af; font-weight: bold', preState)
console.log(`%c Change State`, 'color:#3d91cf; font-weight: bold', diffResult)
console.log(`%c Next State`, 'color:#2c9f67; font-weight: bold', store.data)
console.groupEnd()
wx.setStorageSync(`CurrentState`, store.data)
const preState = wx.getStorageSync(`CurrentState`) || {}
const title = `State Changed`
console.groupCollapsed(`%c ${title} %c ${Object.keys(diffResult)}`, 'color:#e0c184; font-weight: bold', 'color:#f0a139; font-weight: bold')
console.log(`%c Pre State`, 'color:#ff65af; font-weight: bold', preState)
console.log(`%c Change State`, 'color:#3d91cf; font-weight: bold', diffResult)
console.log(`%c Next State`, 'color:#2c9f67; font-weight: bold', store.data)
console.groupEnd()
wx.setStorageSync(`CurrentState`, store.data)
} catch (e) {
console.log(e)
console.log(e)
}
}