添加小程序，兑换各种视频教程/数据资源。

1. 安装weex项目：参考：http://weex.apache.org/cn/guide/index.html。
                              参考：https://blog.csdn.net/qq_42231156/article/details/84837748。
                              参考：https://blog.csdn.net/xingxtao/article/details/79505997。

                              参考：http://jspang.com/post/weex.html。

2. flex布局自适应：flex:0.3/1。
   

 <div class="header_nav">
        <div class="left box">
            <text>上海</text>
        </div>
        <div class="mid box">
            <text>搜索</text>
        </div>
        <div class="right box">
            <text>地图</text>
        </div>
    </div>
    .header_nav{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .left{
        flex:0.3;
        background-color:yellow ;
    }
    .right{
        flex:0.3;
        background-color:blueviolet ;
    }
    .mid{
        flex:1;
        background-color: yellowgreen;
    }                  

 
3. 报错：我在windows环境使用weexpack build ios 反馈 run ios unsupported on windows，不安装mac模拟器就没办法用weex来构建ipa。

4. 报错：Cannot destructure property `compile` of 'undefined' or 'null'。
       可能是webpack-dev-server版本太高，重新下载npm remove webpack-dev-server，npm install -D webpack-dev-server@2.9.1。    
       
5. weex环境中与web的差异：
  5.1 weex中没有dom，不支持dom操作。不支持 Web API，没有 Element 、Event 、File 等对象，详细列表可以参考 Web APIs on MDN。不支持选中元素，
          如 document.getElementById 、 document.querySelector 等；当然也不支持基于 DOM API 的程序库（如 jQuery）。
  5.2    没有 window 、screen 对象：
                  Weex 中并未提供浏览器中的 window 和 screen 对象，不支持使用全局变量。如果是想要获取设备的屏幕或环境信息，可以使用 WXEnvironment 变量。
                    WXEnvironment：
                            weexVersion: WeexSDK 的版本。
                            appName: 应用的名称。
                            appVersion: 应用的版本。
                            platform: 运行平台，可能的值是 Web 、Android 、iOS 之一。
                            osName: 系统的名称。
                            osVersion: 系统版本。
                            deviceWidth: 设备宽度。
                            deviceHeight: 设备高度。
    5.3  没有 document 对象：
    5.4  没有 history 、location 、navigator 对象：
    5.5  能够调用移动设备原生 AP：如 clipboard 、 navigator 、storage 等。
    5.6 weex中只支持px，不支持em，rem,内边距，内容和边框之间的距离。默认值 0,外边距，元素和元素之间的空白距离。值类型为 length，默认值 0。设定边框宽度，非负值, 默认值 0。
    5.7  不支持background，border，transform ....的简写。
    5.8 box-sizing:默认border-box。
    5.9  默认所有元素display:flex，不需要在写，Flexbox 是默认且唯一的布局模型。
    5.10 支持position定位。
    5.11 不支持z-index，越靠后的元素，层级越高。
    5.12 如果定位元素超过容器边界，在 Android 下，超出部分将不可见，原因在于 Android 端元素 overflow 默认值为 hidden，但目前 Android 暂不支持设置 overflow: visible。
  5.13 Weex 支持四种伪类：active, focus, disabled, enabled，同时生效的时候，优先级高覆盖优先级低。
           .logo:active {           
                background-color: green;
              }        
    5.14  支持线型渐变（linear-gradient），不支持径向渐变（radial-gradient）。
    5.15 box-shadow仅仅支持iOS。
    5.16 Weex 的原生运行机制支持从设备中加载图片，你只需要设置文件 url，例如 file:///sdcard/image_new0.png 这样的格式。但是 Weex 暂时还不支持加载你项目中的图片文件。
              参考https://blog.csdn.net/cui130/article/details/84026843。
    5.17 weex只支持单个class，不支持关系clss或多个class。
    5.18 Weex 盒模型基于 CSS 盒模型，每个 Weex 元素都可视作一个盒子（即包括content,padding,border,margin）。
    5.19 weex不支持float布局，只支持flex布局，支持position。真机上不支持百分比布局。
    5.20 不支持background,font,border,outline的简写。如：不支持(border:1px solid #ccc)。    
    5.21 只支持px单位，不支持em,rem。
    5.22 <text>标签中的属性.text{lines:3}表示最多3行，超过3行省略号。
    5.23 <list><cell>标签不能写样式。
    5.24 <video>标签在原生播放器中比较难看，可以引入其他播放器插件。

6. weex的list组件：组件是提供垂直列表功能的核心组件，拥有平滑的滚动和高效的内存管理，非常适合用于长列表的展示。

   <list class="list">
          <refresh class="refresh_loading" @refresh="onrefresh">    //refresh用于给列表添加下拉刷新的功能
              <text class="indicator-text">下拉加载 ...</text>    
              <loading-indicator class="indicator"></loading-indicator>
        </refresh>  
        <header>     //当 <header> 到达屏幕顶部时，吸附在屏幕顶部。
            <slot name="header"></slot>
        </header>
        <cell class="cell">   //<cell>用于定义列表中的子列表项，类似于 HTML 中的 ul 之于 li。Weex 会对 <cell> 进行高效的内存回收以达到更好的性能,需要设置最小高度，以撑开内容。
            <slot name="cell"></slot>
        </cell>
        <loading class="refresh_loading" >   //<loading> 用法与特性和 <refresh> 类似，用于给列表添加上拉加载更多的功能。
            <text class="indicator-text">上拉刷新 ...</text>            
        </loading>
      </list>

7. weex实战笔记：https://blog.csdn.net/weixin_42881744/article/details/81416699。

8. 通用事件：
    8.1 click：当组件上发生点击手势时被触发。<input> 和 <switch> 组件目前不支持 click 事件，请使用 change 或 input 事件来代替，
                    type: click。    
                    target: 触发点击事件的目标组件。
                    timestamp: 触发点击事件时的时间戳。
    8.2 longpress：那么当用户长按这个组件时，该事件将会被触发。<input> 和 <switch> 组件目前不支持longpress事件，请使用 change 或 input 事件来代替。
                    type : longpress。
                    target : 触发长按事件的目标组件。
                    timestamp : 长按事件触发时的时间戳。
    8.3 Appear：如果一个位于某个可滚动区域内的组件被绑定了 appear 事件，那么当这个组件的状态变为在屏幕上可见时，该事件将被触发。
                    type : appear。
                    target : 触发 Appear 事件的组件对象。
                    timestamp : 事件被触发时的时间戳。
                    direction : 触发事件时屏幕的滚动方向，up 或 down。
    8.4 Disappear：如果一个位于某个可滚动区域内的组件被绑定了 disappear 事件，那么当这个组件被滑出屏幕变为不可见状态时，该事件将被触发。
                    type : disappear
                    target : 触发 Disappear 事件的组件对象
                    timestamp : 事件被触发时的时间戳
                    direction : 触发事件时屏幕的滚动方向，up 或 down
    8.5 Page：仅支持 iOS 和 Android，H5 暂不支持。Weex 通过 viewappear 和 viewdisappear 事件提供了简单的页面状态管理能力。
                     viewappear 事件会在页面就要显示或配置的任何页面动画被执行前触发，例如，当调用 navigator 模块的 push 方法时，该事件将会在打开新页面时被触发。
                     viewdisappear 事件会在页面就要关闭时被触发。与组件的 appear 和 disappear 事件不同的是，viewappear 和 viewdisappear 事件关注的是整个页面的状态，
                      所以它们必须绑定到页面的根元素上。特殊情况下，这两个事件也能被绑定到非根元素的body组件上，例如wxc-navpage组件。                
                    type : viewappear 或 viewdisappear。
                    target : 触发事件的组件对象。
                    timestamp : 事件被触发时的时间戳。
                    
9. 事件冒泡：目前仅 Weex Native（Android 和 iOS）支持，web 端 暂时不支持此项特性。
    9.1 使用开启事件冒泡：注意事件冒泡默认是不开启的，你需要在模板根元素上加上属性 bubble=true 才能开启冒泡。
        如：    <template>            
                  <div bubble="true">    //开启事件冒泡机制。
                    ...
                  </div>
                </template>
    9.2 阻止事件冒泡：注意 event.stopPropagation 和 bubble=true 的影响范围不同，前者仅针对当前冒泡到的元素以及其祖先层级有效，而对子元素无效。而后者相当于一个全局开关，
                                开启以后对该根元素内部所有子元素都开启了事件冒泡效果。两者可以同时存在。
        如：    {
                  handleClick (event) {               
                    event.stopPropagation()  // 阻止继续冒泡.
                  }
                }        
                

10. weex的内置组件：
  10.1 <a>：用于实现页面间的跳转，<a> 的表现同 <div> 一致，  不能在 <a>中直接添加匿名文本，请用<text>包裹文本，支持通用样式和通用事件。待跳转的页面URL，
                  待跳转页面需要是一个Weex页面。如果待跳转页面是一个普通HTML，这会是一个未定义行为（即href="www.baidu.com"在移动端无法跳转到百度页面，在web端可以跳转到百度页面。）
      如：    <a href="http://dotwe.org/raw/dist/a5e3760925ac3b9d68a3aa0cc0298857.bundle.wx">
                <text>Jump</text>
              </a> 
    10.2 <div>：不能直接在里面添加文本（字符串），如果要展示文本，应该使用 <text> 组件。<div> 嵌套层级不可过深，否则容易引起性能问题，建议控制在 10 层以内。
                    支持包括 <div> 在内的任何组件作为自己的子组件。因此，在写一个组件时，推荐外层使用 <div> 作为根容器。<div> 在 移动端中不可滚动，即使显式设置高度也一样。
    10.3. <image>：用于在界面中显示单个图片，<img> 标签在 Weex 中不支持，你应该使用<image>。 Weex 没有内置的图片下载器，因为相关的下载、缓存、解码机制非常复杂，
                    一些开源的工具如 SDWebImage 已经处理得很好， 所以在使用 <image> 之前，请在 native 侧先接入相应的 adapter 或者 handle。且必须指定样式中的宽度和高度，否则无法工作。
                    Weex没有提供必须支持的图片格式列表，主要依赖于你正在使用的图片 adapter 或者 handler。                    
                    属性名/方法                               类型                                      值                                                               默认值                     描述
                    placeholder(属性)       String             {URL/Base64}                 -           占位图的 URL，当由 src 表示的图片下载完成并展示后将被删除。
                    resize(属性)             String             cover/contain/stretch        stretch     stretch(拉伸宽高覆盖页面)，cover(宽高最小值贴近边缘)，contain(宽高最大值贴近边缘)
                    src(属性)               String             {URL/Base64}                  -           强制属性，支持远程图片，但是本地图片需要配置图片存放位置，怎么配置？
                    
                    
                    Component(方法):保存图片内容到本地文件或相册，此操作可能需要设备相关权限。你必须加入NSPhotoLibraryAddUsageDescription 和 NSPhotoLibraryAddUsageDescription (iOS 11) 
                                                以获得访问 iOS 系统相册权限. 参见: Cocoa Keys.
                            callback：{Function} 在图片被写入到本地文件或相册后的回调，回调参数：
                            result：{Object} 回调结果对象，属性列表：
                            success：{Boolean} 标记图片是否已写入完成。
                            errorDesc：{String} 如果图像没有成功写入，该字符串包含了详细的错误描述。
                            
                    save(方法):在 <image>标签上增加 ref 属性。
                            <image ref="poster" src="path/to/image.png"></image>
                            const $image = this.$refs.poster
                            $image.save(result => {  //图片保存失败/成功处理事件
                              if (result.success) {                           
                              } else {
                                console.log(result.errorDesc)                            
                              }
                            })    
                            
                    load(方法):当加载完成 src 指定的图片时，load事件将被触发。
                            success: {Boolean} 标记图片是否成功加载。
                            size: {Object} 加载的图片大小对象，属性列表：
                                    naturalWidth: {Number} 图片宽度，如果图片加载失败则为0。
                                    naturalHeight: {Number} 图片高度，如果图片加载失败则为0
                            <image @load="onImageLoad" src="path/to/image.png"></image>
                                 methods: {
                                onImageLoad (event) {
                                  if (event.success) {    //图片加载成功后的处理事件                               
                                  }
                                }
                              }
    10.4 <slider>：轮播图。默认的轮播间隔为3秒。支持任意类型的 Weex 组件作为其子组件。你也可以放置一个 indicator 组件用于显示轮播指示器。
                                indicator 也只能作为 Slider 的子组件使用。
                    属性：
                        auto-play(boolean): 组件渲染完成时，是否自动开始播放，默认为 false.
                        interval(number): 轮播间隔，默认为 3000ms。
                        index(number): 设置显示slider的第几个页面。
                        offset-x-accuracy(number):控制 onscroll 事件触发的频率，默认值为10，表示两次 onscroll 事件之间滚动容器至少滚动了10px。
                                                                            将该值设置为较小的数值会提高滚动事件采样的精度，但同时也会降低页面的性能。
                        show-indicators(boolean): 是否显示指示器。
                        infinite(boolean): 设置是否可以无限轮播，默认为 true。
                        scrollable(boolean): 设置是否可以通过滑动手势来切换页面，默认为 true。
                        keep-index(boolean, Android可用): 设置轮播器中的数据发生变化后是否保持变化前的页面序号。
                        forbid-slide-animation(boolean, v0.7+ & iOS): iOS 平台默认支持动画，使用该属性可以强制关闭切换时的动画。                  
                    事件：
                        通用事件。
                        change： 当轮播索引改变时，触发该事件。
                        scroll：列表发生滚动时将会触发该事件。
    10.5 <indicator>：组件通常用于显示轮播图指示器效果，必须充当 <slider> 组件的子组件使用，且没有任何子组件。<indicator> 默认的宽高继承于 <slider>
                                    如果 <slider> 未设置宽高，需要显式的给 <indicator> 设置宽高值，background-color 不推荐使用，建议使用 item-color 和 item-selected-color 代替。
                                    支持所有通用样式和通用事件。
             <indicator> 组件有一些私有样式，如下：
                    item-color {color}：indicator指示点未被选中时的颜色，默认值为 #CCCCCC。
                    item-selected-color {color}：indicator指示点被选中时的颜色，默认值为 #444444。
                    item-size {number}：指示点的半径，默认为 5px。

<slider class="slider" interval="4500" @change="onchange">
     <div class="frame" v-for="img in imageList">
        <image class="image" resize="cover" :src="img.src"></image>
        <text class="title">{{img.title}}</text>
     </div>
     <indicator class="indicator"></indicator>
</slider>
<style>
 .indicator {
    width: 700px;
    height: 700px;
    item-color: green;  //指示器默认颜色
    item-selected-color: red;  //指示器选中时的颜色
    item-size: 50px;   //指示器园的大小
    position: absolute;   //必须写的属性
    top: 200px;  //相对.slider中心位置的偏移
    left: 200px;
  }
  .slider {
    width: 700px;
    height: 700px;
   }

</style>
  

    10.6 <input> 组件的 type 属性的。不支持 click 事件。请监听 input 或 change 来代替 click 事件。不支持子组件。
            特性：
                    type：包括如 text（默认值），date，datetime，email， password，tel，time，url，number 。
                    value {string}：组件的默认内容。
                    placeholder {string}：提示用户可以输入什么。 提示文本不能有回车或换行。
                    disabled {boolean}：布尔类型的数据，表示是否支持输入。通常 click 事件在 disabled 控件上是失效的。
                    autofocus {boolean}：布尔类型的数据，表示是否在页面加载时控件自动获得输入焦点。
                    maxlength {nubmer}：v0.7一个数值类型的值，表示输入的最大长度。
                    return-key-type {string}：v0.11键盘返回键的类型,支持 defalut;go;next;search;send,done。
                    auto-capitalization-type {string}：键盘自动大小写类型,支持 none;words;sentences;allCharacters
                    singleline {boolean}：控制内容是否只允许单行
                    max-length {number}：控制输入内容的最大长度
                    lines：控制输入内容的最大行数
                    max：控制当type属性为date时选择日期的最大时间，格式为yyyy-MM-dd
                    min：控制当type属性为date时选择日期的最小时间，格式为yyyy-MM-dd
            事件：
                    input: 输入字符的值更改。
                            e.value: 触发事件的组件；
                            e.timestamp: 事件发生时的时间戳,仅支持Android。
                    change: 当用户输入完成时触发。通常在 blur 事件之后
                            e.value: 触发事件的组件；
                            e.timestamp: 事件发生时的时间戳,仅支持Android。
                    focus: 组件获得输入焦点。
                            e.timestamp: 事件发生时的时间戳,仅支持Android。
                    blur: 组件失去输入焦点。
                            e.timestamp: 事件发生时的时间戳,仅支持Android。
                    return: 键盘点击返回键。
                            e.timestamp: 事件发生时的时间戳,仅支持Android。
                            e.value: 触发事件的组件的文本.

            10.7 <web>组件：用于在 weex 页面中显示由 src 属性指定的第三方页面内容。您还可以使用 webview 模块来控制 WebView 的行为，例如回退、前进和重新加载。<web> 不支持任何嵌套的子组件，并且必须指定 width 和 height 的样式属性，否则将不起作用。只支持公共事件中的 appear 和 disappear 事件，以及自有事件onPageStart，pagefinish，error，receivedtitle。

<web @pagestart="onPageStart" @pagefinish="onPageFinish" @error="onError" src="https://vuejs.org" @receivedtitle="receivedtitle"></web>

methods:{
    onPageStart(e){  //Web页面开始加载时调用,返回事件对象e.url: {String} 当前 Web 页面的 URL。       
    },
    onPageFinish(e){  //Web页面完成加载时调用，返回事件对象e.url: {String} 当前 Web 页面的 URL。e.canGoBack: {Boolean} 当前 Web 页面是否可以回退。e.canGoForward: {Boolean} 当前 Web 页面是否可以前进。e.title: {String} 当前 Web 页面的标题（仅限 iOS 平台）。
    },
    error(e){  //Web页面加载失败时调用,

    },
    receivedtitle(e){  //Web 页面的标题发生改变时调用（仅限 Android 平台）。返回事件对象e.url: {String} 当前 Web 页面的 URL
    }
}

11.  weex请求获取数据：参考weex文档。

#在.vue文件中
<script>
    const stream=weex.requireModule('stream');  //引入weex的内置数据请求stream模块
    export default{        
        methods:{
            getAxiosInfos(url,callback){
                return stream.fetch({
                    methods:'GET',   //{string}HTTP方法GET或是POST，GET请求不支持body方式传递参数，请使用 url 传参。
                    type:'json', //{string}响应类型 json,text 或是 jsonp {在原生实现中其实与 json 相同)。
                    url:url,   //{string}请求的 URL
                    headers:{object}, //HTTP 请求头
                    body:{string}   //HTTP 请求体,body 参数仅支持 string 类型的参数，请勿直接传递 JSON，必须先将其转为字符串。  
                },callback)   //callback响应结果回调，回调函数将收到如下的 response 对象：
                              //status{number}：返回的状态码
                              //ok {boolean}：如果状态码在 200~299 之间就为真。
                              //statusText {string}：状态描述文本
                              //data {Object | string}: 返回的数据，如果请求类型是 json 和 jsonp，则它就是一个 object ，如果不是，则它就是一个 string。
                             //headers {Object}：响应头
            }
        }
    }
//注意：默认 Content-Type 是 ‘application/x-www-form-urlencoded’。
//如果你需要通过 POST json ， 需要将 Content-Type 设为 ‘application/json’。
</script>