在线微信小程序可视化开发工具代码生成器：http://www.diygw.com
针对小程序特性，提供了商城跟PHP后台进行交互的解决方案，帮助用户高效完成小程序开发，项目持续更新中...。
源码地址：http://git.oschina.net/html580/weimall
项目说明：
微信小程序：实现一个移动端小商城，项目持续更新中...
使用技术：Weui.wxss 、 ES6
目录结构：
weimall/ |-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 — 小程序公共样式表
增删改查
import ServiceBase from 'ServiceBase' class Service extends ServiceBase { constructor() { super() this.$$prefix = '' this.$$path = { wechatSignUp: '/index/wechatSignUp', wechatSignIn: '/index/wechatSignIn', decryptData: '/index/decryptData', signIn: '/index/signIn', signOut: '/index/signOut', data:'/index/data', detail: '/index/detail', add: '/index/add', del: '/index/del', update: '/index/update' } } wechatSignUp(params) { return this.postRequest(this.$$path.wechatSignUp, params) } wechatSignIn(params) { return this.postRequest(this.$$path.wechatSignIn, params) } wechatDecryptData(params) { return this.postRequest(this.$$path.decryptData, params) } signIn(params) { return this.postRequest(this.$$path.signIn, params) } signOut() { return this.postRequest(this.$$path.signOut) } //获取表格分页数据 getData(params) { return this.getRequest(this.$$path.data, params) } //获取单条数据 getDetail(params) { return this.getRequest(this.$$path.detail, params) } //新增数据 addData(params){ return this.postRequest(this.$$path.add, params) } //删除数据 delData(params) { return this.getRequest(this.$$path.del, params) } //更新数据 updateData(params) { return this.getRequest(this.$$path.update, params) } } export default Service //调用数据 App.HttpService.getData({ table:'banner', page:1 }).then(data=>{ if(data.code==0){ data.data.forEach(n => n.path = App.renderImage(n.img)); this.setData({ images: data.data }); }else{ this.showModal(data.message); } }); //新增数据 App.HttpService.addData(params).then(data => { if (data.code == 0) { this.showToast(data.message) } }); //更新数据 App.HttpService.updateData(params).then(data => { if (data.code == 0) { this.showToast(data.message); } }); //删除数据 App.WxService.showModal({ title: '友情提示', content: '确定要删除这个地址吗？', }) .then(data => { if (data.confirm == 1) { App.HttpService.delData({ table: 'address', id: id }).then(() => App.WxService.navigateBack()); } })
Form validation
bindsubmit="submitForm"> class="weui-cells"> class="weui-cell weui-cell_input"> class="weui-cell__hd"> class="weui-label">姓名 class="weui-cell__bd"> name="name" value="{{ form.name }}" class="weui-input" type="text" placeholder="请输入姓名" /> class="weui-cell weui-cell_input"> class="weui-cell__hd"> class="weui-label">邮箱 class="weui-cell__bd"> name="email" value="{{ form.email }}" class="weui-input" type="text" placeholder="请输入邮箱" /> class="button-sp-area"> class="weui-btn" type="primary" formType="submit">确定 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 } }, })
项目截图:
分享精神
非常感谢您的支持！如果您喜欢WeiMall，请将它介绍给自己的朋友，或者帮助他人安装一个DiyGw，又或者写一篇赞扬我们的文章。WeiMall是对ThinkPHP的传承和新的传奇。由GiyGw.com开发团队完成开发。
