weexpack为啥打开网页

Posted 2023-04-18

参考技术A 、"自适应网页设计"概念
2011Ethan Marcotte提"自适应网页设计"（Responsive Web Design）名词指自识别屏幕宽度、并做相应调整网页设计
自适应网页设计"底做其实并难
首先网页代码部加入行viewport元标签
　　
viewport网页默认宽度高度面行代码意思网页宽度默认等于屏幕宽度（width=device-width）原始缩放比例（initial-scale=1）1.0即网页初始占屏幕面积100%
所主流浏览器都支持设置包括IE9于些式浏览器（主要IE6、7、8）需要使用css3-mediaqueries.js
　　
三、使用绝宽度
由于网页根据屏幕宽度调整布局所能使用绝宽度布局能使用具绝宽度元素条非重要
具体说CSS代码能指定像素宽度：
　　width:xxx px;
能指定百比宽度：
　　width: xx%;
或者
　　width:auto;
四、相字体
字体能使用绝（px）能使用相（em）
　　body
　　　　font: normal 100% Helvetica, Arial, sans-serif;
　　
面代码指定字体页面默认100%即16像素
　　h1
　　　　font-size: 1.5em;
　　
h1默认1.5倍即24像素（24/16=1.5）
　　small
　　　　font-size: 0.875em;
　　
small元素默认0.875倍即14像素（14/16=0.875）
五、流布局（fluid grid）
"流布局"含义各区块位置都浮固定变
　　.main
　　　　float: right;
　　　　width: 70%;
　　
　　.leftBar
　　　　float: left;
　　　　width: 25%;
　　
float处宽度太放两元素面元素自滚前面元素水平向overflow（溢）避免水平滚条现
另外绝定位（position: absolute）使用要非
六、选择加载CSS
"自适应网页设计"核CSS3引入Media Query模块
意思自探测屏幕宽度加载相应CSS文件
　　<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" />
面代码意思屏幕宽度于400像素（max-device-width: 400px）加载tinyScreen.css文件
　　<link rel="stylesheet" type="text/css"
　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
　　　　href="smallScreen.css" />
屏幕宽度400像素600像素间则加载smallScreen.css文件
除用html标签加载CSS文件现CSS文件加载
　　@import url("tinyScreen.css") screen and (max-device-width: 400px);
七、CSS@media规则
同CSS文件根据同屏幕辨率选择应用同CSS规则
　　@media screen and (max-device-width: 400px)
　　　　.column
　　　　　　float: none;
　　　　　　width:auto;
　　　　
　　　　#sidebar
　　　　　　display:none;
　　　　
　　
面代码意思屏幕宽度于400像素则column块取消浮（float:none）、宽度自调节（width:auto）sidebar块显示（display:none）
八、图片自适应（fluid image）
除布局文本"自适应网页设计"必须实现图片自缩放
要行CSS代码：
　　img max-width: 100%;
行代码于数嵌入网页视频效所写：
　　img, object max-width: 100%;
版本IE支持max-width所写：
　　img width: 100%;
外windows平台缩放图片能现图像失真现象尝试使用IE专命令：
　　img -ms-interpolation-mode: bicubic;
或者Ethan MarcotteimgSizer.js
　　addLoadEvent(function()
　　　　var imgs = document.getElementById("content").getElementsByTagName("img");
　　　　imgSizer.collate(imgs);
　　);
条件根据同屏幕加载同辨率图片做条服务器端客户端都实现

weex 与 weexpack 环境搭建

weex 与 weexpack

weex init 会生成一个 weex 项目， 里面有weex, vue 模板。如果要开发 Android，需要建一个 Android 项目。

weexpack, 可以帮助搭建 Android 和 iOS 项目

 

---------------------- weex ------------------------------------------------------------

一、安装依赖

1. 安装Nodejs, 可以使用nvm 或 n 等版本管理工具来搭建不同版本的Nodejs, 或直接使用 Homebrew 安装

 1 $ brew install nvm 
 3 $ nvm install v8.5.0
 5 $ node -v
 7 $ npm -v
 9 $ npm install -g weex-toolkit

2. 安装 weex-toolkit

1 $ yarn global add weex-toolkit
2 $ weex -v

也可以使用 weex 验证是否安装成功

1 $ weex

二、初始化

1 $ weex init project-name

创建了一个使用 Weex 和 Vue 的模板项目。

包含如下目录

README.md config  public
build  package.json src

三、开发

之后我们进入项目所在路径，weex-toolkit 已经为我们生成了标准项目结构。

在 package.json 中，已经配置好了几个常用的 npm script，分别是：

• build: 源码打包，生成 JS Bundle
• dev: webpack watch 模式，方便开发
• serve: 开启静态服务器
• debug: 调试模式

我们先通过 npm install 安装项目依赖。之后运行 npm run dev 和 npm run serve 开启watch 模式和静态服务器。

然后我们打开浏览器，进入 http://localhost:8080/index.html 即可看到 weex h5 页面。

初始化时已经为我们创建了基本的示例，我们可以在 src/foo.vue 中查看。

 

---------------------- weexpack ------------------------------------------------------------

一、安装

1. 确保Nodejs 版本大于6.0

1 $ node -v
2 $ npm -v

2. 可以通过 weex create 命令提示安装，也可以手动安装

1 $ yarn global add weexpack

3. 生成 weexpack 项目

1 $ weex create project-name
2 // 或
3 $ weexpack create project-name


// 生成如下目录

README.md        package.json        start.bat
android.config.json    platforms        tools
config.xml        plugins            web
hooks            src            webpack.config.js
ios.config.json        start            webpack.dev.js

• 注意， 项目里没有 android 和 ios 模板， 需要手动添加插件

4. 安装项目的依赖

1 $ yarn install
2 // 或
3 $yarn 

5. 安装应用模板， 生成 Android 和 iOS 工程

1 $ weexpack platform add/remove android
2 $ weexpack platform add/remove ios
3 // 或
4 $ weex platform add/remove android
5 $ weex platform add/remove ios

执行成功后在 platforms 目录生成 android, ios 目录

安装指定版本，weexpack android 版本从6.0.0开始

1 $ weexpack platform add [email protected]6.2.1
2 // 或
3 $ weex platform add [email protected]6.2.1

6. 打包 apk

• android

1 $ weexpack run android
2 // 或
3 $ weex run android

注意:android.config.json 或者 ios.config.json中的信息

　　AppName: 生成的apk安装后的应用名

　　AppId:application_id 包名

　　SplashText: 打开后欢迎页上面的展示文字

　　WeexBundle:指定的weex bundle文件（支持文件名和url的形式）

　　文件名则以本地文件的方式加载bundle,url则以远程的方式加载bundle 如果以本地方式指定bundle .we文件请放到src目录。

• ios

　　模拟器运行

1 $ weexpack run ios
2 // 或
3 $weex run ios

　　构建 ipa

1 $ weexpack build ios
2 // 或
3 $ weex build ios

构建包的过程中，将会提示让您输入CodeSign（证书）
，Profile(provisioning profile),AppId，只有输入真实的这些信息才能成功打包。 其余如AppName,和入口weex bundle文件可以编辑项目目录下的ios.config.json配置。 打完包成功之后，可以在/playground/build/ipa_build/目录下获取ipa文件
注：证书需要预先安装到keychain中，在keychain中点击右键获取证书id（证书名称），provisioning profile文件（*mobileprovision）需要获取UUID，进入目录 可以看到mobileprovision_UUID.sh文件，此文件可以获取到UUID
mobileprovision_UUID.sh用法如下： $ ./mobileprovision_UUID.sh *mobileprovision
参数（*mobileprovision）为provisioning profile文件路径

7. html5 打包

1 $ weexpack build web
2 // 或
3 $ weex build web

这样你可以把打包后的资源上传到cdn服务器，然后上线你的web项目。

在html5平台上运行

1 $ weexpack run web
2 // 或
3 $ weex run web

8. 查看已安装的平台模版及版本

1 $ weexpack platform list

9. 打包应用并安装到设备运行

1 $ weexpack platform run

10. 插件使用者命令, 安装、移除插件

1 $ weexpack plugin add/remove

11. 插件开发者命令

市场账号登录、登出

1 $ weexpack plugin login/logout

生成插件模板

1 $ weexpack plugin create

同步插件市场（不会做发布npm，针对npm已发布的包）[--ali] 可选参数

1 $ weexpack plugin sync

 

环境要求

• 目前支持 Mac、windows、linux平台(windows下仅能打包android)。
• 配置 Node.js 环境，并且安装 npm 包管理器。(需要node6.0+)
• 如果要支持 iOS 平台则需要配置 iOS 开发环境：
  • 安装 Xcode IDE ，启动一次 Xcode ，使 Xcode 自动安装开发者工具和确认使用协议。
  • 安装 cocoaPods。
• 如果要支持 Android 平台则需要配置 Android 开发环境：
  • 安装 Android Studio（推荐）或者 Android SDK。打开 AVD Manager ，新建 Android 模拟器并启动 。（如果有安装 Docker ，请关闭 Docker Server 。）
  • 保证Android build-tool的版本为23.0.2。