小程序架构搭建

1、新建小程序

小程序管理工具——新建小程序

2、装包

• vant
• computed
• store
• axios

npm i @vant/weapp -S --production
npm install --save miniprogram-computed
npm install --save mobx-miniprogram mobx-miniprogram-bindings
npm install --save miniprogram-api-promise
npm install axios

• 构建npm（设置使用npm模块）

3、vant配置

• 将 app.json 中的 “style”: “v2” 去除
• 修改 project.config.json

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

• 使用组件

// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

<van-button type="primary">按钮</van-button>

4、扩展computed使用(组件页面中均可)

const computedBehavior = require('miniprogram-computed').behavior

Component({
  behaviors: [computedBehavior],
  data: {
    a: 1,
    b: 1,
  },
  computed: {
    sum(data) {
      // 注意： computed 函数中不能访问 this ，只有 data 对象可供访问
      // 这个函数的返回值会被设置到 this.data.sum 字段中
      return data.a + data.b
    },
  },
})

5、store使用(组件页面中均可)

// store.js

import { observable, action } from 'mobx-miniprogram'

export const store = observable({

  // 数据字段
  userInfo: wx.getStorageSync('userInfo') || {},

  // 计算属性
  get isvip() {
    return Boolean(this.userInfo.agent == 2)
  },

  // actions和方法合并用法
  fetchUserInfo: action(function () {
    return http.get('/common/userInfo').then(({ data }) => {
      this.setUserInfo(data.userInfo)
      this.setMemberInfo(data.memberInfo)
    })
  }),
	setUserInfo: action(function (userInfo) {
	    let obj = Object.assign({}, this.userInfo, userInfo)
	    this.userInfo = obj
	    wx.setStorage({
	      key: 'userInfo',
	      data: obj,
	    })
	  }),
	})

使用

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from './store'

Component({
  behaviors: [storeBindingsBehavior],
  data: {
    someData: '...'
  },
  storeBindings: {
    store,
    fields: ['userInfo'],
    actions: {
      setUserInfo: 'setUserInfo',
    },
  },
  methods: {
    myMethod() {
      this.data.sum // 来自于 MobX store 的字段
    }
  }
})

5、wxp的使用

npm install --save miniprogram-api-promise
扩展微信小程序api支持promise
wxp调取小程序的api返回的是一个promise对象，可以使用 .then() 和 await

//wxp.js
import { promisifyAll } from 'miniprogram-api-promise'

export const wxp = {}
// promisify all wx's api
promisifyAll(wx, wxp)

6、公共样式

7、http（axios和request）

• wx.request
• axios

8、创建公共组件

9、创建文件夹

10、封装公共接口

• 上传图片的封装

// api.js
/**
 * 上传图片
 * @param {String} tempFilePath 图片路径
 */
export const uploadImage = tempFilePath => {
  return wxp.uploadFile({
    url: baseURL + '/api/dfs/uploadSaleOrderData',
    filePath: tempFilePath.url,
    name: 'file',
    formData: {
      file: tempFilePath.url,
    },
    header: {
      'Content-Type': 'multipart/form-data',
      token: wx.getStorageSync('token'),
    }
  })
}
//使用
<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />
methods:{
    afterRead(event) {
      const { file } = event.detail;
      uploadImage(file).then(res=>{
        console.log(22255,res.data)
        let data = JSON.parse(res.data)
        if(data.code == 0 ){
          // 接受图片
        }else{
          wx.showToast({
            title:data.msg
          })
        } 
      })
   }
 }