Weex基本操作

发表于 | 分类于
Weex基本操作

常用的几个网址

安装运行

weex-toolkit 是官方提供的一个脚手架命令行工具，你可以使用它进行 Weex 项目的创建，调试以及打包等功能。

1
npm install weex-toolkit -g --registry=https://registry.npm.taobao.org

创建项目

1
weex create demo001

进入项目

1
cd demo001

运行项目

1
npm run web

iOS端 使用

下载源代码

1
git clone https://github.com/apache/incubator-weex.git

incubator-weex–>ios–>sdk–>WeexSDK 目录放到项目里

incubator-weex–>pre-build–>native-bundle-main.js文件放到项目里

这里之所以不用pod引用 是因为WXStorageModule这个类是私有的 所以只能用源代码了

具体代码

添加引用

1
2
#import "WeexSDK.h"
#import "WXStorageModule.h"

在AppDelegate中初始化

1
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool
1
2
3
4
5
6
7
8
9
func initWeex(){
    WXAppConfiguration.setAppGroup("com.saitongedu")
    WXAppConfiguration.setAppName("SaitongPlatform")
    WXAppConfiguration.setAppVersion("1.0")
    WXSDKEngine.registerHandler(MyImgLoader.init(), with: WXImgLoaderProtocol.self)
    WXSDKEngine.registerDefaults()
    WXSDKEngine.initSDKEnvironment()
    WXLog.setLogLevel(.error)
}

其中 MyImgLoader 是用来处理图片的 不自定义的话 无法加载图片

代码如下

支持的图片类型

1
2
3
<image style="width:100px;height:100px" src="https://vuejs.org/images/logo.png"></image>
<image style="width:100px;height:100px" src="data:image/jpeg;base64,iVBORw0..."></image>
<image style="width: 100px; height: 100px;" src="xcassets:d_baibai"></image>

处理代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import Foundation
import Alamofire

class MyImgLoader:NSObject,WXImgLoaderProtocol,WXImageOperationProtocol{
    var downloadRequest:DownloadRequest?
    
    func downloadImage(withURL url: String!, imageFrame: CGRect, userInfo options: [AnyHashable : Any]! = [:], completed completedBlock: ((UIImage?, Error?, Bool) -> Void)!) -> WXImageOperationProtocol! {
        if let url = url{
            if(url.hasPrefix("http")){
                let destination: DownloadRequest.DownloadFileDestination = { _, _ in
                    let documentsURL = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0]
                    let fileURL = documentsURL.appendingPathComponent("temp.png")
                    return (fileURL, [.removePreviousFile, .createIntermediateDirectories])
                }
                
                self.downloadRequest = Alamofire.download(url, to: destination).response { response in
                    if response.error == nil, let imagePath = response.destinationURL?.path {
                        if let image = UIImage(contentsOfFile: imagePath){
                            completedBlock(image,nil,true)
                        }
                    }
                }
            }else if(url.hasPrefix("data")){
                var arr = url.split{ $0 == "," }.map { String($0) };
                let base64Str = arr[arr.count-1]
                if let data = Data.init(base64Encoded: base64Str){
                    if let image = UIImage.init(data: data){
                        completedBlock(image,nil,true)
                    }
                }
            }else if(url.hasPrefix("xcassets:")){
                let imageName = ZJStringUtils.replace(url, replaceStr: "xcassets:", withStr: "")
                if let image = UIImage.init(named: imageName){
                    completedBlock(image,nil,true)
                }
            }
            
        }
        
        return self
    }
    
    func cancel() {
        self.downloadRequest?.cancel()
    }
}

渲染页面

1
2
@IBOutlet weak var weexView: UIView!
var weexUrl:URL!

渲染的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
func renderWeex(){
   let storage = WXStorageModule.init();
    storage.setItem("name", value: "张剑") { (result) in

    }
    weexInstance = WXSDKInstance.init()
    weexInstance.viewController = self
    weexInstance.frame = CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height-64)
    weexInstance.onCreate = {
        view in
        self.weexView.removeFromSuperview()
        self.weexView = view
        self.view.addSubview(self.weexView)
    }

    weexInstance.onFailed = {
        error in
        print("渲染失败")
    }

    weexInstance.renderFinish = {
        view in
        print("渲染完成")
    }

    self.weexUrl = Bundle.main.url(forResource: "index", withExtension: "js");
    weexInstance.render(with: self.weexUrl)
}