Weex 项目总结
在項目中,我覺得暫時有兩個地方需要總結一下,一個是weex內部的數據請求,一個是原生方法得調用。數據請求,在PC端調試的話會有跨域問題,在手機端沒有跨域問題。原生方法需要原生開發者根據?Weex文檔?寫一個module,再暴露出一個方法給前端開發調用。
1、數據請求
數據請求根據文檔引入該模塊
const stream = weex.requireModule('stream');這時你就可以使用stream去發請求了,不過寫法要和官網上一樣才可以,我試的時候是這樣的,如果你有其他的方法,麻煩留個鏈接,讓我也學習一下。官網的上的請求方式,太繁瑣,每次都需要手動引入,寫法不是很靈活,下面有一個我自己整理的
const stream = weex.requireModule('stream'); const modal = weex.requireModule('modal'); const platform = weex.config.env.platform.toLowerCase(); const storage = weex.requireModule('storage'); let apiRoot if (platform === 'web' || platform === 'ios'|| platform === 'android '){apiRoot = window.location.origin } else {if (process.env === 'test') {// 測試環境域名apiRoot = ''} } export default {install (Vue) {function http (OPTIONS = {}) {let DEFAULT_OPTION = {method: 'GET',type: 'text', // json、text、jsonpheaders: {}};let options = Object.assign(DEFAULT_OPTION, OPTIONS);options.url = apiRoot + options.url;if (options.method === 'GET') {if (options.params) {let paramStr = Object.keys(options.params).reduce((acc, key) => `${acc}${key}=${options.params[key]}&`, '?')options.url = options.url.concat(paramStr).slice(0, -1)}} else if (options.method === 'POST') { if (options.body) {options.headers['Content-Type'] = 'application/json';}}else if(options.method === 'DELETE'){if (options.body) {options.body = JSON.stringify(options.body);options.headers['Content-Type'] = 'application/json';}}return new Promise((resolve, reject) => {stream.fetch(options, (response) => {if (response.ok) {if(response.data !==''){try {response.data = JSON.parse(response.data);}catch(err) {response.data = response.data;}}resolve(response.data)} else {reject(response)}})})}Vue.prototype.$http = http} }你可以和在vue項目中一樣的方式去發請求。這里需要注意下自己要定義后端返回的數據類型,根據自己需求自己去改。一些錯誤請求攔截也可以這里進行處理。
2、原生方法的調用
weex.requireModule("event").showParams("hello Weex")weex.requireModule("event").showParams("data",event =>{//對原生方法返回的參數進行處理 })我本機是Windows系統,ios打包我找的原生同事幫的忙
暫時就總結到這里,等這段時間忙完,再回來補充
有不足之處,請多多指教
總結
- 上一篇: CSS 实现图片横向拖动
- 下一篇: 给数组里面的对象添加一个新的数据