类似美团外卖的原生小程序

根据美团外卖仿写微信小程序根据美团外卖仿写小程序,请求运用封装的微信小程序的原生方法wx.request,后台数据自己在本地搭建的mock模拟数据,封装store代替状态管理工具,即a.js中的globalData.毕竟是大厂的项目不可能一模一样,只写了部分功能,缺少登录功能,支付功能,注册功能这是微信小程序的首页部分,地图功能用的微信小程序原生的wx.getLocation方法加腾讯地图,可以获取用户当前的位置,搜索栏的字体图标用的iconfont图标字体,阿里的图标库.在下面为swier原生的组件,点击图片跳转到票搜索页在这个页面中点击搜索获取店铺信息列表,将据保存在globaldata中,在根目录下创建store文件夹,创建store.js,用来创建获取和赋值的方法类,即get操作和set操作,创建index.js用来定义初始变量即默认值,在a.js中引入store.js并在a.js中的globaldata中引入,在store.js中引入getA获取整个globaldata对象这是整体的文件夹.js
constglobalData=require('.storeindex')
A({
onLaunch:function(){
conse.log(globalData.globalData);
展示本地存储能力
varlogs=wx.getStorageSync('logs')||[]
logs.unshift(Date.now())
wx.setStorageSync('logs',logs)登录
wx.login({
success:res=>{
发送res.code到后台换取oenId,sessionKey,unionId
}
})
获取用户信息
wx.getSetting({
success:res=>{
if(res.authSetting['scoe.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
}
})这是在a.js中引入封装的store
module.exorts={
globalData:{
userwd:123456,
historyst:['麻辣烫'],
orderst:[
{
image:'htt:0.meituan.net168.0.80waimaioiea39cf8507bd8193fd029842bb6d05af38659.jg@80w_80h_1e_1c.web',
title:"塔哈尔新疆盛宴·烧烤（北京瑞店）",
roductst:[
{
roduct:'[鱼跃]玻璃体温计CRW-11(三角型棒式口腔性)',
count:1
}
],
sumroduct:100
}
]
}
}这是index.js即初始化store中的数据,或者保存默认值
vara=getA();
classStore{
getuserwd(){
returna.globalData.userwd
}
setuserwd(value){
a.globalData.userwd=value
}
获取和赋值历史搜索数据
gethistoryst(){
returna.globalData.historyst
}
sethistoryst(value){
a.globalData.historyst=value
}
赋值和获取我的订单
getorderst(){
returna.globalData.orderst
}
setorderst(value){
a.globalData.orderst=value
}
}
conststore=newStore();
exortdefaultstore;
通过es6中的类创建get方法和set方法,创建Store实例,通过exortdefault导出,在页面中通过imort接收
imortstorefrom'.....storestore'
onLoad:function(otions){
conse.log(otions);
this.search(otions.con);
this.setData({
historyst:store.historyst
})
},
onCckHot(e){
this.search('res')
lettarget=e.currentTarget.dataset.item,st=this.data.historyst;
this.setData({
innersearch:target
})
st.ush(target);
this.setData({
historyst:st
})
store.historyst=st
},通过store.的方式进行取值和赋值
2.路由的封装
在根目录下创建router文件夹,文件夹下创建router.js和index.js,router.js定义路由字典,index封装条状方法,ush等
module.exorts={
search:'gessearchsearch',
shost:'gesshostshost'
}constroutes=require('.router');
exortfunctionush(name,data={}){
constquerystr=Object.keys(data).ma(n=>`${n}=${data[n]}`).join('&am;');
wx.navigateTo({
url:routes[name]+'?'+querystr
})
}可以继续封装wx.redirectTo方法wx.switchTab方法等
3.通过imort导入ush方法,传递定义的路由,传递数据参数
imort{ush}from'.....routerindex'
Comonent({
otions:{
multileSlots:true
},
roerties:{
storeInfo:{
'tye':Object,
'value':null
}
},
data:{},
methods:{
togglesele(){
this.setData({
isActive:!this.data.isActive
})
},
detailage(e){
ush('shost',e.currentTarget.dataset.info)
}
}
})跳转至店铺详情页面,获取传递的参数