微信小程序安装及使用 vant-weapp,primose,mobx

准备工作
在项目的根目录下 npm init -y 初始化一个项目

安装vant-webapp

ant-webapp官网https://vant-ui.github.io/vant-weapp/#/quickstart

1. 在根目录终端输入 npm i @vant/weapp -S --production
2. 在小程序开发界面’ 工具 ‘中选择’ 构建npm ’
3. vant中提供了多种美化的组件 他们的本质还是个组件 需要在使用的时候引入 。全局都要使用 就在app.json中 引入所需的组件 ，同时去除 "style": "v2"

要引入的具体的组件 参考官网
例：

"usingComponents": {
  "van-button": "path/to/@vant/weapp/dist/button/index"
}

安装primose

为了避免更多的回调，更灵活的获取回调结果 采用promise化

1. 在项目根目录终端 npm i miniprogram-api-promise@1.0.4 -S

2. 删除目录
   点击工具-构建npm重新生成

3. 在app.js中引入

   import{promisifyAll}from 'miniprogram-api-promise'
   const wxp=wx.p={}
   promisifyAll(wx,wxp)
   
   

4. 使用例子：
   （在函数前面加上await可获取成功结果，避免回调。可使用try-catch捕获错误。有await 函数前就要有 async）

      async toGetMag(){
          const res= await wx.p.request({
             url: 'http://127.0.0.1:8080/wechat/getMsg'
           })
           console.log(res);
       }
       
   

   或者同axios风格,一样的效果

   toGetMag(){
         wx.p.request({
            url: 'http://127.0.0.1:8080/wechat/getMsg',
       
         }).then(res=>console.log(res))
       }
   

测试：

用java springboot 编写一段contrller ,关掉小程序设置中的域名安全校验

package com.yan.controller;

import com.yan.common.MyResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;

@RestController
@RequestMapping("/wechat")
public class WeiXinController {
    @GetMapping("getMsg")
    public MyResult getMsg(){
        HashMap<String, Object> map = new HashMap<>();
        map.put("msg","test:ok");
        return new MyResult(200,map);
    }
}

package com.yan.common;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
import java.util.HashMap;

@Data
@AllArgsConstructor
@NoArgsConstructor
@Accessors(chain = true)
public class MyResult {
    private  Integer code;
    private HashMap<String, Object>map;

}

使用primose化代码：
await/async

then:

不使用promise

安装mobx

实现全局共享变量 类似于 vuex，redux

mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享

• 终端下载 npm i mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1 -S

• 删除之前 miniprogram_npm 包 重新构建

• 在项目目录中 创建store目录 目录下 创建store.js文件

• 例：

  import {observable,action} from 'mobx-miniprogram'
  export const store=observable({
  	// 属性
  	numA:100,
  	// 计算属性
  	getNumA(){
  		return this.numA+1;
  	},
  	// 通过action方法改变属性
  	setNumA:action(function(step){
  		this.numA=step
  	})
  })
  

• 页面引用
  例如在 home页面 要使用mobx中的数据：
  Home.js

import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
// 在页面加载时 引入数据
onLoad() {
  this.storeBindings=  createStoreBindings(this,{
      store,
      fields:['numA'],
      actions:['setNumA']
    })
  },
  onUnload(){
      this.storeBindings.destroyStoreBindings()
  }
// 页面消失后 销毁

绑定store后 数据和事件可直接使用

• 组件引用

在组件的js中

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Component({
    behaviors:[storeBindingsBehavior],
    storeBindings:{
        store,
        fields:{
            numA:'numA'
        },
        actions:{
            setNumA:'setNumA'
        }
    }
})