wepy公共样式_wepy-shop-22

wepy 项目开发说明

功能列表

1 配置 window(外观)和 tabBar(底部 tab 栏)

2 首页页面结构和样式

3 首页获取接口数据渲染页面

发起请求：wepy.request({})

开启：不校验合法域名

4 开启 Promise/async 支持 和 封装 fetch

5 返回顶部

5.1 页面滚动到一定距离后才展示返回顶部按钮

5.2 点击返回顶部，实现页面回到顶部( wx.pageScrollTo(OBJECT) )

如何开始一个新功能

1 在 app.wpy 的 pages 中配置新页面路径

2 在 pages 目录中新建页面文件(文件名.wpy)

3 在 页面 中添加 template/style/script 三项内容

创建 wepy 文件报错说明

如果新建页面后小程序中报错，按以下方式处理：

1 终止 wepy build --watch 终端命令

2 关闭 微信开发者工具

3 删除 dist 文件夹

4 重新运行 wepy build --watch 命令

5 重新打开 微信开发者工具

说明：wepy 命令行工具自身的问题，会导致这个错误

小程序合法域名的说明

为了安全性的考虑，小程序中能够访问的接口域名需要在小程序管理后台配置后，才能正常访问

可以在 微信公众平台|小程序 中的 设置 -> 开发设置 -> 服务器域名 添加合法域名

在开发期间，可以绕过这个配置项，只需要在 微信开发者工具 中勾选 不校验合法域名，那么，小程序就可以请求任何域名的接口数据了

等到小程序真正上线的时候，就必须配置合法域名，否则，小程序无法正常获取数据以及上线

wepy 中数据操作的说明

读取数据

直接使用 this.swiperList 就可以访问了

设置数据

同步：this.swiperList = []

异步：

1 this.swiperList = []

2 this.$apply()

开启 Promise 和 async

注意：开启 Promise 支持后，原来 回调函数 的方式就不再支持了！

开启步骤如下：

1 安装：npm i -S wepy-async-function

2 修改 app.wpy，如下：

// 2.1 导入async包

import 'wepy-async-function'

export default class extends wepy.app {

constructor() {

super()

// 2.2 让wepy中的API变为Promise的使用方式

this.use('promisify')

}

}

3 重启编译：wepy build --no-cache

封装 fetch 的说明

为什么要封装 fetch？

1 因为 wepy 提供的 request 使用繁琐

如何封装？

1 先开启 wepy 的 Promise/async 支持

2 封装 fetch，代替 wepy.request

封装的具体操作：

1 处理 公共路径，以后每次请求的时候，只需要提供当前接口地址即可(BASEURL)

2 封装获取 data。封装前需要 res.data.data 才能获取到，封装后，只需要 res.data 就可以了

字体图标库

使用步骤：

1 下载字体图标样式文件

2 将其拷贝到项目的 assets 目录中，并且修改文件后缀名为：.wxss

3 修改 样式文件 中的 px 为 rpx

4 在 app.wpy 中通过 @impot '路径'; 来导入字体图标文件

5 在需要使用字体图标的位置，添加类名：class="iconfont icon-xiao"

小程序中的页面跳转

1 通过组件 navigator 来实现小程序中页面的跳转

2 要跳转到的页面一定要有，否则，就会报错：页面找不到

3 如果要跳转的页面是 tabBar 中的页面，需要设置 open-type="switchTab"

默认 open-type 为：navigate

两种 open-type

1 open-type="navigate"

1.1 默认值

1.2 用于普通页面跳转

1.3 跳转后，可以返回上一个页面

2 open-type="switchTab"

2.1 用于跳转到 tabBar 页面

2.2 跳转后，不能返回上一个页面

默认跳转

跳转到tabBar页面

导航传递参数

导航的时候，可以直接在 url 后面指定参数：

跳转并传递参数

在页面中，通过 onLoad 这个声明周期函数的参数 query 可以获取到传递的参数

// goods_detail.wepy 页面：

// 获取传递给该页面的参数

onLoad(query) {

<