大众点评自定义头部 + 壳牌加油站

大众点评自定义头部

• 思路:
  • 关闭微信自带头部:在app.json中配置"navigationStyle": "custom"
  • 通过wx.getMenuButtonBoundingClientRect()获取微信胶囊按钮的位置大小信息
  • 在标签上写style的动态样式
• 项目截图
  • iphone XR

- ipad

• 代码截图

  • js文件

    

  • wxml文件

壳牌加油站小程序

功能

• 获取用户头像和昵称
• wx.request封装
• 获取用户地址
• 扫一扫
• 商城组件封装

项目整体截图

思路

• 获取用户头像和昵称:点击点我登录,使用wx.getUserProfile()进行用户昵称和头像的获取

• wx.request封装:创建一个js文件,定义一个函数,函数的参数就是请求url,method,data,然后这个函数返回一个promise对象

• 获取用户地址和加油站列表

  • 从首页跳转到一键加油页面 wx.navigateTo()
  • 在生命周期onLoad中进行wx.getLocation()获取定位 (注意:需要在app.json中进行permission的字段声明才能获取定位权限!!!)
  • 然后请求后端接口,获取附近加油站列表,渲染页面

• 扫一扫

  • 使用wx.scanCode(),在success回调函数中获取result
  • 判断result是否为网址,是就跳转到内嵌网页的页面,在navigateTo()的success回调中拿到eventChannel并使用eventChannel.emit进行传参
  • 创建内嵌网页页面,使用web-view组件,在onLoad中通过this.getOpenerEventChannel拿到eventChannel使用eventChannel.on接收传递的数据
  • 将数据赋值到web-view组件的src属性中

• 积分商城组件封装

  • 创建组件页面 /component 文件夹下创建组件文件夹,再右键创建component,即可完成创建组件
  • 引用组件,在使用组件的页面的json文件中配置 usingComponent 注册组件
  • 使用组件,在页面wxml中使用组件标签
  • 组件传值:在子组件中使用properties进行值的接收 , 父组件中在子组件标签上通过properties中定义的属性名进行数据的传递

项目截图

• 获取用户昵称和头像

  

• 封装wx.request

• 一键加油

• 扫一扫

• 积分商城组件封装

  • 组件页面
  
  • 使用页面
  
  • 效果图