weex 3端开发,初试

weex 屏幕适配原理:分辨率宽度标准为 1000px, html font-size: 100px, 页面的单位自动为 rem 同比缩放。超出高度可以自己控制。

注意事项:
**使用了 commonJS 模块化加载(module.exports, require), weex-router 不支持 直接 export

1. web

npm run build
打包到 dist/index.js 

如:

http://192.168.1.92:8081/dist/index.js?_wx_tpl=http://192.168.1.92:8081/dist/index.js
可以用草科二维码生成二维码网址, 手机上 weexPlayground 扫描查看手机呈现效果


pc 端 (192.168.1.92:8081) 无法 click, 可以引入

<script src="//g.alicdn.com/mtb/weex-static/0.1.7/phantom-limb.js"></script>

2. android

step1: 环境配置:

  1. jdk 版本 1.8, 太高太低都不行
  2. 下载 android sdk
    https://developer.android.google.cn/studio/index.html
  3. 通过 android studio 安装 sdk 的其他包 (如: platforms、platform-tools 等)
  4. 添加环境变量 ANDROID_HOME

    D:\androidsdk\sdk
  5. 环境变量 Path 添加 skd 和 platform-tools 的路径


step2: weex 安装 android 包:

    1. `weex platform add androi`
    2. `weex run android`

依然报错修改:

     1. android/build.gradle 文件里面的依赖包版本问题
ext {
                /*=============*/
                compileSdkVersion=27
                buildToolsVersion="27.0.3"
                minSdkVersion=16
                appMinSdkVersion=16
                targetSdkVersion=27
                supportLibVersion="27.0.2"
                /*=============*/
                fastjsonLibVersion="1.1.46.android"
            }
     2. android/app/build.gradle  文件里面 output 代码修改
android.applicationVariants.all { variant ->
     variant.outputs.all {
         outputFileName = "../weex-app.apk"
     }
 }

文件已上传至 https://github.com/leftHandCat/weex-android-build.gradle

3. ios: window 无法 调试

发布了48 篇原创文章 · 获赞 6 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/github_36327470/article/details/80137985