PS:最近公司在寫ios app,使用了這個框架搭建,好多好多的坑的說,弄得身心疲憊,到處找資源,找度娘,真的挺心累的,因為公司項目是個測試項目。有頁面編寫和數據加載這方面的內容,就我現在的了解程度,來做個簡單的總結,方便自己以後查閱。
數據加載其實不難,但是,第一次用這個框架寫,還是很多不同,找了很久的資源,終於解決了這個數據加載的問題。
其實官網上面有數據加載的教程,後面就按著官網數據加載結果成功了:
- 在外網架一個api的接口
- 必須在同一個網絡(手機和pc段在同一個網段)
- 數據必須是json格式
按著官網上面走:
$axios(请求):
注意:App中后端返回的数据格式通常为json
,所以请确保你们后端 response header 中content-type:值为 application/json,不然可能无法正常解析数据
配置请求参数编辑 config/index.js
ajax: {
baseUrl: 'http://app.weex-eros.com:52077',
/**
* 接口别名
*/
apis,
// 接口超时时间
timeout: 30000,
/**
* 请求发送统一拦截器 (可选)
* options 你请求传入的所有参数和配置
* next
*/
requestHandler (options, next) {
console.log('request-opts', options)
next()
},
/**
* 请求返回统一拦截器 (可选)
* options 你请求传入的所有参数和配置
* resData 服务器端返回的所有数据
* resolve 请求成功请resolve你得结果,这样请求的.then中的成功回调就能拿到你resolve的数据
* reject 请求成功请resolve你得结果,这样请求的.then中的失败回调就能拿到你reject的数据
*/
responseHandler (options, resData, resolve, reject) {
const { status, errorMsg, data } = resData
if (status !== 200) {
console.log(`invoke error status: ${status}`)
console.log(`invoke error message: ${errorMsg}`)
reject(resData)
} else {
// 自定义请求逻辑
resolve(data)
}
}
}
...
发送请求$fetch(info)
// 示例
this.$fetch({
method: 'GET', // 大写
name: 'common.getInfo', //当前是在apis中配置的别名,你也可以直接绝对路径请求 如:url:http://xx.xx.com/xxx/xxx
data: {
count: 1
}
}).then(resData => {
// 成功回调
console.log(resData)
}, error => {
// 错误回调
console.log(error)
})
Api:
- method(String):请求方式,分为
GET、POST、HEAD、PUT、DELETE、PATCH
。(必须大写)
- name(String):请求地址,如果已经在config/apis.js下配置了接口的请求别名,则可以直接调用别名。
- url(String): 如果你不想配置别名,可以直接输入相对路径或者绝对路径来请求。
- data(Object):请求携带的参数。
- *params(Object) *: 请求路径的动态参数,如url:api/product/{productId},则params:{productId:...}。
- header(Object):当前请求的请求头设置。
- then(Promise):
Promise
接口返回时候会触发。
hello頁面:
<template>
<div style="margin-top: 50px;">
<text class="title">Hello,123</text>
<text class="title">developer</text>
<wxc-button class="btn-250" text="show eros" @wxcButtonClicked="showEros"></wxc-button>
</div>
</template>
<script>
import { WxcButton } from 'weex-ui';
export default {
components: { WxcButton },
methods: {
// 这里给按钮添加 showEros 事件来跳转
showEros() {
this.$router.open({
name: 'Eros'
})
}
}
}
</script>
<style>
.title{
font-size: 60;
}
.btn-250{
width: 250;
}
</style>
eros頁面:
<template>
<div style="margin-top: 50px;">
<text class="title">Hi!,{{reData}}</text>
<text class="title">Enjoy it!</text>
</div>
</template>
<script>
export default {
data () {
return {
reData:'dddw'
}
},
created() {
this.reData="DD",
this.$fetch({
method: "GET",
url: "http://eflow.gis-touch.com:8888/api/kpi/index",
data: {}
})
// .then(res=>res.json())
.then(res=>{
this.reData=res;
// console.log("")
}
,error=>{
this.reData=error
})
}
created(){
this.reData = 'Hello',
this.$fetch(
{
url:"http://eflow.gis-touch.com:8888/api/kpi/test",
method:'GET',
}
)
.then(data=>{this.reData=data.Msg})
.catch(err=>this.reData = err)
}
};
</script>
<style>
.title {
font-size: 60;
}
</style>
結果為:
Hi 小红帽,你已經成功獲取了我的API接口!