博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Wepy目录结构
阅读量:6816 次
发布时间:2019-06-26

本文共 2909 字,大约阅读时间需要 9 分钟。

一、WePY项目的目录结构

├── dist                   小程序运行代码目录(该目录由WePY的build指令自动编译生成,请不要直接修改该目录下的文件)├── node_modules           ├── src                    代码编写的目录(该目录为使用WePY后的开发目录)|   ├── components         WePY组件目录(组件不属于完整页面,仅供完整页面或其他组件引用)|   |   ├── com_a.wpy      可复用的WePY组件a|   |   └── com_b.wpy      可复用的WePY组件b|   ├── config             项目配置文件|   |   ├── api.js         后台接口映射表|   |   ├── ip.js          后台请求ip地址|   |   └── config.js      项目参数配置文件(请求方式等)|   ├── assets             放置静态文件(图片、字体包等)|   |   ├── images         静态图片|   |   └── fonts          字体包|   ├── request            |   |   ├── requestMethod  请求方法|   |   └── request.js     使用策略模式分发请求方式|   ├── service            |   |   ├── login.js       登录接口请求函数|   |   └── other.js       其他接口请求函数|   ├── utils                          |   |   ├── error.js       错误code映射表|   |   ├── utils.js       共有函数|   |   └── tokenHandler.js token处理|   ├── zanui              小程序ui框架            |   ├── pages              WePY页面目录(属于完整页面)|   |   ├── index.wpy      index页面(经build后,会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件)|   |   └── other.wpy      other页面(经build后,会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件)|   └── app.wpy            小程序配置项(全局数据、样式、声明钩子等;经build后,会在dist目录下生成app.js、app.json和app.wxss文件)├── wepy.config.js         打包配置文档└── package.json           项目的package配置

二、项目运行流程

此流程为页面加载到请求完成

一、app.wpy

app.wpy为小程序的入口文件,在这个文件中① 配置路由`config.pages`**注意:**在路由中默认加载第一个路由```pages: [  'pages/mine/test', // 开始默认加载这个  'pages/mine/index',  'pages/homepage/index',    'pages/sign/index'],```② 配置整个小程序的样式**注意:**是配置全局的样式,如果页面不单独配置是默认采用这种配置```window: {   backgroundTextStyle: 'light',   navigationBarBackgroundColor: '#fff',   navigationBarTextStyle: 'black'},```    ③ 配置底部tabBar```tabBar: {  list: [{    pagePath: 'pages/mine/test',    iconPath:'assets/images/qw-homepage.png',    selectedIconPath:'assets/images/qw-homepage-select.png',    text: '首页'  }, {    pagePath: 'pages/sign/index',    iconPath:'assets/images/sign.png',    selectedIconPath:'assets/images/sign-select.png',    text: '签到'  }, {    pagePath: 'pages/mine/index',    iconPath:'assets/images/mine.png',    selectedIconPath:'assets/images/mine-select.png',    text: '我的'  }]}```④ 全局公有数据```globalData = {   userInfo: null}```

二、pages/

WePY页面目录(属于完整页面)

三、service/

后台接口服务这个模块对应这后台接口服务。

import request from '../request/request'import Config from '../config/api'import { createTheURL } from '../utils/utils'export async function Login(params) {  return request(createTheURL(Config.API.USER, 'login'), {    method: 'POST',    data: params  })}

注意

1.私有接口必须为全小写

2.通常情况下一个业务对应一个services

四、request/

向后台发送请求

在这个里面一共有4个文件

1.request.js

选择调用的后台请求模式,axios或者fetch,固定参数API.REQUEST_METHOD可以在./../../config/api中进行配置

2.requestMethod/

各种不同的请求方式

我们在处理后台请求时还会需要几个文件:

  1. config/ip.js设置请求的ip地址
  2. utils/utils.js中的createTheURL拼接ip地址与API接口,使其成为一个完整的请求地址
  3. config/api.js写共有的请求方式(REQUEST_METHOD),和API请求接口

转载地址:http://rsdzl.baihongyu.com/

你可能感兴趣的文章
IPython4_Notebook
查看>>
rac问题思考总结
查看>>
Android 自定义View总结
查看>>
.NET平台开源项目速览(5)深入使用与扩展SharpConfig组件
查看>>
u-boot-1.3.4 移植到S3C2440
查看>>
HotSpot运行时概览#2
查看>>
Go结构体标签表达式v1.0发布,参数校验杀手锏
查看>>
对react中setState的总结
查看>>
[回炉计划]-实现一个图片预加载
查看>>
正则表达式
查看>>
360前端星计划学习-html
查看>>
专注dApp高效执行和高并发的下一代公有链
查看>>
ONE-sys 整合前后端脚手架 koa2 + pm2 + vue-cli3.0 + element
查看>>
携带更方便功能全 iPone与Apple Watch球形尿袋
查看>>
行为型模式:策略模式
查看>>
实现批量数据增强 | keras ImageDataGenerator使用
查看>>
太忙女友消息未及时回复,分手吗?python微信自动消息帮你谈恋爱
查看>>
Java 多线程NIO学习
查看>>
命名实体识别
查看>>
动态切换的动态代理
查看>>