簡單描述一下公司使用weex初衷和記錄weex開發(fā)中遇到的問題,用作以后回顧;
移動端最大的缺點(diǎn)就是更新版本,整包下載真的是不友好,考慮到公司部分業(yè)務(wù),只能著手從隨時可以改,所有東西控制在手上,了解到了weex,渲染效果比原生殼+H5效果好,但是沒有純原生好,介于2者之間,主要在使用上是Vue.js就能很容易上手,當(dāng)然坑也是有很多,簡單記錄一下,順便也提供暫時的解決思路.
一些常用的指令參考官網(wǎng) weex開發(fā)
1.創(chuàng)建完成項目,生成android代碼用Android Strudio 會有一些配置上的錯誤,不過都是一些版本號不對的問題,weex官方生成的Android項目包有好幾個問題,不過對于安卓老手能很輕松的解決,不懂得哥們,就復(fù)制錯誤代碼到百度搜一搜,很簡單,都是一些gradle版本的問題,廢話不多說,直接開搞weex,在Android里面更改 utils文件下面的AppConfig里面的有配置是走本地的js文件還是走線上的,我們要動態(tài)部署服務(wù)端,肯定是走線上的,修改app_config.xml里面launch_locally為false ,launch_url改為服務(wù)端部署的地址,就ok了,然后愉快的開發(fā)js代碼,
2.weex-ui組件庫,當(dāng)然官方也提供了組件庫,git上大佬有總結(jié) weex-ui組件庫匯總
3.weex不支持路由組件動態(tài)加載 (坑!!!!!)
4.不建議用router-link 要用div+編程式導(dǎo)航
5.樣式不支持縮寫 border,background,margin,padding
6.不支持z-index,但是元素越往后層級越高
7.元素會自動綁定樣式weex-ct 默認(rèn)flex豎直排列
8.border-radius要用絕對像素值
9.只支持線性漸變
10.文本要用text包起來,渲染成p 標(biāo)簽
11.box-shadow只支持ios
12.image 定義圓角無效治唤，// ios有效路星，Android無效
13.text標(biāo)簽的margin,padding會被覆蓋,用!important
14.a組件不要添加click事件穴张，指向weex打包后的一個js地址,無法跳轉(zhuǎn)html（用web實現(xiàn)）
15.waterfall不支持web
16.<web> 用于在 WEEX 頁面中顯示由 src 屬性指定的網(wǎng)頁內(nèi)容花枫。
17.只有 <span>, <a> and <image> 可以包含在 <richtext> 標(biāo)簽里抛丽。<span> and <a> 會被顯示為 display:inline袁波，而 <image> 會被顯示為 display:inline-block童芹。<image>不可以在嵌入子元素
18.Weex 支持四種偽類：active, focus, disabled, enabled,所有組件都支持 active, 只有 input 組件和 textarea 組件支持 focus, enabled, disabled
19.refresh 只有在scroller和list蚁署，waterfall才有效果
20.class動態(tài)樣式恶座，用數(shù)組模式搀暑，對象模式不支持
21.多頁面需要在webpack里面配置多入口
在webpack里面代碼段 注意我的目錄是在src下面的pages目錄下寫頁面
代碼塊
//循環(huán)生成多個頁面
function walk(dir) {
dir = dir || '.';
const new_path = __dirname.slice(0,-8)
const directory = path.join(new_path, 'src/pages', dir);
const fileArr = ['entry.js','router.js'];
fs.readdirSync(directory)
.forEach((file) => {
const fullpath = path.join(directory, file);
// const stat = fs.statSync(fullpath);
const extname = path.extname(fullpath); // 類型
const basename = path.basename(fullpath); // 文件名
if(extname==='.js'&& !fileArr.includes(basename)){
const File = path.join(vueWebTemp, `pages/${basename}`);
const routerFile = path.join(vueWebTemp, config.routerFilePath)
fs.outputFileSync(File, getEntryFileContent(helper.root(`pages/${basename}`), routerFile));
const name = basename.slice(0,-3);
webEntry[name] = File;
weexEntry[name] = helper.root(`pages/${basename}`);
}
});
}
walk();
22.Android的navigator跳轉(zhuǎn)需要用local標(biāo)簽攔截 清單文件里面添加
代碼塊
<activity
android:name="com.weex.app.WXPageSampleActivity"
android:label="@string/app_name"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.VIEW"/>
<action android:name="com.alibaba.weex.protocol.openurl"/>
<category android:name="android.intent.category.BROWSABLE"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="com.taobao.android.intent.category.WEEX"/>
<data android:scheme="http"/>
<data android:scheme="https"/>
<data android:scheme="file"/>
<data android:scheme="wxpage" />
</intent-filter>
</activity>
23.WXEnvironment 全局環(huán)境變量 platform安卓大小寫問題,官方文檔給的是Android,但是我在打印發(fā)現(xiàn)是小寫的android,
24.不支持<img/> 需要用<image/>
25.對于iOS手機(jī),劉海屏的適配,從iPhone X之后的水果手機(jī)全部都帶有劉海屏,weex上適配就需要做了,
查看蘋果deviceModel值 查看蘋果deviceModel值,從Iphone X之后都是劉海屏,
代碼塊
<div :class="['wrapper', isipx?'w-ipx':'']">
<div class="auto-flex">
<router-view/>
</div>
</div>
</div>
<script>
export default {
name: 'App',
data () {
return {
}
},
computed:{
isipx:function () {
return weex && (weex.config.env.deviceModel === 'iPhone10,3' ||weex.config.env.deviceModel === 'iPhone10,6'
||weex.config.env.deviceModel === 'iPhone11,8' ||weex.config.env.deviceModel === 'iPhone11,2'
||weex.config.env.deviceModel === 'iPhone11,4'||weex.config.env.deviceModel === 'iPhone11,6');
//https://www.theiphonewiki.com/wiki/List_of_iPhones查看蘋果deviceModel值,從Iphone X之后都是劉海屏
}
},
}
</script>
<style scoped>
.wrapper{
flex-direction: column;
}
.w-ipx{
bottom:40px;
margin-top: 20px;
margin-bottom: 10px;//具體的樣式自己來調(diào)
}
</style>
26.weex前端js和移動端通訊,例如,填寫手機(jī)號碼的時候,需求是需要我跳轉(zhuǎn)到手機(jī)通訊錄然后選擇手機(jī)號,帶回聯(lián)系人姓名和手機(jī)號,這個需求,從weex前端看是沒發(fā)做到的,移動端以安卓為例6.0以后訪問通訊錄是需要動態(tài)權(quán)限,iOS更不用說也是需要權(quán)限的,所以js前端和移動端通訊就得通訊了,基本思路:weex官方擴(kuò)展能力 在擴(kuò)展安卓和iOS里面,有介紹使用module進(jìn)行能力擴(kuò)展,基本介紹看官方文檔,言歸正傳,繼續(xù)調(diào)用通訊錄的介紹,先獲取通訊錄權(quán)限,然后再去做相對應(yīng)的操作,具體代碼如下:
先來看張Android結(jié)構(gòu)圖
在extend文件夾下有一個WXEventModel文件,這是是系統(tǒng)官方生成的,我們只需要創(chuàng)建自己的module就好了
安卓=> 獲取聯(lián)系人的代碼 這個哥們寫的有點(diǎn)小問題,沒有去拿權(quán)限,在open方法里面添加6.0動態(tài)權(quán)限獲取就好了,完美解決
iOS=> iOS回調(diào)參照
