电商微信小程序纯干货 第1篇
微信小程序要先在管理后台配置服务器域名，才能给该域名服务器发送请求
1.首先登录微信小程序管理后台，在开发处找到开发管理
2.在开发设置中向下拉
4.将域名输入到 request 合法域名即可
wxml
将类型 GET 改成 POST 即可发送 POST 请求
关于 GET 和 POST 类型的区别推荐看认识HTTP请求
有很多情况下，我们需要在页面刚加载时，自动请求一些初始化的数据。此时需要在页面的 ,.js 文件的 onLoad 事件中调用获取数据的函数
wxml
电商微信小程序纯干货 第2篇
跳转到 ”我的“ 页面
wxml
跳转到 ”练习“ 页面
wxml
返回到首页
wxml
电商微信小程序纯干货 第3篇
在开发小程序时由一个主包+多个分包组成
在小程序启动时会下载主包中的内容并启动主包内页面，而分包中的内容和页面在访问时才会下载，进行分包以后减少了主包中的数据内容可以优化小程序首次启动的下载时间
文件
“pages” 数组中放置的是主包中的页面，_subPackages_ 数组中放置的是分包的页面
_subPackages_ 数组对象的属性：
root：表示分包的根目录
name：表示分包的别名
pages：表示分包页面的路径
创建出的分包目录
电商微信小程序纯干货 第4篇
以下配置项在每个页面单独的 .json 配置文件中都可使用，为页面进行特殊配置
在全局配置文件 中找到 window - navigationBarBackgroundColor ，进行修改
在全局配置文件 中找到 window - navigationBarTitleText，进行修改
在全局配置文件 中找到 window - navigationBarTextStyle，进行修改，注意目前只支持黑色 black 和白色 white
开启该功能我们可以通过下拉页面的方式，刷新（重新获取）小程序中的内容。通过在全局配置文件 的 window 部分添加 _enablePullDownRefresh_ 属性开启
通过在全局配置文件 的 window 部分添加 _backgroundColor_ 属性开启
通过在全局配置文件 的 window 部分添加 _backgroundTextStyle_ 属性开启，注意目前仅支持 dark 和 light
设置当用户在进行上拉操作获取数据时，在拉取多少距离后开始自动加载后面的数据，默认是 50 px ，一般没有特殊要求不建议修改，在全局配置文件 的 window 部分添加 _onReachBottomDistance_ 属性开启
电商微信小程序纯干货 第5篇
让基于回调函数的 api 进行 promise 化可以使代码可读性增强，避免回调地狱，代码复用性提高等好处，Promise 和 async/await 已经成为现代 JavaScript 开发中的标准做法
首先安装 miniprogram-api-promise 第三方 npm 包，实现 API Promise 化主要依赖于这个包
在 miniprogram_npm 文件下我们可以看到，这个包已经安装好了
Promise 化
在 文件中，与 App() 选项同级的位置输入如下代码
将发起网络请求获取数据的方法进行 Promise 化
.js 文件
通过回调函数的方法发生网络请求使用 () 方法，Promise 化后通过 发送网络请求，并且在方法前和发起请求前用 async 和 await 修饰
电商微信小程序纯干货 第6篇
如果在进入某个页面后，有很大的概率需要加载某些分包，我们可以配置这些分包预下载。
预下载分包的行为，会在进入指定的页面时触发。在 中，使用 preloadRule 节点定义分包的预下载规则：
如下代码定义了在进入 contact 页面时自动下载分包 pkgA
根据日志可以看出在进入 contact 页面时成功预下载分包 pkgA
在 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。比如 list 数组以及其中的配置都不能省略，因为如果用户版本较低无法显示自定义的 tabBar 就会用 list 数组中的设置进行显示。而且要通过 list 数组中的设置来知道哪些是 tabBar 页面
在代码根目录下添加文件夹 custom-tab-bar ，在该文件夹下创建 index 组件，注意名称必须正确
在 或 中引入组件
在 index 组件的 .wxml 中使用
由于需要 active 变量，和 onChange() 方法，需要在 index 组件的 .js 文件中定义
可以看到页面上已经出现了 tabBar 效果
在 index 组件的 .js 文件中的 data 节点下创建一个 list 数组，包含 tabBar 的相关属性设置
在组件的 .wxml 文件中通过 van-tabbar-item 组件循环设置 tabBar 效果
要在组件的 .js 文件中的 options 节点下设置 styleIsolation 属性，这样才能覆盖 Vant 组件原来的样式
核心： tabBar 部分绑定了一个事件处理函数 onChange()，当我们选择 tabBar 标签后通过 可以获取该标签的下标，根据该标签的下标可以在 list 数组中得到对应页面的路径，通过 （）方法进行页面跳转， active 属性表示该标签的下标，要对 active 属性进行设置
要注意 active 属性不能定义在 index 组件的 .js 文件中，会有 bug，要将其定义在 store 中，再将定义在 store 中的属性 active 和 改变 active 的方法 updateActive 绑定到组件中
文件
组件的 .wxml 文件
组件的 .js 文件
电商微信小程序纯干货 第7篇
跳转到练习页面后在左下角的位置能够查看传递的页面参数
wxml
跳转到练习页面后在左下角的位置能够查看传递的页面参数
wxml
电商微信小程序纯干货 第8篇
js 文件中的函数不能在 wxml 文件中使用，我们通过在 wxml 中内嵌 wxs 脚本，可以在 wxml 中使用 wxs 脚本定义的函数（方法），帮助渲染 UI 结构
定义一个 wxs 脚本，将小写数据全变为大写再进行渲染
wxml
定义一个 .wxs 文件，在该文件中定义和共享 toLower 函数，将大写数据全变为小写再进行渲染
wxml
wxs
没有使用 wxs 脚本的格式
使用了 wxs 脚本的格式
电商微信小程序纯干货 第9篇
上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为
上拉触底-刷新数据效果
案例步骤：
1.定义获取随机颜色的方法（主要知识：发送网络请求，接收和利用响应数据）
2.在页面加载时获取初始数据
3.渲染 UI 结构并美化页面效果
4.在上拉触底时调用获取随机颜色的方法、
5.添加 loading 提示效果（在获取数据时提示用户等待）
6.对上拉触底进行节流处理（用户可能频繁上下滑动，多次经过上拉触底的临界点，频繁发送请求，对于这个情况要加以限制）
wxml
wxss