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）
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
})
}
})
}
}