原生小程序之仿美团外卖weixin42012429的博客-

根据美团外卖仿写微信小程序

1. 根据美团外卖仿写小程序,请求运用封装的微信小程序的原生方法wx.request,后台数据自己在本地搭建的mock模拟数据,封装store代替状态管理工具,即app.js中的globalData.毕竟是大厂的项目不可能一模一样,只写了部分功能,缺少登录功能,支付功能,注册功能
2. 
   这是微信小程序的首页部分,地图功能用的微信小程序原生的wx.getLocation方法加腾讯地图,可以获取用户当前的位置,搜索栏的字体图标用的iconfont图标字体,阿里的图标库.在下面为swiper原生的组件,点击图片跳转到票搜索页
   
   在这个页面中点击搜索获取店铺信息列表,将据保存在globaldata中,在根目录下创建store文件夹,创建store.js,用来创建获取和赋值的方法类,即get操作和set操作,创建index.js用来定义初始变量即默认值,在app.js中引入store.js并在app.js中的globaldata中引入,在store.js中引入getApp获取整个globaldata对象
   
   这是整体的文件夹

//app.js const globalData=require('./store/index') App({   onLaunch: function () {     console.log(globalData.globalData); // 展示本地存储能力 var logs = wx.getStorageSync('logs') || []     logs.unshift(Date.now())     wx.setStorageSync('logs', logs) // 登录     wx.login({       success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } }) // 获取用户信息     wx.getSetting({       success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框           wx.getUserInfo({             success: res => { // 可以将 res 发送给后台解码出 unionId this.globalData.userInfo = res.userInfo                // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } } }) } } }) },   globalData: {     userInfo: null, ...globalData.globalData   } }) 

这是在app.js中引入封装的store

module.exports={   globalData:{     userpwd:123456,     historylist:['麻辣烫'],     orderlist:[ {         image:'https://p0.meituan.net/168.0.80/waimaipoi/ea39cf8507bd8193fd029842bb6d05af38659.jpg@80w_80h_1e_1c.webp',         title: "塔哈尔新疆盛宴·烧烤（北京国瑞店）",         productlist:[ {             product:'[鱼跃]玻璃体温计CRW-11(三角型棒式口腔性)',             count:1 } ],         sumproduct:100 } ] } } 

这是index.js即初始化store中的数据,或者保存默认值

var app=getApp(); class Store{ get userpwd(){ return app.globalData.userpwd   } set userpwd(value){     app.globalData.userpwd=value   } //获取和赋值历史搜索数据 get historylist(){ return app.globalData.historylist   } set historylist(value){     app.globalData.historylist=value   } //赋值和获取我的订单 get orderlist(){ return app.globalData.orderlist   } set orderlist(value){     app.globalData.orderlist=value   } } const store=new Store(); export default store; 

通过es6中的类创建get方法和set方法,创建Store实例,通过export default导出,在页面中通过import接收

import store from './../../store/store' onLoad: function (options) {     console.log(options); // this.search(options.con); this.setData({       historylist:store.historylist     }) }, onClickHot(e){ this.search('res') let target=e.currentTarget.dataset.item,list=this.data.historylist; this.setData({       innersearch:target     })     list.push(target); this.setData({       historylist:list     })     store.historylist=list   }, 

通过store.的方式进行取值和赋值

2.路由的封装
在根目录下创建router文件夹,文件夹下创建router.js和index.js,router.js定义路由字典,index封装条状方法,push等

module.exports={   search:'/pages/search/search',   shoplist:'/pages/shoplist/shoplist' } 

const routes=require('./router'); export function push(name,data={}){ const querystr=Object.keys(data).map(n=>`${n}=${data[n]}`).join('&');   wx.navigateTo({     url: routes[name]+'?'+querystr   }) } 

可以继续封装wx.redirectTo方法wx.switchTab方法等

3.通过import导入push方法,传递定义的路由,传递数据参数

import {push} from './../../router/index' Component({   options: {       multipleSlots: true },     properties:{     storeInfo:{ 'type':Object, 'value':null } },  data:{ },  methods: { togglesele(){ this.setData({       isActive: !this.data.isActive     }) }, detailpage(e){ push('shoplist',e.currentTarget.dataset.info) } } }) 

跳转至店铺详情页面,获取传递的参数,渲染数据

附上git代码连接地址代码地址