In conclusion, I am very
Weex is not recommended for any commercial development
There are many people who will say... You are bullshitting.. Look at other people's Ali... Ah Fliggy... Ah that Alipay... Don't they use it well...
Of course, this is also our company's consideration as a technical selection.. Three-terminal universal.. Ali-based apps are in use across the board.. Theoretically, it can be achieved.. And in the coding process.. IOS engineers, Android engineers Together with front-end engineers and some back-end engineers who are familiar with the front-end, they all pull over to contribute a set of code. The code quality can be guaranteed
Now that I think about it, I can only say... It's too naive... You don't even think about how many big cows and how many people in Ali are working on this project.. Besides, Taobao is stuck. Everyone is willing to use it.. If you If the item is stuck twice like this, can your app still attract customers like Taobao??
It's like when you say you want to write a masterpiece... You plan to write it in English... Translate it into Chinese, Russian and Japanese (ios android web)... It makes people feel moved by other countries. .. It will be quite difficult in itself..
In addition, you can open the layout boundary in android and take a look at Tmall Fliggy... There are only a few interfaces left in the weex interface.. Many interfaces have been replaced with native or webview hybrid interfaces... so done Miscellaneous user experience is passable.. I can only say one thing.. Ali is awesome=.=... So the obvious message is.. This technology is not widely used by their own people.. It can be seen that there are still many limited..
If you have decided to use weex.. or are planning to use it to build a three-terminal application... Then.. I hope my step-by-step guide can help you.. From getting started to giving up...
1. Start preparation
Build a development environment
First install node.js weex-toolkit according to the instructions on the official website, and then you can start creating projects. You can choose RN's rex or front-end VUE mode to write code. But we use vue.. rex also Considered.. But no one can write RN.. Plus there are very few examples of weex+RN on the Internet.. So I gave up..
If it is on windows.. everything you install needs to configure environment variables...
D:\nodeJs\npm;D:\nodeJs\node.exe;C:\Users\jupiter\AppData\Roaming\npm;C:\Users\jupiter\AppData\Roaming\npm\node_modules\weex-toolkit\bin\weex.js;C:\Users\jupiter\AppData\Roaming\npm\node_modules\weexpack\bin\weexpack.js;C:\Users\jupiter\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\weex-previewer\vue-template\template\assets\vue.js
Share the things in my environment variables.. node weex npm these must be configured... if you don't configure it, you can't use it.. jupiter is my windows username. Everyone else take a look at it for yourself. What path is it installed to.. Especially weex and weexpack are the default paths. The level is still very deep.. Look carefully for the configuration..
In addition, we recommend a Fliggy open source UI framework weex-ui
In general, this UI framework can still help some things.. But there are some problems in it.. For example, the height of getPageHeight in utils.. It is right on the web.. But on mobile phones... emmmm.. . will be less height.. about 88px... for unknown reasons.. may be the default toolbar used in android... but it automatically reduces it for you.. but in fact there is no toolbar.. this height is less ..
2. Start stepping on the pit
As for how to write vue code or a simple helloworld.. it can be found on Baidu... I won't go into details. I think you can write vue and then everything will be fine. I want to start building a three-terminal application... Then I have to pour a pot of cold water on you first... Big brother.. You jump to the interface and show me..
1. Interface jump
You will say: Why don't you just jump to the interface.. Look at my startActivi... vi...
vi your head..
The jump here needs to be implemented using the navigator . In principle, this thing is done with special processing at each end.. On the web, it is more like vue router.. That is, a single-page jump.. On android, it is through Implicitly intercept the corresponding url type.. If it starts with http and https.. it will be opened with webview.. If it starts with files... Hehe.. You will find that it is not moving...
Here I will complain about the reason why first-hand weex is not suitable for commercial use... There is no community at all ... This is the most annoying... So if you encounter many problems, you can only look at the source code or Baidu by yourself... And many things in Baidu are based on The old version.. you will find out when you use it.. what is written has no effect at all..
Jump is the first big pit we encountered.. Baidu said that.. you can use vue router.. Then we tried it and found that.. vue router is not a real interface jump on the mobile terminal at all.. just A single page.. reloads every time.. no jump animation.. this is totally unacceptable for the effect of the app..
On the other hand, it is said on the Internet that the implementation of navigator.. does not take effect when jumping to the local interface..
The place where we code is in src.. After using npm build (npm run or weex run android, etc. will build first), a set of JS files will be generated and stored in dist.. On the Internet, just use navigator to open the compiled and generated js The file can be jumped.. In fact, after opening.. not..
run in the project directory
weex platform add android
Your project can be run on an Android phone with weex run android...
There is a lot of talk on the Internet that you need to find the address under the local resource folder to jump.. In android.. I did find that there are js files for these interfaces in the assets folder..
Just use file://assets/dist/ to find this file in Android and jump to it.. Then again it is found to be invalid.. But it is found that jumping to http and https is valid on mobile phones.. So that is to say The implicit call did not intercept the request of this file..
But it is obvious that the file is already being intercepted in the manifest of the android project. Finally, it is found that the file cannot be intercepted.. Any other keywords can be used.. So what should I do.. Finally, I can only add in front of the address Other keywords local but let the local keyword be implicitly intercepted. Finally, remove the local from the activity and use the file address to render..
Finally, the method of obtaining the corresponding jump address of the three terminals (note that local is added to the front of Android for interception)
getJumpBaseUrl(toUrl) {
var bundleUrl = weex.config.bundleUrl;
var isnav = true
bundleUrl = new String(bundleUrl);
var nativeBase;
var native;
var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;
var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
if (isAndroidAssets) {
nativeBase = "local://" + 'file://assets/dist/';
native = nativeBase + toUrl + ".js";
} else if (isiOSAssets) {
nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
native = nativeBase + toUrl + ".js";
} else {
var host = 'localhost:8081';
var matches = /\/\/([^\/]+?)\//.exec(bundleUrl);
if (matches && matches.length >= 2) {
host = matches[1];
}
//此处需注意一下,tabbar 用的直接是jsbundle 的路径,但是navigator是直接跳转到新页面上的.
if (typeof window === 'object') {
nativeBase = 'http://' + host + '/';
} else {
nativeBase = 'http://' + host + '/';
}
native = nativeBase + toUrl + ".html";
}
return native;
}
android manifest 中拦截local
<activity
android:name="com.weex.app.WXPageActivity"
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.DEFAULT"/>
<category android:name="com.taobao.android.intent.category.WEEX"/>
<data android:scheme="http"/>
<data android:scheme="https"/>
<data android:scheme="local"/>
</intent-filter>
</activity>
android java code中把local头给去掉 拿file地址去渲染
把local关键字给替换掉.. 然后其他的和原来操作一样
这样在android上的跳转才算解决了
如果你看到这个坑就已经准备放弃了.. 我只能说.. 施主 回头是岸.. 如果你觉得还想挑战一下.. 那么继续看后面的坑吧..
2.控件太少 基本只能实现最基本的效果
第二个大坑就是控件过于少.. 很多效果在weex中你是没法实现的.. 或者说不是一般人可以实现的... 除非你是真的精通三端的技术大牛.. 不然你要掂量一下自己的项目.. 是不是有地图.. 是不是有其他动画.. 是不是有weex-ui中没有的效果.. 如果有.. 那么是否有替代方案或者对UI的要求高不高..能不能接受替换.. 是否有自己封装控件的经验..
就算你要自己做.. 还有一个事情你必须知道..
那就是
什么意思呢.. 就是说滑动事件获取是不靠谱的.. 甚至在weex-ui的slide-nav(视窗增大)中看到了类似的备注
之前还考虑过希望封装个类似ios picker的效果... 看到这个之后就放弃了.. 滑动事件的监听都不靠谱的话.. 很多效果就算要自己封装也是不太可能呢..
3.滚动控件滑不动
在weex 中提供了好多种滚动控件 包括list scroller 但是一开始使用的时候发现都滑不动... 后来才发现.. 如果不给这些控件指定高度.. 那么它会包裹内容高度.. 那么内容高度和控件高度相同也就不可以滑动了... 控件已经顶出屏幕了你也不知道.. 那么对于这些滚动控件是必须指定高度的... 但是高度怎么拿呢...
weex的规则是屏幕宽度是750px 而高度是根据宽高比算出来的.. 也就是高度是不固定的.. weex-ui中的utils中有获取屏幕高度的方法.. 但是就是开头提到的问题.. android上回少88px;
所以只能自己封装个获取高度的方法
import {Utils} from 'weex-ui'
const screenHeight = Utils.env.getPageHeight() ;
const androidNavHeight = Utils.env.isAndroid() ? 88 : 0;
return screenHeight +androidNavHeight;
用这样的方法获取的高度.. 再设置给scroller才可以使用.. 当然如果你的界面里还有其他控件.. 高度还要再减去那些.. 不然scroller会包裹内容高度..
4.前端代码不是全部可靠的
在官网上写出了几种不支持的样式, 百分比是不支持的.. 包括我之前用的border 50% 去绘制圆形.. 到app上会变成50px.. 另外用border绘制三角形之类的都是不可靠的.. 在web上可以实现.. 到手机上就雪崩了.. 所以如果你是前端过来的同学.. 不要什么vue的骚操作都往里套.. 它并不是真正意义上的前端代码.. 所以还要对不同系统去调整适配问题... 所以你的团队中最少的需要有三端都懂的人才可以用.. 而不是说你懂前端就闷头写.. 最后web没问题了.. 在android和ios上都运行不起来.. 最后debug都不知道从哪做起... 展开记录一下那些写法是不可以的..
1.dom document对象不可用
在前端中也许会有类似
var mo = function(e) {
e.preventDefault();
};
document.body.style.overflow = 'hidden';
document.addEventListener("touchmove", mo, false); //禁止页面滑动
的代码来实现禁止页面滑动.. 在网页中如果内容超过了浏览器高度便可以滑动.. 如果你想禁用掉这个滑动便会涉及到以上的代码.. 但是这个代码在手机上会报 render error:-2013
实际上就是js中找不到这个对象.. 所以这个写法是不可用的
另外.. 所有的类似空指针的操作.. 在网页上是可以显示的.. 但是在android中.. 会报出上面所说的render error:-2013的错误... 而且不知道如何定位这个错误在哪.. 所以解决报错也是个比较头疼的问题.. 最好拿每天的代码都跑一下手机看看是否有类似报错.. 不然层级太多了都不知道这个错是哪里来的...
2.css代码如百分比不可用
在前端中画圆你可能会用到 border-width:50% 这样的代码来实现一个节点的圆形... 但是这在手机上也是不可用的... weex官网上有解释.. 类似width这种传数字的无论你传什么单位都会被转成px ... 所以以上代码的实际效果就是50px的圆角了... 如果要实现圆形.. 还是要自己传定死的半径进去..
具体还有不可用的css写法参考 : css支持
3.list中必须使用cell标签才可以显示
在网页中.. list中的布局无论放什么都是可以正常展示的.. 但是在手机中... 不用<cell> 包裹的话.. 内容是不予展示的.. 这样设计的考虑可能是涉及到一个复用机制... 在手机中无论是IOS的TableView还是android的listview Recyclerview中的item都是要复用的.. 不然在手机中反复生成item会导致oom.. 所以cell包裹的内容会被复用.. 没被cell包裹的将不会被复用.. 且在list中不显示.. 主要是防止未复用的item过多导致oom所以强制使用的吧
4.很多标签在手机上不支持部分基础css属性
现在发现的主要是在android上margin属性在<cell>标签中是无效的.. 所以要使用margin需要在cell中再使用div包裹一层..
讲道理margin这种基础css属性应该在所有标签上都是生效的.. 但是实际却不是.. 文档中也没有相关提示
5.vue的mvvm控件内部双向绑定问题
vue对于前端的同学可能不会陌生... 这是一个类似mvvm思想的框架,也就是说.. 视图直接和数据绑定了... 在数据改变时直接改变控件对应的视图状态,如下
前面也说过weex是用vue完成代码再在手机上去用原生控件渲染的...
但是vue中会涉及到一个内部控件去改外部参数的问题...如 点击打开链接
控件内部希望修改props中传进来的参数去控制外部状态时.. 会报出 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "xxxx"(参数名)
然后外部参数并没有改变.. 只是内部的变量改变了..
那么怎么办呢.. 其实在vue中可以传入对象作为参数... 而props中的参数是不可变的.. 也就是传入的对象是不可被改变的 但是对象中的参数是可变的..
我的做法就是传入data整个对象.. 里面包含了checkPosition属性... 这样就可以在js中对外部的属性进行修改了
6.android中picasso版本太旧导致部分https地址图片加载有问题
在android项目中对image标签中的地址图片.. 实际上是在用picasso加载的.. 但是它的版本已经比较旧了.. 好像是2.5.2的... 之前还以为是服务器上的图片处理有问题.. 后来在排错之后发现是picasso旧版本对https支持不太好 ... 只要把旧版本的picasso升级.. 再extend下的ImageAdapter的代码用picasso的新版api加载图片.. 就可以解决这个问题了.. 不过也许你也遇不到这个问题.. 并不是所有的https下的图片都不可加载..
三.结论
暂时遇到的坑就这些 .. 但是还是那句话..
别拿weex来做商用!! 坑太多!!!
我这个项目已经入坑了只能硬着头皮做下去.. 后面有新坑我还会回来更新的..
比较完整的学习项目目前只找到
这个项目是用vue router做的跳转.. 没有用navigator实现真正的多页应用.. 不过里面的vue+js+css代码还是有很多可以参考的地方的...