• 课程介绍
  • 学习目标
  • 课程详情
  • 很显然,这是一套你们必须了解的微信 “小程序” 实战开发全套视频。在微信 “小程序” 发展如日中天的当下,掌握 “小程序” 开发能力,已是必备技能。本套视频会以 “大众点评” 的业务逻辑为原型,带领大家从 “小程序” 的布局开始,到业务逻辑、功能实现,再到真实数据接口、数据交互,课程中会进行多方面能力的训练,如:前后端数据交互逻辑、授权流程、视图交互、组件与 API 的使用技巧、腾讯位置服务等等,本套视频所有核心功能统统囊括,技能提升不留死角 …
  • 学完本套视频过后,可以掌握微信 “小程序” 的基本配置、rpx 适配、模板使用、图标处理、无限列表注意事项,掌握 “小程序” 开发的思考方式、处理及解决业务逻辑能力、前后端数据交互逻辑、授权流程、视图交互、组件与 API 的使用技巧、腾讯位置服务等等,最终能完整独立的开发出一套类似 “大众点评” 的真实 “小程序” 项目出来。
  • 课程介绍:

    很显然,这是一套你们必须了解的微信 “小程序” 实战开发全套视频。在微信 “小程序” 发展如日中天的当下,掌握 “小程序” 开发能力,已是必备技能。本套视频会以 “大众点评” 的业务逻辑为原型,带领大家从 “小程序” 的布局开始,到业务逻辑、功能实现,再到真实数据接口、数据交互,课程中会进行多方面能力的训练,如:前后端数据交互逻辑、授权流程、视图交互、组件与 API 的使用技巧、腾讯位置服务等等,本套课程所有核心功能统统囊括,技能提升不留死角 …

    学习⽬标

    学完本套视频过后,可以掌握微信 “小程序” 的基本配置、rpx 适配、模板使用、图标处理、无限列表注意事项,掌握 “小程序” 开发的思考方式、处理及解决业务逻辑能力、前后端数据交互逻辑、授权流程、视图交互、组件与 API 的使用技巧、腾讯位置服务等等,最终能完整独立的开发出一套类似 “大众点评” 的真实 “小程序” 项目出来。

    适用人群(学前要求):

    • 浮动、定位等布局基础知识点
    • 熟悉小程序基本开发配置
    • 熟悉小程序基本组件使用
    • css3 弹性盒模型
    • css3 怪异盒模型
    • css3 圆角、阴影、线性渐变
    • css3 @font-face 自定义字体
    • 移动端相对单位适配使用
    • 小程序基础
    • ES6
    • Ajax
    - PS:不清楚自己是否具备学前要求?不如测一测吧,扫描二维码做一下学前测试:

    案例截图(布局篇):

    第1集内容讲解:课程介绍 

     1、布局介绍

    布局的前置基础介绍

    2、介绍业务逻辑包含的技能点

    业务逻辑的前置基础介绍

     

    第2集内容讲解:小程序的基本配置

    1、项目介绍

    首页(城市、用户中心)

    店铺分类

    热门列表

    商铺详情

    收藏/收藏列表

    2、新建小程序项目

    AppID

    3、基础配置

    4、rpx 尺寸,根据屏幕大小进行适配

    5、首页布局:标题、位置、个人中心

     

    第3集内容讲解:首页导航布局

    1、首页-全局设置背景色 

    2、导航分类结构

    美食

    KTV

    足疗/按摩

    酒店

    丽人/美发

    3、导航样式设置

    图片

    文字

    背景

    4、商铺列表布局分析

     

    第4集内容讲解:商铺列表的结构

    1、猜你喜欢标题

    2、猜你喜欢 - 商铺列表结构

    图片

    店铺名称

    评分

    价格

    区域/类别

    3、公共样式引入

     

    第5集内容讲解:商铺列表的样式

    1、图片样式

    2、图片边框样式

    3、店铺名称、价格样式

    4、评分样式

    5、区域/类别

    6、新建模板(template)

    7、引入模板(list.wxml)

    8、load-more

     

    第6集内容讲解:商铺列表及fonticon引入

    1、商铺分类详情页布局

    附近

    智能排序

    2、IconFont 阿里巴巴矢量图标代码下载

    3、新建的font.wxss文件,保存矢量图标代码

    4、引入模板(list.wxml)

     

    第7集内容讲解:附近的商家布局完善

    1、导航- 附近布局

    竖线

    下拉菜单

    2、导航- 智能排序

    3、提升导航层级

    4、排序下拉菜单布局

    默认隐藏

     

    第8集内容讲解:商铺详情完善(一)

    1、布局+样式 - 图片、店铺名称、评分、价格、区域/类别

    2、布局+样式 - 口味、环境、服务

    3、布局+样式 - 营业时间、宝宝椅、wifi、景观位

    4、布局+样式 - 向右箭头

     

    第9集内容讲解:商铺详情完善(二)

    1、布局+样式 - 上边框、地址、距离时间、图标

    2、布局+样式 - 收藏店铺按钮

     

    第10集内容讲解:用户中心制作

    1、获取登陆授权按钮

    2、用户中心布局+样式 - 头像、呢称、年龄、城市、下边框

    3、用户中心 - 收藏列表、右箭头小图标

    4、用户授权页面

     

    第11集内容讲解:收藏列表完善

    1、使用首页商铺列表的结构和样式

    2、设置背景

     

    第12集内容讲解:城市列表

    1、新建页面目录(citylist)

    2、城市列表布局结构+样式

    热门城市

    热门城市列表

    城市索引

    城市列表

     

    第13集内容讲解:右侧城市索引列表

    1、热门

    2、字母排列布局

    3、字母列表高度不固定

    4、左右上下居中

    1、display:flex

    2、margin:auto

    案例截图(业务逻辑):


    第14集内容讲解:得到微信 API 的 Promise封装

    1、渲染 猜你喜欢 数据

    2、接口使用说明

    3、获取应用实例:

    商铺列表

    wx.request

    url

    method

    success

    4、微信小程序 API 的 Promise 封装

    把原来基于回调函数的形式改成基于 Promise 来执行回调的形式

    引入封装的文件 apis.js

    api.request

     

    第15集内容讲解:准备请求方法

    1、请求 API 共用

    新建文件req.js,存放频繁使用的请求函数

    引入API

    接口:baseURL

    函数get

    函数post

    2、请求函数方法

    定义函数:getShops

     

    第16集内容讲解:渲染首页商铺

    1、把数据渲染到猜你喜欢列表

    2、数据绑定

    item.title

    item.price

    item.distance

    item.place / item.classify

    3、label字段

    列表渲染

    4、wxs 模块

    5、item.score 评分

    转换数据

     

    第17集内容讲解:下拉刷新

    1、事件 - bindscrolltolower 

    下拉刷新,加载数据

    2、分析请求数据:1页10行,每次刷新,请求10条数据

    请求完成 - 返回数据 - 更新数据

    guessLike\page

    3、实现效果 - 加载更多内容中 

    4、实现效果 - 加载完所有内容后 

    5、onReachBottom 事件

    点击顶部页面可直接上滑顶部

     

    第18集内容讲解:渲染商铺详情

    1、通过商铺ID,请求相应商铺信息

    2、路径

    path:/article/datail

    method:POST

    id:商品 id

    3、请求函数:

    exports.getShopDetail 

    req.getShopDetail 

    4、渲染数据

     

    第19集内容讲解:准备位置服务窗口

    1、分析位置、步行距离、步行时间

    2、接口返回的信息

    经度

    纬度

    3、腾讯位置服务官网-产品-微信小程序SDK

    登陆-控制台-开发者秘钥申请

    4、下载微信小程序 SDK

    5、微信小程序 SDK 实例讲解

     

    第20集内容讲解:使用位置服务接口

    1、接口:reverseGeocoder(options:Object)

    参数:location

    2、使用位置服务接口

    3、举例基于经纬度调用位置api

     

    第21集内容讲解:计算距离与位置授权

    1、计算距离接口:calculateDistance(options:Object)

    2、获取当前位置api,需要用户授权

    起始点经纬度

    终点经纬度

    latitude:经度

    longitude:纬度

    3、举例计算起点-终点的距离

    绑定数据

    catch 报错

     

    第22集内容讲解:处理位置授权失败

    1、取消位置授权

    2、没有被授权,显示授权按钮

    调试基础库 - 设置最新版本

    3、授权按钮 -  打开设置面板,打开授权服务

    4、打开授权服务后,更新授权数据

    5、举例实现用户选择取消授权后,重新打开授权服务并更新数据

     

    第23集内容讲解:收藏前的用户授权

    1、已收藏与未收藏状态切换

    2、添加收藏功能

    path:/fav/addfav

    method:POST

    article_id:商铺 id

    3、用户登录信息缓存

    未登录:授权登录界面

    4、登录

    path:https://wx.miaov.com/login

    method:GET

    header:{ 

    x-wx-Code:

    x-wx-Encrypted-Data:

    x-wx-IV:

    }

     

    第24集内容讲解:收藏前用户登录

    1、登录接口

    2、举例实现自己的接口

    3、登录后,接口返回信息,缓存信息

     

    第25集内容讲解:收藏功能

    1、检测是否收藏

    检测是否收藏

    path:/fav/getfavid

    method:POST

    open_id:用户openid

    article_id:商铺 id

    2、举例实现检测收藏

    3、添加收藏

    使用返回的数据

    code:

    fav_id:

    msg:

    4、取消收藏

    path:/fav/delfav

    method:POST

      open_id:

      article_id:

      fav_id:

     

    第26集内容讲解:渲染分类商铺

    1、商铺分类 id:category_id

    id 40 = 美食

    id 45 = KTV

    id 48 = 足疗按摩

    id 41 = 酒店

    id 49 = 丽人美发

    2、商铺分类列表 - 触底下拉刷新

    isListLoading

    3、商铺分类列表 - 没有更多内容

    isListLoadAll

     

    第27集内容讲解:分类商铺过滤交互

    1、分类商铺过滤

    order:desc(降序)/ asc(升序) 默认desc

    distance:过滤显示多少米范围的商品,如:500

    sort:按照distance:距离/score(评分)排序

    2、实现分类店铺过滤交互

    3、附近和智能下拉列表排序

    点击列表显示/隐藏

    选中高亮

     

    第28集内容讲解:商铺过滤功能实现

    1、根据过滤条件做出相应请求,更新数据

    2、商铺列表根据选项 - 绑定数据

    3、实现商铺列表排序和过滤功能

    4、优化排序和过滤交互效果

     

    第29集内容讲解:个人中心的登录(上)

    1、获取登录授权按钮

    登录状态:显示用户信息和收藏列表

    未登录状态:显授权登录按钮

    2、用户授权状态

    authSetting   

    scope.userInfo:(false 授权失败)/(ture授权成功)/ (“ ”未授权过)

    3、点击授权登录按钮

    显示用户信息

     

    第30集内容讲解:个人中心的登录(下)

    1、个人中心-渲染数据

    2、个人中心-绑定数据

    nickName(呢称)/ gender (性别)city(城市)/ country(国家)

    3、用户中心实现逻辑

    清除缓存

    显示登录授权按钮

    允许授权

    刷新用户中心页面

    显示信息

     

    第31集内容讲解:收藏列表

    1、收藏列表 - 请求数据

    exports.getFav

    2、收藏列表 - 渲染数据

    3、点击取消收藏 - 列表减少

    onShow

     

    第32集内容讲解:渲染城市列表

    1、城市选择列表(citylist)

    数据绑定

    列表渲染

    2、字母选择列表渲染

     

    第33集内容讲解:点按快速选择城市

    1、实现点击字母,快速定位功能

    2、属性配置:

    scroll-y 竖向滑动

    enable-back-to-top开启返回顶部功能

    scroll-into-view=""  快速定位功能

    3、实现点按字母,快速选择城市

    绑定事件:bind:touchstart="onLetterTap"

     

    第34集内容讲解:滑动快速选择城市

    1、绑定事件

    catch:touchmove="onLetterTouchMove"

    2、事件对象参数

    手部点按的位置参数:touches

    clientX

    clientY

    3、不同字母所在高度范围通过

    小程序界面:

    WXML - 节点信息API

    创建查询对象节点:

    wx.createSelectionQuery( )

    SelectionQuery对象方法

    selectall 

    boundingCllientRect

    4、完成快速滑动屏幕选择城市

     

    第35集内容讲解:获取定位城市

    1、进入城市选择页面,提示用户所在城市

    绑定当前所在城市 (locateCity)

    2、获取位置

    方法:getlocation 

    将获取的经纬度转换位置

    address 组成:city 

    3、用户进入城市选择界面

    提示用户位置授权

    未授权:显示授权按钮,打开授权面板

     

    第36集内容讲解:选择城市

    1、记录所选择的地点,根据选择的地点,展示相关数据

    2、绑定事件

    bind:tap="onSelectcity"

    3、选择的城市记录

    curtCity

    4、热门城市列表条件渲染

     

    第37集内容讲解:记录历史城市

    1、历史访问城市(historcity)列表

    条件渲染:wx.if="{{historCity.Lenght}}"

    2、选中城市,记录选中的城市

    缓存历史访问城市

    3、处理历史记录城市重复问题

     

    第38集内容讲解:首页位置记录与回顾

    1、首页显示当前选择的城市名称

    绑定数据:curtcity

    从缓存内提取当前城市

    2、选择城市后,跳转回首页

    3、回顾课程

    准备接口 / 使用接口访问数据

    渲染首页 / 下拉刷新

    渲染详情页

    渲染详情页的数据

    显示地点(使用腾讯位置服务第三方接口)

    步行距离

    收藏功能

    关于登录授权(用户信息授权、位置授权)

    数据交互

    根据分类请求不同的数据

    根据参数渲染数据

    下拉刷新

    过滤/排序

    用户中心

    授权流程

    展示流程

    城市选择

    点击右侧字母快速跳转

    热门城市

    历史访问城市

     

    课程费用:

    活动价:¥248.00¥288.00      VIP价:¥228.00

     

    知识点:

    1. 第一篇:布局实现
    2.     小程序基本配置
    3.         - 项目视图介绍
    4.         - 小程序注册流程
    5.         - 小程序引入本地图片的注意事项
    6.     首页导航布局
    7.         - 利用弹性盒模型 (flex) 进行自适应等分间距布局
    8.     商铺列表结构
    9.         - 上滑加载更多的列表的结构实现
    10.         - 小程序中,公共样式表引入方式 @import
    11.     商铺列表样式
    12.         - 小程序引入本地背景图处理 - dataURL
    13.         - 评分布局实现
    14.         - 小程序模板 使用
    15.     商铺分类
    16.         - 阿里字体图标选择 
    17.         - 小程序引入本地字体资源
    18.         - fontIcon 字体图标使用
    19.         - 商铺分类筛选菜单及排序菜单
    20.     商品详情
    21.     用户中心及登录备用页面
    22.         - 获取用户信息的相关准备
    23.     城市索引列表布局
    24.         - 垂直居中屏幕的索引导航制作
    25.     得到小程序 api 的 promise 封装
    26.     准备请求方法
    27.         - 封装请求函数
    28.     渲染首页商铺
    29.         - 列表渲染
    30.     首页商铺下拉刷新
    31.         - 触底事件
    32.         - 分页加载
    33.         - 计算距离与位置授
    34.     渲染详情
    35.         - 图片路径处理
    36.     准备位置接口
    37.         - 申请腾讯位置服务密钥
    38.         - 准备小程序 js sdk
    39.     使用位置接口
    40.         - 使用位置服务接⼝, 把坐标转换成位置
    41.     计算距离与位置授权
    42.     处理位置授权失败
    43.         - openSetting 出现时机
    44.     收藏前的用户授权
    45.         - 获取用户信息
    46.         - wx.login
    47.     收藏前的用户登录
    48.         - 生命周期的使技巧
    49.     收藏功能
    50.     分类商铺渲染
    51.     分类商品过滤交互
    52.     商铺过滤功能实现
    53.     个人中心的登录(上)
    54.     个人中心的登录(下)
    55.     收藏列表
    56.     渲染城市列表
    57.     点按快速选择城市
    58.         - scroll-view 的使用
    59.     滑动快速选择城市
    60.     WXML节点信息API : wx.createSelectorQuery()
    61.     事件的使用技巧
    62.     获取定位城市
    63.         - 选择城市
    64.     记录历史城市
    65.         - 缓存的使用
    66.     首页位置记录与课程回顾

     

    相关文章:

    >> 微信小程序实战:美团点评核心功能业务逻辑实现

     

     


    课程咨询:

    • 咨询QQ:2852509866 、2852509867 、2852509868
    • 电话:010-57269690

    想要了解妙味课堂最新开课消息吗?长按二维码关注吧!

     

其他人在开团,您可以直接参与

  • mo

    mo

    还差4人成团剩余 35 : 31 : 20 结束
    参团价:¥208.00

课程目录

资料下载

购买课程后,可免费下载课件

讲师信息

妙味讲师

主讲教师:妙味讲师

讲师介绍:全职讲师,

联系我们

点我咨询QQ客服

010-57269690

在线微信客服
客服1
客服在线时间

工作日:9:30~18:00

周六:10:00~17:00

妙味公众号