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

本文主要是介绍微信小程序接口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";
   

   2. 自动注册

      Component({
        "behaviors": [storeBindingsBehavior]
      })
      

   3. 绑定方法

      Component({
        "storeBindings": {
          store,
          fields: {
            // 别名: "store.js中的属性名",
            numA: "numA"
          },
          actions:{
            // 别名: "store.js中的方法名",
            updateNum1: "updateNum1"
          }
        }
      })
      

   4. 在 xxx.js中定义一个点击事件

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

   5. 前端

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

   6. 完成代码

      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>
         

这篇关于微信小程序接口Promise化，全局数据共享的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！