原生小程序之仿美团外卖

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

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:'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代码连接地址代码地址