銀聯商務開放平臺小程序嘗試（weex）2

　　好幾天沒有繼續學習，日漸荒蕪，而終期日近，深入反省。。

　　此次終於開始正式上手weex開發。看了幾期技術胖的視頻，確實略顯古舊，與當前的版本差別較大，基本屬於本身矯正的狀態。

　　說到底，weex的開發目前仍然是基於vue的（weel-cli生成的就是vue文件爲核心的工程，不過當前版本只支持create建立，已經取消了init命令）

　　本人在Android Studio建立AVD虛擬機的過程當中遇坑無數（Ubuntu18.04環境），相關細節不展開講了，最終採用本身的手機（華爲榮耀9，Android9.0系統）做爲app測試方案。

　　按照技術胖的思路，採用weex platform add android命令生成Android工程，而後用Android Studio打開並下載，獲得的結果就是這個樣子（

 

 出現了與技術胖同樣的問題，按照他的說法是尚未渲染出來，可是我等呀等呀，這個頁面就是不變。。

　　後來直接採用weex run android命令，能夠直接鏈接本身的手機進行安裝，此時即可以加載出來完整頁面了，並且。。

 

 

 還有熱加載功能，這可太舒服了呀（不過要手機上先打開開發者模式，而後選擇待調試應用爲WEEX APP）

　　接下來開始正式的功能開發學習。。。

　　首先是自定義組件。這個徹底是Vue的路子，技術胖視頻中講的很是清楚，此處給出一份本人的示例代碼：

mytest.vue (位於src/components目錄下，與Helloworld平行。在技術胖的演示中，weex工程尚未如今這樣的架構，如今的weex工程demo已經將helloworld作成了一個獨立組件）

 1 <template>
 2     <text class="test">a test of vue component in weex.</text>
 3 </template>
 4 
 5 <script>
 6 export default {
 7   name: 'mytest.vue'
 8 }
 9 </script>
10 
11 <style scoped>
12     .test{
13         background-color: #41B883;
14         font-size: 60px;
15         margin: 20px;
16     }
17 </style>

index.vue:(話說博客園根本無法識別如今的前端框架語言，只能勉強當html用了）

<template>
  <div class="wrapper">
    <image :src="logo" class="logo" />
    <text class="greeting">The environment is ready!</text>
    <HelloWorld/>
    <mytest></mytest>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld'
import mytest from '@/components/mytest'

export default {
  name: 'App',
  components: {
    mytest,
    HelloWorld,
  },
  data () {
    return {
      logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
    }
  }
}
</script>

<style scoped>
  .wrapper {
    justify-content: center;
    align-items: center;
  }
  .logo {
    width: 400px;
    height: 200px;
  }
  .greeting {
    text-align: center;
    margin-top: 70px;
    font-size: 50px;
    color: #41B883;
  }
  .message {
    margin: 30px;
    font-size: 32px;
    color: #727272;
  }
</style>

接下來又嘗試了一下將weex-ui中的組件整合進頁面中，weex-ui控件示例代碼在https://alibaba.github.io/weex-ui/#/cn/with-weex-toolkit

也作成了一個獨立的組件button.vue，與mytest.vue相似，也要導入到index.vue中。

<template>
    <div>
        <wxc-button text="Open Popup"
                    @wxcButtonClicked="buttonClicked">
        </wxc-button>
        <wxc-popup width="500"
                   pos="left"
                   :show="isShow"
                   @wxcPopupOverlayClicked="overlayClicked">
        </wxc-popup>
    </div>
</template>

<script>
import { WxcButton, WxcPopup } from 'weex-ui'
module.exports = {
  components: { WxcButton, WxcPopup },
  data: () => ({
    isShow: false
  }),
  methods: {
    buttonClicked () {
      this.isShow = true
    },
    overlayClicked () {
      this.isShow = false
    }
  }
}
</script>

 

運行效果以下：

 

 

 

 點擊Open Popup按鈕 就打開了左側的彈出窗（雖然目前裏面是空的，什麼都沒），而後再點擊窗外部的程序頁面，窗口就會退回。

 

　　html的部分很好理解，設定了相關的外觀表現並註冊了兩個方法（method），一個是按鈕的點擊事件，另外一個是窗口外部區域的點擊事件，

　　script的部分，能看到isShow成員控制是否顯示，這應該是WxcPopup的一個屬性，控制是否顯示彈出窗，可是因爲本人目前對vue/js瞭解尚淺，仍未能明白此處的module this所指爲什麼。彷佛這個module是包含了按鈕和彈出窗兩個組件的一個整合模塊，而this指向整個模塊，this.isShow直接控制的是WxcPopup，爲何對WxcButton沒有影響呢？這些以後再繼續研究。

 

　　最後遇到了這樣一個問題：默認demo顯示的weex logo圖片是超連接資源：https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png

　　本人試圖將其更換爲本地資源，放置在web/assets目錄下，而後經過相對路徑進行訪問。因爲weex網頁輸出在dist目錄，與src平級，所以src/index.vue中的logo路徑複製到了dist/index.vue中依然能夠正常訪問，可是對於安卓程序，整個工程處於platform文件夾下，沒法訪問外部資源，即便根據platform/android下的index.vue位置手動添加資源，也根本不會被編譯到app裏。安卓工程中的index.vue位於platform/android/bundlejs/下，原先的資源文件是platforms/web/assets/res/res1.jpg，故我添加了一個platforms/android/web/assets/res/res1.jpg放進安卓工程中，index.vue中的文件路徑爲

logo: '../web/assets/res/res1.jpg'

目前關於本地資源的問題仍未解決，可是因爲比賽要求只須要在weex playground上演示程序，故此部分先暫時放下，接下來繼續學習weex開發方面的內容