小程序使用wepy框架搭建项目

初始化项目

运行 wepy init standard heima_ugo 命令，初始化小程序项目
运行 cd heima_ugo 进入项目根目录
运行 npm install 安装所有依赖项
运行 wepy build --watch 命令，开启 wepy 项目的实时编译功能
打开微信开发者工具，加载 wepy 项目并查看效果
解决 ESLint 语法报错问题

梳理项目结构

清理并重置 src -> pages -> index.wpy 首页
在根目录的 .prettierrc 配置文件内，新增 “semi”: false 配置，防止每次格式化代码，添加分号的问题
清理并重置 src -> app.wpy 中的代码，将 style 和 script 标签中，不必要的代码删除掉
清空 src -> components 和 src -> mixins 目录
将梳理完毕后的项目，上传至码云

绘制 tabBar

新建 src -> pages -> tabs 文件夹，用来存放所有 tabBar 相关的页面
删除 src -> pages -> index.wpy 页面，并在 tabs 目录中，新建 home.wpy，cates.wpy，search.wpy，cart.wpy，me.wpy 五个 tabBar 相关的页面
将页面路径，记录到 src -> app.wpy 文件的 config -> pages 节点中，示例代码如下：

pages: [
  'pages/tabs/home',
  'pages/tabs/cates',
  'pages/tabs/search',
  'pages/tabs/cart',
  'pages/tabs/me'
]

为异步 API 启用 Promise 功能

打开 src -> app.wpy 文件
找到 constructor() 构造函数
在构造函数的最后，新增如下代码：

constructor() {
    super()
    this.use('requestfix')
    // 通过下面这一行代码，可以为异步的API，
    // 开启Promise功能，这样，异步API调用的结果，返回值是Promise对象
    this.use('promisify')
}

import wepy from 'wepy'

const baseURL = 'https://www.zhengzhicheng.cn/api/public/v1'

/**
 * 弹框提示一个无图标的 Toast 消息
 * @str 要提示的消息内容
 */
wepy.baseToast = function(str = '获取数据失败！') {
  wepy.showToast({
    title: str,
    // 弹框期间不会携带任何图标
    icon: 'none',
    duration: 1500
  })
}

/**
 * 发起 get 请求的 API
 * @url 请求的地址，为相对路径，必须以 / 开头
 * @data 请求的参数对象
 */
wepy.get = function(url, data = {}) {
  return wepy.request({
    url: baseURL + url,
    method: 'GET',
    data
  })
}

/**
 * 发起 post 请求的 API
 * @url 请求的地址，为相对路径，必须以 / 开头
 * @data 请求的参数对象
 */
wepy.post = function (url, data = {}) {  
  return wepy.request({
    url: baseURL + url,
    method: 'POST',
    data
  })
}

来源：CSDN

作者：dreamimport

链接：https://blog.csdn.net/dreamimport/article/details/104499289

标签

wepy

url

api