微前端架构如何改变企业的开发模式与效率提升
1095
2022-10-09
微信小程序-移动端小商城
微信小程序-移动端小商城
项目说明:
微信小程序:实现一个移动端小商城,项目持续更新中...
使用技术: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、pluginsetc — 存放配置文件,例如:config.jshelpers — 存放帮助文件,例如:Promise 微信原生API、Promise wx.request、RESTful http client、Form validationpages — 存放项目页面相关文件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
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的传承和新的传奇。由WeiMall开发团队完成开发。如果您愿意支持我们的工作,欢迎您对DiyGw进行捐赠。
支付宝捐赠(收款人:luckyzf@126.com)
微信捐赠(收款人:html580网站-邓志锋付钱)
如果您对WeiMall有任何建议、想法、评论或发现了bug,请联系我们280160522@qq.com。
感谢:
感谢开源作者:m-mall
贡献
有任何意见或建议都欢迎提 issue
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~