添加小程式，兌換各種視訊教程/資料資源。
（一）筆記：
1. 建立weex項目：參考https://blog.csdn.net/qq_42231156/article/details/84837748。
2. weex的垂直滾動list元件：list元件的外層不能有div标簽。
<template>
<list class="list">
<cell class="cell" >
<div class="box" v-for="num in 10">
<text class="text">12151200</text>
</div>
</cell>
</list>
</template>
<style scoped>
.cell{
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
}
.box{
width: 375px;
height: 375px;
margin: 0;
padding: 0;
}
</style>
3. weex的input元件：必須設定寬高,且不能設定百分比寬高，如width:100%。
4. weex裡引用iconfont圖表：參考https://www.jianshu.com/p/21325b0b796d。
5. 在weex的vue動态加載class失敗：
5.1 <text class="mid_t2 border_r" :class="isMidShow?'mid_t2_active':''" @click="chioceTime">星期一</text>
這種寫法：無法再移動端顯示，頁面全變空白，不報錯。
5.2 <text class="mid_t2 border_r" :class="{isMidShow?'mid_t2_active':''}" @click="chioceTime">星期一</text>
這種寫法：直接報錯。
5.3 <text class="mid_t2 border_r" :class="{mid_t2_active:isMidShow}" @click="chioceTime">星期一</text>
這種寫法：直接無效，不報錯。
解決：<text :class="[isMidShow?'midT2SActive':'midT2SnoActive','mid_t2','border_r']" @click="chioceTime">星期一</text>
注意：動态的class寫在數組中，且動态加載的class不能是'_'命名，且'mid_t2','border_r'中的樣式不和'midT2SActive'和'midT2SnoActive'有重疊。如'midT2SActive'和 'midT2SActive'是背景顔色的改變，那麼'mid_t2'，'border_r'就不能寫背景顔色樣式。
6. weex的<refresh>和<loading>必須寫在<refresh> 是 <scroller>、<list>、<hlist>、<vlist>、<waterfall> 的子元件，隻能在被它們包含時才能被正确渲染。如果要顯示
<loading-indicator class="indicator"></loading-indicator>，注意:display="refreshing?'show':'hide'"不能有空格。
7. weex中background，font，border，border-radus不能簡寫，如background-color:不能簡寫為bacground。
8. weex中動畫：調用weex的animation子產品，詳細參考http://dotwe.org/vue/09ba2ff859803cb6277d48f84e55eb26
const animation = weex.requireModule('animation')
moveAnimate (a=0,func=()=>{}) { //left_box滑動出來的動畫
var testEl = this.$refs.test;
animation.transition(testEl, {
styles: {
transform: 'translateX('+a+'px)',
transformOrigin: 'center center'
},
duration: 400, //ms
timingFunction: 'ease',
delay: 0 //ms
},()=>{
func()
})
},
9. 注意：weex不支援z-index:所有越靠後的标簽層級越高。
10. 參考：https://blog.csdn.net/violetjack0808/article/details/78616470。
11. weex下傳回上一頁：使用weex-vue-navigator插件。參考：https://github.com/MMF-FE/weex-vue-navigator。
11.1 下載下傳：npm i weex-vue-navigator --save-dev。
11.2 在entry.js檔案中配置引入：
const { router } = require('./router');
const App = require('@/index.vue');
import weexNavigator from 'weex-vue-navigator'
Vue.use(weexNavigator, {router})
new Vue(Vue.util.extend({el: '#root', router}, App));
router.push('/');
weexNavigator.bootstrap()
11.3 在.vue檔案中使用：
this.$goTo(url)
this.$back() //傳回上一頁
this.$goTo(url, true)
12. weex中實作tag樣式：通過display:flex實作。
13. weex中的get方法請求：weex中可使用axios請求，但是移動端不支援axios請求
app.get("/login",(req,res)=>{
var mphone = req.query.phone; //使用者名
var mpwd = req.query.upwd; //密碼
var sql = "SELECT mid FROM m_user";
sql += " WHERE mphone = ? AND mpwd = ?";
pool.getConnection((err,conn)=>{
if(err) throw err;
conn.query(sql,[mphone,mpwd],(err,result)=>{
if(err)throw err;
console.log(result)
if(result.length>0){
res.json({code:0,msg:"登入成功",result:result});
}else{
res.json({code:-1,msg:"使用者名密碼有誤",result:result});
}
});
})
}
var stream = weex.requireModule('stream')
export var weexRequestGet=(baseUrl,callback)=>{
return stream.fetch({
method: 'GET',
type: 'json',
url: baseUrl
}, callback)
}
var url="http://localhost:3000/login?phone="+this.phone+"&upwd="+this.code
weexRequestGet(url,(data)=>{
console.log(data)
})
14. weex中的post方法請求：
app.post("/log",(req,res)=>{
var mphone = req.body.phone; //使用者名
var mpwd = req.body.upwd; //密碼
console.log(mphone)
console.log(req.body)
console.log(mpwd)
var sql = "SELECT mid FROM m_user";
sql += " WHERE mphone = ? AND mpwd = ?";
pool.getConnection((err,conn)=>{
if(err) throw err;
conn.query(sql,[mphone,mpwd],(err,result)=>{
if(err)throw err;
console.log(result)
if(result.length>0){
res.json({code:0,msg:"登入成功",result:result});
}else{
res.json({code:-1,msg:"使用者名密碼有誤",result:result});
}
});
})
})
var stream = weex.requireModule('stream')
export var weexRequestPost=(baseUrl,str,callback)=>{
return stream.fetch({
method: 'POST',
type: 'json',
headers:{'Content-Type':'application/json'},
body:JSON.stringify(str),
url: baseUrl
}, callback)
}
var url="http://localhost:3000/log"
var str={
phone:this.phone,
upwd:this.code
}
weexRequestPost(url,str,(data)=>{
console.log(data)
})
15. weex的本地存儲：storage 可以對本地資料進行存儲、修改、删除，并且該資料是永久儲存的，除非手動清除或者代碼清除。但是，storage 子產品有一個限制就是浏覽器端（H5）
隻能存儲小于5M的資料，因為在 H5/Web 端的實作是采用 HTML5 LocalStorage API。而 Android 和 iOS 這塊是沒什麼限制的。
const storage = weex.requireModule('storage')
15.1 設定本地存儲：setItem(key, value, callback) key和value都是string類型，如果value是對象或數組，需要JSON.stringfy()和JSON.parse()
15.2 擷取本地存儲：getItem(key, callback)
15.3 删除本地存儲：removeItem(key, callback)
（二）未解決的難題？
1. weex怎麼加載本地圖檔?
2. weex頁面滾動滲透事件，怎麼解決？
3. weex中遠端加載的iconfont圖示，有時候在移動端無法顯示，有時候又能顯示？
解決：重新重新整理iconfont官網項目圖示的遠端位址，然後将位址重新填入本地iconfon檔案中。
4. weex中css的文本超出省略号無法實作？
解決：text的lines='3'屬性是超出省略，需要限制text标簽的寬。
5. weex的網絡get/post請求，總是有問題，怎麼解決？
解決：參考上面第13、14條。