标签：微信 程序接口 数据共享 js miniprogram mobx numA store

微信小程序是用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>
         

标签：微信,程序接口,数据共享,js,miniprogram,mobx,numA,store
来源： https://www.cnblogs.com/wuxiaoshi/p/16468313.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。