本文共 4419 字，大约阅读时间需要 14 分钟。
微信小程序：实现一个移动端小商城，项目持续更新中...
使用技术：Weui.wxss 、 ES6
前台：
后台：
m-mall/ |-assets/ |- images/ |- plugins/ |- styles/ |- ... |-etc/ |- config.js |- ... |-helpers/ |- HttpResource.js |- HttpService.js |- ServiceBase.js |- Tools.js |- WxResource.js |- WxService.js |- WxValidate.js |- ... |-pages/ |- start |- index.js |- index.json |- index.wxml |- index.wxss |- ... |-app.js |-app.json |-app.wxss |-...
import WxService from 'helpers/WxService'const Wx = new WxServiceWx.login(data => Wx.getUserInfo()).then(data => console.log(data))Wx.showModal({title: '提示', content: '这是一个模态弹窗'}).then(data => res.confirm && console.log('用户点击确定')) import ServiceBase from 'helpers/ServiceBase'const HttpService = new ServiceBaseHttpService.getRequest(url, params, header, dataType)HttpService.postRequest(url, params, header, dataType)HttpService.putRequest(url, params, header, dataType)HttpService.deleteRequest(url, params, header, dataType)HttpService.headRequest(url, params, header, dataType)HttpService.optionsRequest(url, params, header, dataType)HttpService.traceRequest(url, params, header, dataType)HttpService.connectRequest(url, params, header, dataType) import WxResource from 'helpers/WxResource'// 例如以下为后台提供的接口文档// GET /api/users：获取所有用户资源// GET /api/users/ID：获取某个指定用户的信息// POST /api/users：新建一个用户// PUT /api/users/ID：更新某个指定用户的信息// DELETE /api/users/ID：删除某个指定用户// 创建资源实例对象，接收四个参数url, paramDefaults, actions, optionsconst user = new WxResource('/api/users/:id', {id:'@id'}, { list: { method: 'GET', header: { Authorization: 'Authorization', }, },}, { stripTrailingSlashes: true, suffix: 'Async',})// 获取所有用户资源user.listAsync().then(res => console.log(res)).catch(err => console.log(err))// 获取ID=123用户的信息user.getAsync({ id: 123 }).then(res => console.log(res)).catch(err => console.log(err))// 新建一个用户user.saveAsync({ name: '微信小程序' }).then(res => console.log(res)).catch(err => console.log(err))// 更新ID=123用户的信息user.updateAsync({ id: 123 },{ name: 'skyvow' }).then(res => console.log(res)).catch(err => console.log(err))// 删除ID=123用户的信息user.deleteAsync({ id: 123 }).then(res => console.log(res)).catch(err => console.log(err))// 返回的实例对象包含六个默认方法，getAsync、saveAsync、queryAsync、removeAsync、deleteAsync与一个自定义方法listAsync//// user.getAsync({id: 123}) 向/api/users/123发起一个GET请求，params作为填充url中变量，一般用来请求某个指定资源// user.queryAsync(params) 同getAsync()方法使用类似，一般用来请求多个资源// user.saveAsync(params, payload) 发起一个POST请，payload作为请求体，一般用来新建一个资源// user.updateAsync(params, payload) 发起一个PUT请，payload作为请求体，一般用来更新某个指定资源// user.deleteAsync(params, payload) 发起一个DELETE请求，payload作为请求体，一般用来移除某个指定资源// user.removeAsync(params, payload) 同deleteAsync()方法使用类似，一般用来移除多个资源//// user.listAsync({}) 向/api/users发送一个GET请求 import WxValidate from 'helpers/WxValidate'Page({ data: { form: { name : '', email: '', }, }, onLoad() { this.WxValidate = new WxValidate({ name: { required: true, minlength: 2, maxlength: 10, }, email: { required: true, email: true, }, }, { name: { required: '请输入姓名', }, email: { required: '请输入邮箱', email: '请输入有效的电子邮件地址', }, }) }, submitForm(e) { const params = e.detail.value if (!this.WxValidate.checkForm(e)) { const error = this.WxValidate.errorList console.log(error) return false } },})
转载地址：http://uphni.baihongyu.com/