個人weex開發之路

認識比較淺薄，單純從使用方面入手，整理了兩個半小時，有錯誤的地方還請指出。

1. 構建項目

建立一個項目以前，首先須要選取合適的工具，目前使用比較廣的兩個weex腳手架有weexpack和weex-toolkit。

weex-toolkit（建立的weex項目沒有ios和android包）

• weex init weex 建立項目

• 修改weex.html文件，將./node_modules/weex-vue-render/index.js修改成./node_modules/weex-vue-render/dist/index.js

• cnpm install 加載依賴包

• package.json中的scripts配置"app": "npm run build & npm run dev & npm run server"

• npm run app 啓動項目

目錄結構以下圖：

weexpack （建立的weex項目有ios和android包）

• weexpack create weex 建立項目

• weexpack platform add android 添加android

• weexpack platform add ios 添加ios

• weexpack run ios 模擬器運行

目錄結構以下圖：

由於咱們不打包android和ios，只須要將寫好的頁面打包成.weex.js文件供ios和android開發人員調用，因此採用了weex init的構建方式。

2. 工具

Weex Devtools

Weex Devtools是Weex開發調試必備的神器，安裝好後，終端進入到項目目錄，運行weex debug 會自動打開頁面

掃二維碼後

點擊Inspector能夠看頁面信息，咱們打開Debugger，而後掃描打包好的js文件二維碼就能夠開始調試了。

注： 箭頭所指處選debugger，我由於手賤選了個別的，致使好幾天console裏沒有內容提示，還覺得版本問題，後來研究了下，發現這裏選錯了。

3. 遇到的問題

官方demo跑不通

解決：

高一點版本的weex-vue-render裏index.js路徑改變，致使。修改weex.html文件，將./node_modules/weex-vue-render/index.js修改成./node_modules/weex-vue-render/dist/index.js

使用vue-resources獲取接口數據, weex web上好的，可是weex-playground中跑不通，一片空白，錯誤信息：

[undefined:344:31] ReferenceError: Can't find variable: document
addStyle
addStylesToDom
exports

__webpack_require__

__webpack_require__

__webpack_require__

__webpack_require__

anonymous
a@main.js:4:16690
main.js:7:8740

解決：

weex中不支持document和window，換成其它方式。weex不支持vue-resources，改爲weex支持的fetch

<scroll>裏loading一直沒效果

解決：

<scroll>中使用refresh就無法用loading，去掉refresh模塊

webpack報錯，錯誤信息 ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' /Users/xx/xx/code/weex/app.js in /Users/xx/xx/code/weex

解決：

開始一直覺得是webpack入口沒配置對，檢查不少遍，各類測試後，發現這裏真的沒問題

// entry: entries
entry: {
  app: path.resolve('./app.js')
}

後來找到問題出自

resolve: {
  extensions: ['.js', '.vue', '.json']
},

緣由是修改了默認的這個配置後，第一個空項不能省略，應該配置爲

extensions: ['', '.js', '.vue', '.json']
},

錯誤信息 Cannot resolve module 'sass-loader'

解決：

缺乏node-sass 或 sass-loader
npm install node-sass sass-loader --save-dev
把sass-loader安裝成了"scss-loader": "0.0.1",也是服了我本身。

接口地址只能獲取本地數據，配置test環境失敗

解決：

server.js中加一層代理

require('http-proxy-middleware')

// api代理
var proxyTable = config.test.proxyTable
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  server.use(proxyMiddleware(context, options))
})

// proxyTable數據
proxyTable: {
  '/api': {
    // 測試服務器
    target: 'http://ip地址:端口號/xx',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  },
  ...
}

weex接口調用，fetch的headers某些字段始終設置不上

解決：

fetch的headers只能設置下面這些字段
參考： https://developer.mozilla.org...

---

● 人爲設置了對CORS安全的首部字段集合以外的其餘首部字段。該集合爲：

○ Accept
○ Accept-Language
○ Content-Language
○ Content-Type (but note the additional requirements below)
○ DPR
○ Downlink
○ Save-Data
○ Viewport-Width
○ Width

● Content-Type 的值不屬於下列之一:

○ application/x-www-form-urlencoded
○ multipart/form-data
○ text/plain

---

stream的fetch使用get方式請求接口，url都會自動加上&undefined，官網的例子也不例外。本來普通接口多加一個undefined也沒太大影響，可是咱們項目是須要根據url參數計算簽名的，因此一直簽名不經過。

解決：

找到源碼出處

weex-vue-render第2753行對get進行了特別處理，第2764行的url拼接了body和hash，由於body沒有傳值，因此是undefined，註釋掉url+=這行就沒有undefined了，可是修改node_modules中的包內容顯然不是一個合理的解決方案。
因而把get方式傳值改成body傳過來，web端好了，簽名沒有問題，可是真機上仍是報錯，排查後發現問題出在get中使用了body傳值，找到開發文檔，
http://weex.apache.org/cn/ref...

而後我凌亂了，爲何明明不能傳body你的源碼裏又要有那麼一行代碼url += (config.url.indexOf('?') <= -1 ? '?' : '&') + body + hash;。沒辦法，最後使用了一個超級笨的辦法解決了。在簽名計算的時候人爲的給url加上「&undefined",計算好籤名後，web中fetch參數中的url也要加上「&undefined"，可是真機上是不會有&undefined的，因此真機上的url須要去掉undefined，好了問題解決了。

storage中的getItem(key, callback)封裝後，頁面沒拿到數據。

解決：

storage異步形成的，使用promise解決

const p1 = new Promise(function (resolve) {
    storage.getItem(key, event => {
      let ls = event.data || ''
      let d = secret.decrypt(ls) // 對密文字符串進行解密。
      d = typeof d === 'object' ? JSON.parse(d) : d
      resolve(d)
    })
  })
  Promise.all([p1]).then(function (result) {
    callback(result)
  }).catch(function(err){
    console.log('error', err)
  })

頁面跳轉外部非js連接，在網頁上是好的，但真機上一片空白

navigator.push({
  url: 'https://segmentfault.com/write?freshman=1',
  animated: "true"
})

解決：

新建一個vue文件，使用weex的web標籤包一層，而後打包成weex.js格式，普通調用就行了。
<web class="content" :src="url"></web>

跳轉weex.js頁面傳參

解決：

直接在url後面拼接參數，新頁面使用this.$getConfig().bundleUrl獲取url解析一下就行了。

post提交數據的是後報錯415

解決：

頭部信息必定要和後端協議好，不容許不一致。