weex+android原生开发学习笔记（四）

 

 

1、input type动态设置不成功问题？

    解决参考1：http://www.mamicode.com/info-detail-2180938.html   依然不成功
    
    解决参考2：https://blog.csdn.net/qq_27731445/article/details/79501300  扩展android原生组件用weex引擎引入到weex库，给weex调用；考虑到还有ios端所以就先放弃这个功能
    
    input标签的type不支持动态修改，尝试:type也无法实现，在查看相关SDK源码发现也只是对type加注解，这方法只会在初始化时执行一次。 

    注： 最新版的weex sdk是支持的

2、android端manifest中对activity设置intent-filter的data属性和解释：
    我的整理：https://blog.csdn.net/u010326875/article/details/84869767
    
3、整理android端集成阿里云视频点播播放器

    记录整理：https://blog.csdn.net/u010326875/article/details/84941820
    
    有需要demo源码的私我（QQ:1105230742）

4、android端对module打包成jar报错：

    参考：https://blog.csdn.net/ymlvtimi/article/details/82251880

    * What went wrong:
    Could not resolve all files for configuration ':JdyVideo:lintClassPath'.
    > Could not download groovy-all.jar (org.codehaus.groovy:groovy-all:2.4.12)
    
    解决：1》、设置→ gradle（android）勾选（Enable embedded Maven repository）
    
          2》、第一不行的话，修改下面google
                google（）替换成 maven { url ‘https://dl.google.com/dl/android/maven2/’ } 
    
    编译module成jar和arr的配置：
            https://blog.csdn.net/github_27263697/article/details/79868363
            
5、android端扩展组件给weex调用：

        参考：http://weex.apache.org/cn/guide/extend-android.html  有示例可参考
        
        扩展组件继承：WXComponent<T>
        扩展布局容器继承： WXVContainer<LinearLayout>
        
        注意一点：  这个在weex端不需要引入即可使用
        
        1》、android端创建扩展的组件：
            
                public class RichText extends WXComponent<TextView> {

                    public RichText(WXSDKInstance instance, WXDomObject dom, WXVContainer parent) {
                        super(instance, dom, parent);
                    }

                    @Override
                    protected TextView initComponentHostView(@NonNull Context context) {
                        TextView textView = new TextView(context);
                        textView.setTextSize(20);
                        textView.setTextColor(Color.BLACK);
                        return textView;
                    }

                    @WXComponentProp(name = "tel")
                    public void setTel(String telNumber) {
                        getHostView().setText("tel: " + telNumber);
                    }
                }
        2》、android端Application中注册组件：
        
            WXSDKEngine.registerComponent("richText", RichText.class);
            
        3》、weex端直接使用即可，不需要引入：
        
            <template>
              <div>
                <richText tel="12305" style="width:200;height:100">12305</richText>
              </div>
            </template>
        
6、    weex扩展阿里云视频组件，报错：

    错误：反射出错，找不到阿里云的so文件（aliffmpeg.so）
    
    解决：https://help.aliyun.com/document_detail/61908.html?spm=a2c4g.11186623.6.846.6a394658HtpOI8  
    
    1》、文档要求 ：  播放器SDK支持Android4.0以上。手机芯片要求armv7或arm64架构。
        所以需要配置ndk支持 armv7或arm64架构
            ndk {
                // 根据需要选择添加对应cpu类型的.so库（还可以添加 'arm64-v8a', 'x86_64', 'mips', 'mips64'）
                abiFilters 'armeabi-v7a', 'armeabi', 'x86'
            }
    2》、修改项目根目录下的 build.gradle
                repositories {
                    google()
                    jcenter()
                    maven { url "https://dl.bintray.com/alibabaweex/maven" }
                }
    3》、在依赖工程里build.gradle添加依赖：
    
            implementation 'com.aliyun.dpa:oss-android-sdk:2.7.3'
            
            //阿里云播放器
            api(name: 'AlivcPlayer-3.4.8', ext: 'aar')
            api(name: 'AlivcReporter-1.2', ext: 'aar')
        
    4》、扩展的组件错误解决（扩展布局容器）：
    
        public class aliPlayer extends WXVContainer<LinearLayout> {

            WXSDKInstance instance;
            private LinearLayout hostView;
            private VideoViewLayout videoPlayer;

            public JdyVideoPlayer(WXSDKInstance instance, WXVContainer parent, BasicComponentData basicComponentData){
                super(instance,parent,basicComponentData);
                this.instance=instance;
            }

            @Override
            protected LinearLayout initComponentHostView(@NonNull Context context) {
                hostView = (LinearLayout)LayoutInflater.from(instance.getContext()).inflate(R.layout.ali_video_player,null);
                videoPlayer = hostView.findViewById(R.id.videoPlayer);
                return hostView;
            }
            
            //当然对应的也有生命周期方法
            @Override
            public void onActivityResume() {
                super.onActivityResume();
                if(videoPlayer!=null){
                    videoPlayer.onResume();
                }
            }

            @Override
            public void onActivityPause() {
                super.onActivityPause();
                if(videoPlayer!=null){
                    videoPlayer.onPause();
                }
            }

            /**
             * 开始播放视频
             * @param videoUrl String （支持点播Url和Mp4 Url）
             * @WXComponentProp  方法名 startPlay
             */
            @WXComponentProp(name = "startPlay")
            public void startPlay(final String videoUrl) {
                videoPlayer.startPlay(videoUrl);
            }

        }
        
7、    android端@Getter和@Setter解释：

    参考：https://www.jianshu.com/p/93353398e964
        
8、涉及到android端的几个工具：

    1》、Android-Debug-Database （参考：https://github.com/amitshekhariitbhu/Android-Debug-Database）
        https://blog.csdn.net/u012381726/article/details/60140939
        查看手机中的数据库文件，利用这个库，我们可以通过浏览器方便的查看的数据库啦，并且可以执行SQL语句
        
    2》、AndroidUtilCode （参考：https://github.com/Blankj/AndroidUtilCode）
            
        android端有人整理好的工具库
    
    3》、TinyDB  （参考：https://github.com/kcochibili/TinyDB--Android-Shared-Preferences-Turbo）
        sharedPreference存储的封装，方便存储直接存储对象等
        
9、weex实现时间轴组件：
    
    https://blog.csdn.net/u010326875/article/details/84976863
    
10、android端代码，着重字体颜色  ， 全变成蓝色，改成android studio默认的着重颜色：

    电脑打开C盘，找到自己用户（C:\Users\baiyi），删除android和android studio包（.android、.AndroidStudio3.2），打开android studio然后选择custom手动配置sdk，初始化下载即可；然后自己配置android studio的字体大小

11、weex实现text组件内容单行展示：
    .textSingleLine{
        lines:1;
        white-space: nowrap; /*//文本强制不换行；*/
        text-overflow:ellipsis; /*//文本溢出显示省略号；*/
        overflow:hidden; /*//溢出的部分隐藏；*/
    }

12、weex中，text内容换行使用：

    错误写法：
        <text> 只能删除状态为“草稿”  \n 的领用记录！！！ </text>
    
    正确写法：
        data中声明：errorPopWindowText:'只能删除状态为“草稿” \n 的领用记录！！！'
        <text> {{ errorPopWindowText }} </text>
        
13、自定义控件，不要再div标签里做计算，不然耗时出不来：

    错误写法：
        <template>
            <div class="addModifyDeleteContainer" :style="{width: (windowWidth+10)+'px',marginLeft:((750-windowWidth)/2)+'px',marginTop:windowMarginTop+'px'}">
                <slot name="content"></slot>
                <text v-if="isShowClose" class="closeButton" :style="{width:( windowWidth-10)+'px'}" @click="textClick"> 关闭 </text>
            </div>
        </template>
            
        这样写是不对的：    
        :style="{width: (windowWidth+10)+'px',marginLeft:((750-windowWidth)/2)+'px',marginTop:windowMarginTop+'px'}
        
    正确写法：
        在class里指定即可
        <div class="addModifyDeleteContainer">
                <slot name="content"></slot>
                <text v-if="isShowClose" class="closeButton" @click="textClick"> 关闭 </text>
        </div>
        
14、js判断对象object是字符串还是数字或其他类型

    let typeString = typeof objString;
    
    typeof的类型：string、number、boolean 等等
    
15、js验证密码，大小写字母数字特殊字符和位数：

             /**
             * 校验密码  密码最少为6位，包括至少一个大写字母，1个小写字母，1个数字，1个特殊字符！
             * let pattern = /^.*(?=.{6,})(?=.*\d{1,})(?=.*[A-Z]{1,})(?=.*[a-z]{1,})(?=.*[!@#$%^&*?\(\)]{1,}).*$/;
             * */
            checkPassword(password){
                if(password===''){
                    return false;
                }
                let upperChar =/^.*(?=.*[A-Z]{1,}).*$/;
                if(!upperChar.test(password)){
                    this.errorTips='没有包含大写字母';
                    return false;
                }
                var lowerChar =/^.*(?=.*[a-z]{1,}).*$/;
                if(!lowerChar.test(password)){
                    this.errorTips='没有包含小写字母';
                    return false;
                }
                var numberChar =/^.*(?=.*\d{1,}).*$/;
                if(!numberChar.test(password)){
                    this.errorTips='没有包含数字';
                    return false;
                }
                if(password.length<6){
                    this.errorTips='密码最少为6位';
                    return false;
                }

                //var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
                var pattern =/^.*(?=.*[!@#$%^&*?\(\)]{1,}).*$/;
                if(!pattern.test(password)){
                    this.errorTips='没有包含特殊字符';
                    return false;
                }
                this.errorTips='';
                return true;
            },
        
16、weex js的es6合并数组：

        self.resultList=[...result.data.resultList,self.resultList];//ES6合并数组
        
17、weex屏幕的高度，使用weex-ui：

    Utils.env.getPageHeight()+90 ；导航栏高度90
    
18、js操作数组的方法：

    基础数组：https://blog.csdn.net/museions/article/details/78491040  介绍很详细，感谢