demo代码已经上传到csdn的资源库了，这里是下载链接：下载demo；
看到最终效果后，简单分析了一下页面以及可能涉及到的功能点，页面大致有这么几个
首页
首页涉及的功能大致有：
-
组件：轮播图组件，滚动视图组件；
-
布局：flex布局；
-
功能：wx.loading（请求时的加载动画），wx.request(wx的数据请求)；
分类
分类涉及的功能大致有：
-
组件：滚动视图组件；
-
布局：flex布局，wx:for循环，tap点击事件；
-
功能：wx.loading（请求时的加载动画），wx.request（微信中的数据请求方法），wx.navigateTo（页面跳转）；
商品列表
商品列表涉及的功能大致有：
-
组件：滚动视图组件；
-
布局：flex布局，wx:for循环，tap点击事件；
-
功能：wx.loading（请求时的加载动画），wx.request（微信中的数据请求方法），wx.navigateTo（页面跳转）,onPullDownRefresh（下拉刷新），onReachBottom（触底上拉加载）；
商品详情
商品详情涉及的功能大致有：
-
组件：滚动视图组件；
-
布局：flex布局，wx:for循环，tap点击事件，wx:if渲染；
-
功能：wx.loading（请求时的加载动画），wx.request（微信中的数据请求方法），wx.navigateTo（页面跳转）storage本地存储，wx.switchTab（tab页面跳转）
-
自定义组件：支付方式的弹窗组件，数量的弹窗组件，数量加减的按钮组件；
购物车
购物车涉及的功能大致有：
-
组件：滚动视图组件；
-
布局：flex布局，wx:for循环，tap点击事件，wx:if渲染；
-
功能：wx.navigateTo（页面跳转）storage本地存储，wx.setTabBarBadge（tab右上角红色标记设置）
-
自定义组件：数量加减的按钮组件；
我的
我的涉及的功能大致有：
-
组件：视图组件；
-
布局：flex布局，tap点击事件，wx:if渲染；
-
功能：userInfoReadyCallback（获取用户信息）；
============================================================
小程序的项目和普通的web项目不大一样，微信官方为了数据的按钮，向服务器请求的地址，必须进行登记，如果向没有登记的服务器地址发送请求，那么是会报错的；
登记服务器地址需要登录微信公众平台，打开“开发”->“开发设置”->“服务器域名”，输入并保存服务器地址；保存之后在开发工具的“详情”->“项目配置”->“域名信息”可以查看到配置的域名，如图所示
=============================================================
感觉没有必要将每一行代码都放在博客里，那样的话感觉整篇博客都是长篇代码而且效果也不好，不能调试，要看整体代码直接下载项目就是了，还能一边看一边调试，本文主要记录一下涉及到的功能点的代码，方便理解小程序；
页面主要是通过flex进行布局，关于flex布局其实还是有一点点复杂的，这边就不多介绍了，百度Flex布局一堆指南；
指令需要使用到了wx:for（列表渲染），wx:if（条件渲染）该两个指令主要用于到数据请求到之后需要将请求到的数据进行渲染，比如数组，那么就需要通过wx:for渲染，如果是根据不同结果决定是不是要显示在页面上那么就需要通过wx:if进行判断；
组件主要涉及到了滚动视图组件和轮播图组件，至于最常规的view，button这些就不多说了，因为每个页面几乎都有用到
<swiper
//是否显示轮播上的点
indicator-dots=“{{indicatorDots}}”
//滑动方向是否为纵向
vertical=“{{vertical}}”
//是否自动切换图片
autoplay=“{{autoplay}}”
//自动切换时间间隔
interval=“{{interval}}”
//滑动动画时常
duration=“{{duration}}”
//是否采用衔接滑动
circular=“{{circular}}”
//轮播图上原点的颜色
indicator-color=“rgba(255, 255, 255, .3)”
//当前被选中的轮播图的小圆点颜色
indicator-active-color=“#ffffff”
class=“swiper”
//wx:for指令循环遍历数组
scroll-view，官方提供的滚动视图组件，它将内容包裹起来之后，当内容超出高度或宽度，那么可纵向或横向滚动视图区域，具体请看：scroll-view滚动视图，在这里主要使用到了其一个纵向属性scroll-y，默认是false，也就是不允许滚动，因此需要设置成true；
swiper，轮播图组件，网页上常见的功能组件，微信官方命名为滑块视图容器，该容器中只可放置swiper-item组件，其内是具体内容，关于使用到的属性已注释在组件上了，更多具体请看：swiper轮播图组件；
微信官方提供了请求数据的方法，并不需要自己引入axios或者ajax等工具，在微信中请求的方法叫做wx.request()方法，具体请看微信数据请求request，当然请求的接口地址的域名必须是在该小程序的后台登记过的，没有登记过是会报错的，即使接口正确；
当页面进行加载（也就是生命周期处于onload）的时候，向服务器请求数据，同时显示加载中的提示loading提示框，等到请求成功，返回了数据，那么就将加载中的提示关闭掉；
当请求成功之后，将请求到的数据存储到本地的data中，存储变量的方式和react类似，是通过setData()的方式存储的；
//引入接口地址，接口地址是统一写在一个文件中的，通过require引入
const interfaces = require(“…/…/utils/urlconfig.js”);
/**
- 生命周期函数–监听页面加载
*/
onLoad: function (options) {
const _this = this;
//显示加载中的提示框，文字为：加载中
wx.showLoading({
title: ‘加载中’,
})
//发起一个请求
wx.request({
//请求的服务器地址，例子的地址是统一写的，因此这里只是引入urlconfig.js中写好的地址
url:interfaces.homepage,
header:{
// 返回的数据类型为json格式，当然默认是application/json格式
“content-type”:“application/json”
},
//请求成功后的回调函数
success(res){
// 请求成功代表有返回数据，那么通过setData保存数据，保存的数据会实时更新
_this.setData({
swipers:res.data.swipers,
logos:res.data.logos,
quicks:res.data.quicks,
pageRow:res.data.pageRow
})
//隐藏加载中的提示框
wx.hideLoading();
}
})
}
这里通过setData设置数据，刚开始有疑问，为什么要通过setData设置，直接通过类似下例的方法不可以吗？
this.data.swipers = res.data.swipers;
这种方式设置数据难道不行吗，这种设置当然是可以的，但是这种设置有一个致命缺陷，就是设置后的数据不会实时的响应式的渲染到页面上，比如；swipers初始时是一个空数组，页面上通过wx:for循环也没有结果，当使用setData()的方式设置值后，那么页面会实时的渲染新结果，如果是通过直接赋值的方式保存结果，那么此时页面是不会对其作出响应的，仍然是渲染的空数组；
在小程序中，页面A跳转到页面B，是通过官方提供的跳转方法：wx.navigateTo()，这个方法通常和事件绑定在一起（当然这个不是绝对的，比如需要根据用户是否登录过作为跳转依据，跳转到不同的页面），具体看示例
页面A，对view绑定了一个点击事件，事件类型是bindtap（点击事件），函数是showShopDetail，代表的是当点击这个view之后触发了showShopDetail这个函数
<view
wx:for=“{{item.desc}}”
class=“right-shop”
wx:key=“index”
data-txt=“{{shop.text}}”
wx:for-item=“shop”
bindtap=“showShopDetail”>
这个函数调用了wx.navigateTo进行页面跳转，跳转的同时携带了一个参数title，值是绑定在view上的自定义属性txt的值
showShopDetail(e){
wx.navigateTo({
//url是需要进行跳转的地址
//例子中是跳转到pages目录下shopList目录下的index页面，并携带了一个参数title
url: ‘/pages/shopList/index?title=’+e.currentTarget.dataset.txt,
})
}
新跳转的页面，比如这里是跳转到shopList这个页面，在shoplist这个页面中的onLoad生命周期内可以接收到传递过来的参数，
/**
- 生命周期函数–监听页面加载
*/
onLoad: function (options) {
//options中会携带传递过来的参数title
this.setData({
title:options.title
})
//设置页面标题
wx.setNavigationBarTitle({
title: options.title,
})
}
概述
小程序同样也支持将功能模块抽象成自定义组件，具体查看自定义组件，类似于页面，自定义组件类似于页面，由 json、wxml、wxss、js 4个文件组成，其中必须要在json文件中声明这是一个自定义组件
{
“component”: true
}
之后，在wxml中编写模版，wxss中编写样式，如果有事件需要传递，那么可以通过triggerEvent()方法进行传递
this.triggerEvent(“事件名”,obj)
如果是接收父组件的属性，那么需要在子组件的js文件中定义名字
Component({
/**
- 组件的属性列表
*/
properties: {
//定义了一个count属性，值的类型是Number类型，这个值是父组件上传递过来的
count:Number
},
/**
- 组件的初始数据
*/
data: {},
/**
- 组件的方法列表
*/
methods: {}
})
接着，在需要调用组件的json文件中新定义一个字段usingComponents，key是调用组件时的标签名，值是对应的组件地址
{
“usingComponents”: {
“number”:“/components/number/index”
}
}
案例
自定义组件创建
新建一个组件，在根目录下新建了一个componnents文件夹，之后新建了一个number文件夹，右击number文件夹，选择新建Component，输入名字后会字段生成4个标准文件
在index.wxml中输入结构，同时通过catch绑定两个点击事件
-
{{count}}
+
当然，json文件中必须先声明这是一个组件
{
“component”: true,
“usingComponents”: {}
}
之后就是事件传递了，当点击绑定的两个事件时，将事件往父组件传递
Component({
/**
- 组件的属性列表
*/
properties: {
//定义了一个count属性，值的类型是Number类型
count:Number
},
/**
- 组件的初始数据
*/
data: {},
/**
- 组件的方法列表
*/
methods: {
addCount(){
this.triggerEvent(“addCount”)
},
subtractCount(){
this.triggerEvent(“subtractCount”)
}
}
})
父组件调用
首先是在需要调用number组件的页面，进行组件的注册，组件的注册简单的说就是在调用的页面的json文件中的usingComponents字段中添加组件
{
“usingComponents”: {
//"/components/number/index"是组件所在的路径
“number”:“/components/number/index”
}
}
这样就算是注册了，之后就可以直接在wxml中调用了
数量:
//调用组件
<number
//这个值就是会传递到子组件中
count=“{{partData.count}}”
//绑定了一个事件，事件名就是子组件传递过来的addCount，触发后执行js文件中的addCount函数
catchaddCount=“addCount”
//绑定了一个事件，事件名就是子组件传递过来的subtractCount，触发后执行js文件中的subtractCount函数
catchsubtractCount=“subtractCount”>
这样基本就是一套完整的流程，和vue不同的是，vue是不允许直接修改父组件传递过来的属性的，小程序不同，当子组件接收到父组件传递过来的属性，如果对其做修改，修改的是在data中的副本，换句话说，当子组件接收到父组件的属性后，会在data中创建一个副本，如果对属性修改，那么修改的是副本并不是传递过来的属性；
这个场景是这样的，当把产品加入购物车后，关闭小程序，此时如果再打开，显然加入过购物车的商品必须是依旧存在的，那么为了获取之前加入到购物车的商品，就需要商品加入购物车的同时，将商品列表加入本地缓存中；
小程序的缓存是storage，类似web中的localStorage，具体可以查看官方文档数据缓存；
概述
查看缓存
设置缓存
通过wx.setStorage()设置缓存内容，比如
wx.setStorage({
//key就是属性名
key:“key”,
//data就是对应的属性值
data:“value”
})
读取缓存
通过wx.getStorage()读取缓存内容，比如
wx.getStorage({
//key就是需要读取的缓存的属性名
key: ‘key’,
//当读取成功之后，会执行success回调函数
success (res) {
console.log(res.data)
}
})
删除缓存
通过wx.removeStorage()读取缓存内容，比如
wx.removeStorage({
//需要删除的属性名
key: ‘key’,
//删除成功之后的回调函数
success (res) {
console.log(res)
}
})
案例
当打开购物车页面时，在onShow生命周期阶段，读取缓存中的商品列表，并且假如有商品列表，那么在tab的右上角显示商品数量
效果
代码
总结
- 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）
-
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
-
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～
祝大家都有美好的未来，拿下满意的 offer。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
