/iwepy

一套基于wepy, iview-weapp, zoro的完整的小程序开发解决方案

Primary LanguageJavaScript

iwepy

结合小程序框架wepy,状态管理库zoro,ui组件库iview,小程序开发解决方案

启动开发环境

安装依赖

yarn

启动dev环境

yarn dev

你可以通过APP_ENV来配置开发环境链接不同的server服务器

启动mock环境

yarn mock

mock环境下server会链接本地启动的mock服务器,也就是APP_ENV将会无效

环境启动后,只需在微信开发者工具中,打开dist目录即可进行实时开发

打包生产环境代码

yarn build

dist目录为最终发布目录

如何配置不同环境下的server地址

根目录下wepy.config.js文件中

const SERVER = {
  dev: '',
  prod: '',
}

如何编写mock

该项目引入faker做为模拟数据生成器,具体写法参考faker文档,及项目根目录下mock/demo.js

如何编写model

请查看src/models/下的使用演示,更多信息查看zoro文档

如何发起请求

iwepy因为对wepy框架的request进行了一次封装,放于src/utils/request.js中,需要请求时请引入此工具代替

提供了的api有:

  • request() 参数同wepy.request
  • get(url, params, options)
  • post(url, params, options)
  • delete(url, params, options)

以上接口均支持冒号参数

使用方法

import request from '@/utils/request'

request.get('/api/product/:id', { id: 1 }).then(...)

model中使用请参考src/models/的文件

如何使用iview库

export default class Index extends wepy.page {
  config = {
    navigationBarTitleText: 'wepy小程序演示',
    usingComponents: {
      // 这里需要填写相对路径,不可以使用别名
      'i-panel': '../iview/panel/index',
      'i-button': '../iview/button/index',
      'i-spin': '../iview/spin/index',
      'i-alert': '../iview/alert/index',
    },
  }
<template>
<i-panel i-class="index-panel" title="演示全局HTTP错误捕获">
  <i-button @click="handleQueryHttpError" type="primary">点击演示http错误</i-button>
  <i-spin fix wx:if="{{ loading.queryHttpError }}" />
</i-panel>
</template>

相关组件参考iview文档,需要注意的是,替换iview中的事件为wepy的对应事件即可