小程序练习

大众点评

自定义头部的实现

思路: 1.在页面.json文件中配置,自定义头部样式

"navigationStyle":"custom"

2.在.js文件中使用wx.getMenuButtonBoundingClientRect()获取菜单按钮（右上角胶囊按钮）的布局位置信息,作为自定义头部布局的参照

效果截图

代码截图

壳牌加油站

首页功能

1.获取用户授权信息

思路:1.点击登录按钮,使用wx.getUserProfile(11月8号被收回)获取用户头像昵称信息

效果截图

代码截图

2.一键加油

思路: 1.点击一键加油,使用wx.navigateTo跳转到加油站列表页面;2.使用wx.getLocation获取当前位置信息,得到经纬度作为参数;3.使用wx.request请求加油站列表数据,渲染页面,4.使用for of处理距离的数据格式

效果截图

代码截图

3.扫码

思路:使用wx.scanCode实现扫码功能,如果是url,就使用web-view实现小程序到其他网页的跳转

效果截图

代码截图

4.积分商城--封装组件

思路: 在首页点击积分商城,使用navigator组件跳转到积分商城页面

1.组件抽取 -在根目录下创建一个components -右键选择创建文件夹 -选中文件夹,右键选择创建components,在相应文件下书写业务代码

2.注册: 在json文件中usingcomponents下注册组件

3.使用: 在wxml中使用组件

4.组件通信-父传子 父组件:在子组件标签上使用自定义属性动态传递数据;

<子组件标签 data="{{data}}"></子组件标签>

子组件:在properties中接收数据(同vue的props):

properties: { data:{ type:数据类型, value:默认值 } },

效果截图

代码截图

积分商城父组件代码

积分商城子组件代码