（一）笔记：
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条。