原生小程序之仿美团外卖
原生小程序之仿美团外卖
根据美团外卖仿写微信小程序
根据美团外卖仿写小程序,请求运用封装的微信小程序的原生方法wx.request,后台数据自己在本地搭建的mock模拟数据,封装store代替状态管理工具,即app.js中的globalData.毕竟是大厂的项目不可能一模一样,只写了部分功能,缺少登录功能,支付功能,注册功能
这是微信小程序的首页部分,地图功能用的微信小程序原生的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:'http://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 代码连接地址