weex

npm install weexpack -g
weexpack platform add ios
npm i ios-deploy --save  --unsafe-perm=true --allow-root
weexpack run ios

 

官網：http://weex.apache.org/cn/guide/

weex-ui：https://alibaba.github.io/weex-ui/#/

使用版本：

weex-loader會將css處理成json加載到模塊style屬性中。必須要使用'weex-vue-loader/lib/style-loader.js'來進行處理。
在native端的Css處理完全不是web端的概念，所以並不存在全局引用樣式，也就是並不需要引入.sass.less.styl文件。
要實現樣式的復用，最終實踐出兩種方法，一種是在vue中多加一個style標簽

<style src="../assets/main.css"></style>

第二種方法是使用預處理器進行導入

<style lang="stylus">
    @import "../assets/main.css"
    
    ...

</style>

配置sass

step1: 安裝依賴

cnpm i node-sass sass-loader -D

step2: 配置loader

在vue-loader.conf.js中

module.exports = (options) => {
  return {
    loaders: utils.cssLoaders({
      // sourceMap: use sourcemao or not.
      sourceMap: options && sourceMapEnabled,
      // useVue: use vue-style-loader or not
      useVue: options && options.useVue,
      // usePostCSS: use postcss to compile styles.
      usePostCSS: options && options.usePostCSS
    }),
    cssSourceMap: sourceMapEnabled,
    cacheBusting: config.dev.cacheBusting,
    lang: { // 加這里
        sass: ['sass-loader']
    }
  }
}

配置jade or pug

step1: 安裝依賴

#安裝支持pug依賴
npm install pug pug-loader pug-filters -D
#安裝支持jade依賴
npm install jade jade-loader -D

step2: 配置rules

打開webpack.common.conf.js，在module的rules節點下添加如下配置：

    module: {
        // webpack 2.0
        rules: useEslint.concat([
            {
                test: /\.pug$/,
                loader: 'pug'
            },
            {
                test: /\.jade$/,
                loader: "jade"
            },
            ... ...

 調試：

Android

Java ：http://www.oracle.com/technetwork/Java/javase/downloads/index-jsp-138363.html

# 編輯.bash_profile
vi ~/.bash_profile

# 添加
# java config
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_181.jdk/Contents/Home
CLASSPAHT=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
PATH=$JAVA_HOME/bin:$PATH:
export JAVA_HOME
export CLASSPATH
export PATH


#保存
:wq

#source
source ~/.bash_profile

 

 

ANDROID_HOME

Mac中第一次使用Android Studio出現unable to access android sdk add-on list的解決方法

打開Finder  --> 在左側的列表中點擊應用程序  --> 然后會在右側的程序列表中看到已經安裝的AndroidStudio  -->  右鍵AndroidStudio的圖標  --> 選擇顯示包內容  --> 會看到一個Contents文件夾  --> 進入Contents文件夾  --> bin\idea.properties  --> 末尾添加一行disable.android.first.run=true

模擬器Genymotion： https://www.genymotion.com/thank-you-trial/?opt=apple_download_link

IOS

安裝

npm install weexpack -g
weexpack platform add ios
npm i ios-deploy --save  --unsafe-perm=true --allow-root weexpack run ios

ruby版本 > 2.5

pod 版本 > 1.5

錯誤：

 

Command run error, please check if there has the same issue here: https://github.com/weexteam/weex-toolkit/issues/337
00:12:56 : Error:Error: Command failed: pod update
/System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/lib/ruby/2.3.0/universal-darwin17/rbconfig.rb:215: warning: Insecure world writable dir /Users/linqiang/.nvm/versions/node/v10.8.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin in PATH, mode 040777
/System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/lib/ruby/2.3.0/rubygems.rb:241:in `bin_path': can't find gem cocoapods (>= 0.a) (Gem::GemNotFoundException)
    from /Users/linqiang/Software/ruby/bin/pod:22:in `<main>'

    at ChildProcess.exithandler (child_process.js:288:12)
    at ChildProcess.emit (events.js:182:13)
    at maybeClose (internal/child_process.js:962:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:249:5)

解決方案：https://github.com/weexteam/weex-toolkit/issues/337#issuecomment-375280748

weex platform add ios

weex run ios

➜  weex-project which openssl
/usr/bin/openssl
➜  weex-project openssl version
LibreSSL 2.2.7
➜  weex-project brew update
Updated 1 tap (homebrew/core).
➜  weex-project brew install openssl
Error: openssl 1.0.2n is already installed
To upgrade to 1.0.2p, run `brew upgrade openssl`
➜  weex-project  brew upgrade openssl
==> Upgrading 1 outdated package, with result:
openssl 1.0.2n -> 1.0.2p
==> Upgrading openssl
==> Downloading https://homebrew.bintray.com/bottles/openssl-1.0.2p.high_sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring openssl-1.0.2p.high_sierra.bottle.tar.gz
==> Caveats
A CA file has been bootstrapped using certificates from the SystemRoots
keychain. To add additional certificates (e.g. the certificates added in
the System keychain), place .pem files in
  /usr/local/etc/openssl/certs

and run
  /usr/local/opt/openssl/bin/c_rehash

This formula is keg-only, which means it was not symlinked into /usr/local,
because Apple has deprecated use of OpenSSL in favor of its own TLS and crypto libraries.

If you need to have this software first in your PATH run:
  echo 'export PATH="/usr/local/opt/openssl/bin:$PATH"' >> ~/.zshrc

For compilers to find this software you may need to set:
    LDFLAGS:  -L/usr/local/opt/openssl/lib
    CPPFLAGS: -I/usr/local/opt/openssl/include
For pkg-config to find this software you may need to set:
    PKG_CONFIG_PATH: /usr/local/opt/openssl/lib/pkgconfig

==> Summary
🍺  /usr/local/Cellar/openssl/1.0.2p: 1,793 files, 12.3MB
➜  weex-project echo 'export PATH="/usr/local/opt/openssl/bin:$PATH"' >> ~/.bash_profile
➜  weex-project source ~/.bash_profile
➜  ~  which openssl
/usr/local/opt/openssl/bin/openssl
➜  ~ openssl version
OpenSSL 1.0.2p  14 Aug 2018
➜  ~ brew install rbenv ruby-build
Updating Homebrew...
==> Installing dependencies for rbenv: ruby-build
==> Installing rbenv dependency: ruby-build
==> Downloading https://github.com/rbenv/ruby-build/archive/v20180618.tar.gz
==> Downloading from https://codeload.github.com/rbenv/ruby-build/tar.gz/v20180618
######################################################################## 100.0%
==> ./install.sh
🍺  /usr/local/Cellar/ruby-build/20180618: 405 files, 204.8KB, built in 9 seconds
==> Installing rbenv
==> Downloading https://homebrew.bintray.com/bottles/rbenv-1.1.1.high_sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring rbenv-1.1.1.high_sierra.bottle.tar.gz
🍺  /usr/local/Cellar/rbenv/1.1.1: 36 files, 62.7KB
➜  ~ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
➜  ~ echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile
➜  ~  source ~/.bash_profile
➜  ~ rbenv install --list
➜  ~ rbenv install 2.5.0
perl version 5.18.2 can't run /USR/BIN/shasum.  Try the alternative(s):

/USR/BIN/shasum5.18 (uses perl 5.18)

Run "man perl" for more information about multiple version support in
Mac OS X.
ruby-build: use openssl from homebrew
Downloading ruby-2.5.0.tar.bz2...
-> https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.0.tar.bz2
➜  ~ rbenv versions
* system (set by /Users/linqiang/.rbenv/version)
  2.5.0
➜  ~  ruby --version
ruby 2.3.7p456 (2018-03-28 revision 63024) [universal.x86_64-darwin17]
➜  ~ rbenv global 2.5.0
➜  ~ sudo gem install cocoapods -n /usr/local/bin
➜  ~  which pod
/USR/LOCAL/BIN/pod
➜  ~  pod --version
/System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/lib/ruby/2.3.0/universal-darwin17/rbconfig.rb:215: warning: Insecure world writable dir /USERS/LINQIANG/.NVM/VERSIONS/NODE/V6.9.3/BIN in PATH, mode 040777
/System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/lib/ruby/2.3.0/rubygems.rb:241:in `bin_path': can't find gem cocoapods (>= 0.a) (Gem::GemNotFoundException)
    from /USERS/LINQIANG/SOFTWARE/RUBY/BIN/pod:22:in `<main>'
➜  ~ ruby -v
ruby 2.5.0p0 (2017-12-25 revision 61468) [x86_64-darwin17]
➜  ~ gem sources -l
*** CURRENT SOURCES ***

https://rubygems.org/
➜  ~ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
➜  ~ sudo gem  install -n /usr/local/bin cocoa pods
➜  ~ pod --version
/Users/linqiang/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/cocoapods-1.5.3/lib/cocoapods/executable.rb:89: warning: Insecure world writable dir /USERS/LINQIANG/.NVM/VERSIONS/NODE/V6.9.3/BIN in PATH, mode 040777
1.5.3

 

Ios 開發問題

ios圖片和字體位置

用xcode打開platform下的ios項目，將圖片和字體直接拖入resource即可，xcode會自動注冊文件

頁面中使用，圖片（這里文件層級可自定義）：

<image style="width:550px;height:296px" src="local://images/loginbg.png"></image>

 字體文件使用，代碼片段：

<template>
    <text :style="{fontFamily: 'wxcIconFont'}"> {{'\ue618'}} </text>
</template>

<script>
const dom = weex.requireModule('dom');
... ...
created () {
    let url = '//at.alicdn.com/t/font_791647_42aasly8hp9.ttf'; // web端
    let platform = weex.config.env.platform.toLowerCase();
    if (platform === 'android') {
        url = 'local:///fonts/iconfont.ttf';
        paddingTop = 50;
    } else if (platform === 'ios') {
        url = 'local://fonts/iconfont.ttf';
    }
    // 引用后可全局使用
    dom.addRule('fontFace', {
        'fontFamily': "wxcIconFont",
        'src': `url('${url}')`
    });
}
... ...
</script>

 ios打包信息配置文件

... .../platforms/ios/WeexDemo/WeexDemo-Info.plist

weex ios input框輸入時，當鍵盤彈出時會遮擋輸入框，weex會自動增加頁面高度，導致頁面底部出現白條

解決方法：修改weexsdk-》WXEditComponent

... ...
#pragma mark keyboard
- (void)keyboardWasShown:(NSNotification*)notification
{
    if(![self.view isFirstResponder]) {
        return;
    }
    CGRect end = [[[notification userInfo] objectForKey:@"UIKeyboardFrameEndUserInfoKey"] CGRectValue];
    _keyboardSize = end.size;
    UIView * rootView = self.weexInstance.rootView;
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGRect keyboardRect = (CGRect){
        .origin.x = 0,
        .origin.y = CGRectGetMaxY(screenRect) - _keyboardSize.height - 54,
        .size = _keyboardSize
    };
    CGRect inputFrame = [self.view.superview convertRect:self.view.frame toView:rootView];
    if (keyboardRect.origin.y - inputFrame.size.height <= inputFrame.origin.y) {
        [self setViewMovedUp:YES];
        // Disable input box to increase base height when keyboard is blocked.
        self.weexInstance.isRootViewFrozen = NO;
    }
    
    if (_keyboardEvent) {
        [self fireEvent:@"keyboard" params:@{ @"isShow": @YES }];
    }
}
... ...

 提交appstore后提示： 缺少出口合規證明

 

解決：info.plist中添加AppUsesNonExemptEncryption 設置為N

 編譯報錯：

Error:Error: Command failed: xcodebuild -workspace WeexDemo.xcworkspace -scheme WeexDemo -configuration Debug -destination id=853CA536-5720-45DD-B6C6-DBF852DEF7ED -sdk iphonesimulator -derivedDataPath build clean build
** BUILD FAILED **

 

 

 

 

 

 

div