私のweex開発の道

認識が浅薄で、単純に使用面から着手し、2時間半整理しましたが、間違いがあったら指摘してください.
1.構築プロジェクト
プロジェクトを作成する前に、まず適切なツールを選択する必要があります.現在、広く使用されている2つの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を実行すると自動的にページが開きます
QRコードをスキャンした後
Inspectorをクリックするとページ情報が表示され、Debuggerを開き、パッケージされたjsファイルのQRコードをスキャンしてデバッグを開始できます.
注意:矢印の指すところでdebuggerを選んで、私は手が安いので個別を選んで、何日もconsoleの中で内容のヒントがなくて、バージョンの問題だと思って、後で研究して、ここが間違っていることを発見しました.
3.問題
公式demoは通じない
解決:
少し高いバージョンのweex-vue-renderの中でindex.jsパスが変更され、結果として.変更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
[email protected]:4:16690
main.js:7:8740

解決:
Weexではdocumentやwindowはサポートされていませんが、他の方法に変更します.Weexはvue-resourcesをサポートせず、weexがサポートするfetchに変更
リロードはずっと効果がありません
解決:
の中で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を1つ追加してもあまり影響はありませんが、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を伝えることができないのにあなたのソースコードの中にまたそんなに1行のコード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形式にパッケージ化し、通常呼び出しすればいいです.weex.jsページをジャンプして参照
解決:
直接urlの後ろにパラメータをつなぎ、新しいページはthis.$getConfig().bundleUrlを使ってurl解析を取得すればいいです.
postがデータを提出したのは後報エラー415です
解決:
ヘッダ情報は必ずバックエンドと協議し、不一致を許さない.