微信小程序-移动端小商城

项目说明：

微信小程序：实现一个移动端小商城，项目持续更新中...

使用技术：Weui.wxss 、 ES6

前台：m-mall

目录结构：

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
  |-...

assets — 存放静态文件，例如：images、styles、plugins
etc — 存放配置文件，例如：config.js
helpers — 存放帮助文件，例如：Promise 微信原生API、Promise wx.request、RESTful http client、Form validation
pages — 存放项目页面相关文件
app.js — 小程序逻辑
app.json — 小程序公共设置
app.wxss — 小程序公共样式表
Features
Promise 微信原生API
Promise wx.request
RESTful http client
Form validation
Promise 微信原生API

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('用户点击确定'))
Promise wx.request

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)
RESTful http client

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请求
Form validation

<form bindsubmit="submitForm">
    <view class="weui-cells">
        <view class="weui-cell weui-cell_input">
            <view class="weui-cell__hd">
                <view class="weui-label">姓名</view>
            </view>
            <view class="weui-cell__bd">
                <input name="name" value="{{ form.name }}" class="weui-input" type="text" placeholder="请输入姓名" />
            </view>
        </view>
        <view class="weui-cell weui-cell_input">
            <view class="weui-cell__hd">
                <view class="weui-label">邮箱</view>
            </view>
            <view class="weui-cell__bd">
                <input name="email" value="{{ form.email }}" class="weui-input" type="text" placeholder="请输入邮箱" />
            </view>
        </view>
    </view>
    <view class="button-sp-area">
        <button class="weui-btn" type="primary" formType="submit">确定</button>
    </view>
</form>

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

项目截图: