微信小程序接口Promise化,全局数据共享


微信小程序是用npm构建

  1. 初始化package.json

    npm init -y
    
  2. 点击微信小程序工具工具 构建npm

  3. 在微信小程序工具详情中的本地设置中勾选 使用npm模块

  4. 在微信小程序的app.json中配置

    "usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }
    
  5. 点击微信小程序工具工具 构建npm

  6. 在微信小程序的 app.json中删除 style: "v2" ,避免样式冲突

  7. 在微信小程序中的.wxml页面中 验证其是否有效果。

    <vant-button type="primary">按钮</vant-button>
    
  8. 微信小程序定制主题

    在app.wxss 中 page{} 中定义自定义主题,例如修改按钮的背景颜色和变边框颜色,只需要这样写就可以了。
    https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

    Page{
      --button-danger-background-color: #c00000;
      --button-danger-border-color: #D60000;
    }
    

接口Promise化

  1. 请求接口 Promise

    npm i --save miniprogram-api-promise@1.0.4
    
  2. 先删除项目录 XXX_npm, 然后需要重新构建。

  3. 在微信小程序中的 app.js 中导入 promisifyAll模块

    // 导出包
    import {promisifyAll} from "miniprograme-api-promise";
    // 定义一个空对象来存储promise后的数据,在其他页面中可以直接使用wx.p 来接受promiss后的数据
    const wxp = wx.p = {}
    // 微信的所有接口都需要promisse化
    promissifyAll(wx, wxp);
    
    // 如何使用请求?使用 async ... await ....
    // 定义一个方法 getSum()
    async getSum(){
      const res = await wx.p.request({
        url: 'xx',
        method:'GET',
        data: {"属性": "属性值"}
      });
      console.log(res);
    }
    

微信小程序中的全局数据共享方案

  1. 在小程程序中,可以使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。

    1. mobx-miniprogram 用来创建Store对象

    2. mobx-miniprogram-bindings 用来把Store中的共享数据或方法,绑定到组件或页面中使用。

  2. 安装相关依赖

    npm i --save mobx-miniprogram@4.13.2
    npm i --save mobx-miniprogram-bindings@1.2.1
    
  3. 在项目根目录下新建store目录,并在此目录下新建store.js文件

    // store.js
    import {observable, action} from "mobx-miniprogram";
    module.export const store = observable({
      // 定义属性
      NumA: 10,
      NumB: 20,
      // 只读函数(静态方法)
      get sum(){
        return this.NumA + this.NumB;
      },
      // 定义方法
      updateNumA: action({
        this.NumA += 1
      }),
      updateNumB: action({
        this.NUmB += 1
      })
    })
    
  4. 如何使用? 在xx.js

    import {createStoreBindings } from "mobx-miniprogram-bindings";
    import { store } from "path/to/store/store";
    
    onLoad: function(){
      this.storeBindings = createStoreBindings(this, {
         store,
         fields: ["NumA","NumB","sum"],
         action: ["updateNumA", "updateNumB"]
      })
    },
    unLoad: function(){
      this.storeBindings..destroyStoreBindings();
    }
    
  5. 在页面中 wxml 中使用

    <view>
    		{{numA}} + {{numB}} = {{sum}}
    </view>
    
  6. store 中的成员绑定到组件中

    1. 导包
    import {storeBindingsBehavior} from "mobx-miniprogram-bindings";
    import {store} from "/path/to/store/store";
    
    1. 自动注册

      Component({
        "behaviors": [storeBindingsBehavior]
      })
      
    2. 绑定方法

      Component({
        "storeBindings": {
          store,
          fields: {
            // 别名: "store.js中的属性名",
            numA: "numA"
          },
          actions:{
            // 别名: "store.js中的方法名",
            updateNum1: "updateNum1"
          }
        }
      })
      
    3. xxx.js中定义一个点击事件

      Components({
        // 定义事件
        methods:{
          handlerBindTap(e){
            // 给 numB加 1
            this.updateNum2(e.target.dataset.step);
          }
        }
      })
      
    4. 前端

      <view>
        {{numA}} + {{numB}} = {{sum}}
      </view>
      <view>
        <van-button bindtap="handleBindTap" data-step="{{1}}">+1</van-button>
      </view>
      
    5. 完成代码

      1. store.js

        // 在这个js文件中,专门来创建Store的实例对象
        // 导包
        import {observable, action} from "mobx-miniprogram";
        
        // 导出实例对象
        export const store = observable({
          // 共享数据
          numA: 1,
          numB: 2,
          // 定义计算属性 使用get 为只读属性
          get sum(){
            return this.numA + this.numB
          },
        
          // 修改数据
          //action方法,专门用来修改state中的数据的值
          updateNum1: action(function(step){
            this.numA +=  step
          }),
          updateNum2: action(function(step){
            this.numB += step
          })
        })
        
      2. xxx.js

        import {storeBindingsBehavior} from 'mobx-miniprogram-bindings';
        import {store} from "../../store/store";
        
        
        Component({
          // 自动绑定 behavior
          behaviors:[storeBindingsBehavior],
          // 声明方法
          storeBindings: {
            store,
            fields:{
              numA: 'numA',
              numB: 'numB',
              sum: "sum"
            },
            actions:{
              updateNum2: "updateNum2"
            }
          },
          /**
           * 组件的属性列表
           */
          properties: {
        
          },
        
          /**
           * 组件的初始数据
           */
          data: {
        
          },
        
          /**
           * 组件的方法列表
           */
          methods: {
            handleBindTap(e){
              console.log(e);
              this.updateNum2(e.target.dataset.step)
            }
          }
        })
        
        
      3. xx.wxml

        <view>
          {{numA}} + {{numB}} = {{sum}}
        </view>
        <view>
          <van-button bindtap="handleBindTap" data-step="{{1}}">+1</van-button>
        </view>
        

原创文章,作者:,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/273739.html

(0)
上一篇 2022年7月12日 05:03
下一篇 2022年7月12日 05:03

相关推荐

发表回复

登录后才能评论