封装全局状态管理

app.json

@@ -11,7 +11,8 @@
     "pages/billDetails/billDetails",
     "pages/noPermission/noPermission",
     "pages/allowanceRecordList/allowanceRecordList",
-    "pages/reTry/reTry"
+    "pages/reTry/reTry",
+    "pages/example/example"
   ],
   "window": {
     "enableWK": "YES",

package-lock.json

+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "dd-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/dd-store/-/dd-store-1.5.0.tgz",
+      "integrity": "sha512-1MTC807c0Y1phOa+Yvd5QWHolBmzfZ/V4wwHt9TJoLR5Jkb3IcIlsqtJzpAkQEJV4Cr1HIcYZYOKN+Aq6Hq2wQ=="
+    }
+  }
+}

pages/action/action.axml

-<view>
-  <view class="action">
-    
-  </view>
-</view>
+

pages/example/example.axml

+<view onTap="handleChangeTitle">更改</view>
\ No newline at end of file

pages/example/example.js

+import create from 'dd-store'
+import exampleStore from '/stores/exampleStore'
+create.Page({
+  // 是否自动注入所有store.data状态和全局状态globalData
+  // useAll: true,
+
+  // 注入页面store
+  store: exampleStore,
+
+  data: {
+    // 声明使用全局共享状态，如果设置useAll为true，则不声明就可以使用
+    // 为了避免与页面store.data内属性命名冲突，globalStore.data整个赋给globalData，即globalData = globalStore.data
+    globalData: null,
+
+    // 按需声明状态属性，如果设置useAll为true，则自动注入store.data全部属性，无需一个个添加
+    // 设置的默认值无效，如需设置请在store.data内设置
+    title: null,
+    a: null,
+    
+    // 定义store.data没有的属性，则默认为页面私有状态，只能使用默认的this.setData(obj)方式更新
+    privateData: '私有状态'
+  },
+
+  handleChangeTitle() {
+    this.store.data.title = '首页' + Math.floor(Math.random() * 1000)
+    this.update()
+  },
+
+  // goPage() {
+  //   dd.navigateTo({ url: '/pages/hello/hello' })
+  // }
+
+});
\ No newline at end of file

pages/example/example.json

+{}
\ No newline at end of file

pages/index/index.acss

@@ -70,7 +70,6 @@
 .indexItemList{
   margin-top: 40rpx;
   border-radius: 8rpx;
-  background: #ffffff;
   width: 686rpx;
   overflow: hidden;
   margin-left: 32rpx;
@@ -84,6 +83,7 @@
   box-sizing: border-box;
   justify-content: center;
   border-bottom: 1px solid #F6F6F6;
+  background: #ffffff;
 }
 .indexItemList>view:nth-child(odd){
   border-right: 1px solid #F6F6F6;

pages/index/index.axml

@@ -14,36 +14,11 @@
     <view>¥ <view class="balanceNum">{{`${realityBalance}` ? realityBalance.toFixed(2) : '--'}}</view></view>
   </view>
   <view class="indexItemList">
-    <view touchStart="touchStyle" touchEnd="touchEnd" onTap="toPayment"><image mode="scaleToFill" src="./../../assets/QRcode.png"/>付款</view>
-    <view touchStart="touchStyle" onTap="navigatorToAlipayRecharge"><image mode="scaleToFill" src="./../../assets/recharge.png"/>充值</view>
-    <view touchStart="touchStyle" onTap="navigatorToAllowanceList"><image mode="scaleToFill" src="./../../assets/allowance.png"/>津贴</view>
-    <view touchStart="touchStyle" onTap="navigatorToRecordList"><image mode="scaleToFill" src="./../../assets/bill.png"/>账单</view>
+    <!--  touchStart="touchStyle" touchEnd="touchEnd"  -->
+    <view onTap="navigatorToNext" data-type="1"><image mode="scaleToFill" src="./../../assets/QRcode.png"/>付款</view>
+    <view onTap="navigatorToNext" data-type="2"><image mode="scaleToFill" src="./../../assets/recharge.png"/>充值</view>
+    <view onTap="navigatorToNext" data-type="3"><image mode="scaleToFill" src="./../../assets/allowance.png"/>津贴</view>
+    <view onTap="navigatorToNext" data-type="4"><image mode="scaleToFill" src="./../../assets/bill.png"/>账单</view>
+    <view onTap="navigatorToNext" data-type="5"><image mode="scaleToFill" src="./../../assets/bill.png"/>{{title}}</view>
   </view>
-  <!-- <button size="default" type="primary" onTap="clear">琴姐专用按钮</button> -->
-
-  <!--
-    <view onTap="navigatorToAlipayRecharge">
-      充值
-    </view>
-    <view class="QRcode">
-      <image mode="scaleToFill" src="./../../assets/QRcode.png" onTap="toPayment" />
-    </view>
-  <view class="indexItemList">
-    <view onTap="navigatorToAllowanceList">
-      <view class="itemListLeft">
-        <image mode="scaleToFill" src="./../../assets/icon_allowance.png"/>津贴
-      </view>
-      <view class="itemListRight">
-        <image mode="scaleToFill" src="./../../assets/icon_right.png"/>
-      </view>
-    </view>
-    <view onTap="navigatorToRecordList">
-      <view class="itemListLeft">
-        <image mode="scaleToFill" src="./../../assets/icon_bill.png"/>账单记录
-      </view>
-      <view class="itemListRight">
-        <image mode="scaleToFill" src="./../../assets/icon_right.png"/>
-      </view>
-    </view>
-  </view> -->
 </view>

pages/index/index.js

 var app = getApp();
 import $http from './../../API/http'
-Page({
+import create from 'dd-store'
+import exampleStore from '/stores/exampleStore'
+create.Page({
+  store: exampleStore,
+  useAll: true,
   data: {
     src: './background.png',
     name: '姓名',
+    // store: exampleStore,
     avatar: '',
     realityBalance: '',
     cardNo: ''
   },
-//   clear() {
-//     console.log(11111111111)
-//     dd.removeStorageSync({
-//   key: 'token.data.access_token',
-// });
-
-//   },
   onLoad(query) {
     dd.hideLoading()
     const _that = this;
@@ -58,12 +56,12 @@ Page({
       console.log(res)
     })
   },
-  touchStyle(event) {
-    console.log(event, 123123123)
-  },
-  touchEnd(event){
-    console.log(event)
-  },
+  // touchStyle(event) {
+  //   console.log(event, 123123123)
+  // },
+  // touchEnd(event){
+  //   console.log(event)
+  // },
   onReady() {
     // 页面加载完成
   },
@@ -136,16 +134,38 @@ Page({
       path: 'pages/index/index',
     };
   },
+  navigatorToNext (event) {
+    switch (event.target.dataset.type) {
+      case '1':
+        dd.navigateTo({url:'./../payment/payment'});
+        break;
+      case '2':
+        dd.navigateTo({url:'./../alipayRecharge/alipayRecharge'});
+        break;
+      case '3':
+        dd.navigateTo({url:'./../allowanceList/allowanceList'});
+        break;
+      case '4':
+        dd.navigateTo({url:'./../recordList/recordList'});
+        break;
+      case '5':
+        dd.navigateTo({url:'./../example/example'})
+        break;
+      default:
+        // 如果表达式的值和以上的case后面的值都没有匹配上，那么就执行这里的代码。
+      break;
+    }
+  },
   navigatorToAllowanceList(){
-    dd.navigateTo({url:'./../allowanceList/allowanceList'})
+    
   },
   navigatorToAlipayRecharge(){
-    dd.navigateTo({url:'./../alipayRecharge/alipayRecharge'})
+    
   },
   navigatorToRecordList(){
-    dd.navigateTo({url:'./../recordList/recordList'})
+    
   },
   toPayment(){
-    dd.navigateTo({url:'./../payment/payment'})
+    
   }
 });

pages/payment/payment.js

@@ -164,7 +164,7 @@ Page({
       timeRefreshQRcode = setInterval(function() {
         _that.refreshQRcode();
       }, 55000);
-    }, 500)
+    }, 100)
   },
   // socket收到的信息回调
   onSocketMessageCallback: function(res) {
@@ -235,7 +235,7 @@ Page({
       timeRefreshQRcode = setInterval(function() {
         _that.refreshQRcode();
       }, 55000);
-    }, 500)
+    }, 100)
     // dd.getNetworkType({
     //   success: (res) => {
     //     // 有网络状态

stores/exampleStore.js

+class Store {
+
+  data = {
+    title: '测试',
+  }
+
+}
+
+export default new Store();
\ No newline at end of file