结合小程序框架wepy,状态管理库zoro,ui组件库iview,小程序开发解决方案
yarn
yarn dev
你可以通过APP_ENV来配置开发环境链接不同的server服务器
yarn mock
mock环境下server会链接本地启动的mock服务器,也就是APP_ENV将会无效
环境启动后,只需在微信开发者工具中,打开dist目录即可进行实时开发
yarn build
dist目录为最终发布目录
根目录下wepy.config.js文件中
const SERVER = {
dev: '',
prod: '',
}
该项目引入faker做为模拟数据生成器,具体写法参考faker文档,及项目根目录下mock/demo.js
请查看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/的文件
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的对应事件即可