用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

5

主题

147

帖子

1676

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1676
2016-11-24 12:59:45 skyvow原创达人 优秀会员纪念 版主 楼主 69056671
本帖最后由 skyvow 于 2017-1-6 16:41 编辑

大家学习代码中遇到的问题,欢迎回复在这里

微信小程序-移动端小商城项目说明:
微信小程序:实现一个移动端小商城,项目持续更新中...
使用技术:Weui.wxss 、 ES6
前台:m-mall
后台:m-mall-admin
目录结构:
[JavaScript] 纯文本查看 复制代码
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 — 小程序公共样式表
FeaturesPromise 微信原生API
[JavaScript] 纯文本查看 复制代码
import WxService from 'helpers/WxService'

const Wx = new WxService
Wx.login(data => Wx.getUserInfo()).then(data => console.log(data))
Wx.showModal({title: '提示', content: '这是一个模态弹窗'}).then(data => res.confirm && console.log('用户点击确定'))

Promise wx.request
[JavaScript] 纯文本查看 复制代码
import ServiceBase from 'helpers/ServiceBase'

const HttpService = new ServiceBase
HttpService.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
[JavaScript] 纯文本查看 复制代码
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, options
const 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
[HTML] 纯文本查看 复制代码
<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>

[JavaScript] 纯文本查看 复制代码
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
        }
    },
})


WechatIMG1.jpeg screenshorts-12.png screenshorts-13.png
项目截图: screenshorts-01.png screenshorts-02.png screenshorts-03.png screenshorts-04.png screenshorts-05.png screenshorts-06.png screenshorts-07.png screenshorts-08.png screenshorts-10.png screenshorts-09.png



更新日志
  • 2016-11-27 修复部分页面多层级的交互BUG,添加拨打电话号码功能
  • 2016-11-28 完善购物车流程,可编辑可删除,完善我的订单查询功能
  • 2016-11-29 收货地址,添加打开地图选择位置
  • 2016-12-06 修复订单分页BUG、目录结构有所改动(以业务模块划分)、部分接口调用方法使用WxResource,如address模块
  • 2016-12-11 隔离prompt组件样式、添加WxValidate,实现验证字段功能(添加、编辑我的地址)、helpers下方法添加一些注释
  • 2016-12-13 添加商品搜索功能、修复订单路径错误
  • 2016-12-22 bug fix、兼容安卓、添加引导页、添加微信登录(需appid,且与我的后台一致,所以暂时无法体验,思路可以参考下)

项目地址及下载:(最新文件请进入github地址下载获取)
若不自行启动以下node后台服务,前台代码可在etc/config.js配置基础路径
QQ图片20161124193517.jpg
前台文件下载: m-mall-master.zip (586.82 KB, 下载次数: 5825)

评分

参与人数 5原创 +2 浮云 +56 收起 理由
wx_杨子70 + 2 很给力!
sdmovie + 2 很给力!
闫剑侠 + 2 很给力!
287637915 + 1 + 20 很给力!
天下雪 + 1 + 30 赞一个!

查看全部评分

skyvow 发表于 2016-12-12 12:10
确实是这样子,挺尴尬的,要是可以把用户认证体系与微信结合起来就好了,希望能给点意见琢磨琢磨! ...

意见不敢当,可以谈点想法大家一起讨论。
顺着你当前写的这个框架的思路,
  • 后台user model中,可以附加一个weixin schema作为sub doc,字段就包括小程序官方api可以提供的userInfo信息,比如openId,unionId,nickName,avatarUrl,区域,性别等;
  • 小程序客户端就无需提供用户名,密码的登陆方式了,直接使用官方api提供的login,根据code获取sessionKey,然后在服务端解密userInfo信息,这个时候能拿到openId,然后在mongo中查找是否有weixin.openId相等的,有就返回创建的token和userInfo,否则就创建一个新的user,并返回token;有一点需要考虑,同一个微信用户,不同的AppId获取的openId都不相同,所以为了以后可能的扩展需要(比如未来小程序需要和自己的服务号,订阅号等结合应用),最好是还有个微信开放平台的开发者帐号,把小程序关联进去,这样就直接通过unionId就判断用户是否存在,否则就得用openId+appId的方式。
  • 有了token后,调用api的处理方式都是一样的,这一块用JWT就完全足够了。
  • 使用这种方式,如未来应用还需要QQ登陆、微博登陆等(比如从ios, android或者H5端),也都可以继续扩展user schema,直接加weibo, qq schema作为sub doc,确保存在同一个user,然后返回统一的token就可以。
  • 当然为了尽可能的统一user信息,客户端在必要的时候,可以提供关联其他第三方帐号信息,或者让用户补全手机号/邮箱信息,后台自动把用户数据统一关联起来。



评分

参与人数 2原创 +1 浮云 +11 收起 理由
sdmovie + 1
天下雪 + 1 + 10 精品回复奖励

查看全部评分

精品demo,必须支持,大家学习代码中遇到的问题,欢迎回复在这里
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
2016-11-24 14:11:44 cuixin 新手上路
5#
还有后台 不错 来看一下
2016-11-24 14:14:11 treadpit原创达人 优秀会员纪念 开发者认证 诠释者
6#
学习下
2016-11-24 14:19:36 cuixin 新手上路
7#
基本代码都认识了 ,但是 对整个项目还是没想法,看看demo学习一下
66666666666
2016-11-24 15:28:55 johnana 攻城狮
9#
真是很强的堂子
支持支持
比较全面,感谢作者,V5!!!

评分

参与人数 1浮云 +10 收起 理由
天下雪 + 10 赞一个!

查看全部评分

2016-11-24 15:46:02 ccc10 攻城狮
12#
666666666
2016-11-24 15:54:12 geek 攻城狮
13#
bucuobucuo
6666666666666666666
发生的发生的发生地方
cuixin 发表于 2016-11-24 14:19
基本代码都认识了 ,但是 对整个项目还是没想法,看看demo学习一下

看不懂的就在这问
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
2016-11-25 09:15:20 gyx2813 架构狮
17#
赞。精品必须顶一个
您需要登录后才可以回帖 登录 | 立即注册