Weex开发总结

2018年01月21日文章、多段投放策略
16年文章、安卓接入Weex
18年文章、Weex发布策略
19年文章、weex hotreload
demo：GSYGithubAppWeex
demo：严选
Weex运行在iOS客户端
18年6月、iOS开发嵌入Weex
Weex官网
单页面->多页面
WeexUI
BUI-Weex

1、创建项目前一定想清楚，是多界面项目（navigator跳转），还是单界面项目（路由跳转）。涉及到跳转方法和跳转样式。
2、认真阅读官方文档

开发界面（个人设置、修改密码、意见反馈、帮助中心）
相关记录：

1、weex文件中配置iOS和安卓json
2、项目安装相关工具需注意
3、升级/预加载方案；iOS/Android文件下载
4、多页面配置（多个JS文件）
5、less使用
6、mixin 函数混入
7、文件夹结构
8、不使用注入原生方法registerComponent
9、icon-font使用
10、home文件夹中包括template.html、style.css、app.vue单独创建文件和imgs文件夹
11、百分比不能使用
12、插件：·Vue 2 Snippets ·Vue VSCode Snippets ·Vetur
13、路由跳转动画
14、beforeEnter
15、iPhone安全距离适配（移动端控制界面）
16、图片使用base64
17、交互方法：·请求头 ·用户信息
18、beforeEach全局安卓路由跳转不好使
19、less不支持嵌套 定义变量可以
20、交互方法：加密问题
21、安卓网络请求需要增加contentType
22、获取屏幕宽高
23、iOS Swift注入方法注意参数前加下划线 _
24、keep-alive不能使用
25、webView只设置高 不要设置宽
26、无网络情况如何处理？

• 网络请求方法封装

const stream = weex.requireModule('stream') || {};
const modal = weex.requireModule('modal') || {};
const eventModule = weex.requireModule('event') || {};

export let doPost = function (url, params, headerParam) {
    headerParam['Content-Type'] = 'application/json'
    let promise = new Promise((resolve, reject) => {
        stream.fetch({
            method: 'POST',
            headers: headerParam,
            type: "json",
            url: url,
            body: JSON.stringify(params)
        }, function (res) {
            if (res.ok) {
                if (res.data.returnCode == '200') {
                    resolve(res.data)
                } else if (res.data.returnCode == '1111') {
                    weex.requireModule('event').forceExit("强制退出")
                } else {
                    if (res.data && res.data.message) {
                        modal.toast(
                            {
                                message: res.data.message,
                                duration: 2
                            }
                        )
                    }
                    reject(res.data)
                }
            } else {
                reject(res.data)
            }
        })
    });
    return promise
};

• 请求地址存放处
• 请求的域名

let csUrl = 'http://pj-h5.zhengheht.com/cfpapp/';
let zscUrl = 'https://cfpapp.puxinzichan.com/cfpapp/';
let scUrl = 'https://cfpapp.puxinasset.com/cfpapp/';

let webCsUrl = 'http://cfpapp.zhengheht.com/';
let webZscUrl = 'http://cfpapp.puxinzichan.com/';
let webScUrl = 'https://cfpapp.puxinasset.com/';

let baseUrl = zscUrl;
let baseWebUrl = webScUrl;
let urlConfig = {
    //命名都使用大写的
    APP_GETDATA_URL: baseUrl + "",
    APP_FEED_BACK_URL: baseUrl + "user/savefeedback", //保存意见反馈接口地址
    APP_MODIFYPWD_URL: baseUrl + "employee/updatepwd",//修改密码接口地址
    APP_PERSONCENTER_URL: baseUrl + "employee/getuser",//个人中心接口地址

    APP_WEB_HELP_URL: baseWebUrl + "help.html" // 帮助中心
}

export default urlConfig

• 导航栏封装（进一步封装weexUI的topBar，图片使用base64）

• 数据存储

const storage = weex.requireModule('storage')

const storageName = {
    testKey: 'testKey'
}

let appToken = {

    setItem(key, value) {
        return new Promise((resolve, reject) => {
            if (!key) {
                reject('key is empty ！！！')
                return
            }
            storage.setItem(key, value, event => {
                event.result === 'success' ? resolve() : reject()
            })
        })
    },

    getItem(key) {
        return new Promise((resolve, reject) => {
            if (!key) {
                reject('key is empty ！！！')
                return
            }
            storage.getItem(key, event => {
                console.log('value:', event.data)
                event.result === 'success' ? resolve(event.data) : reject('读取失败~')
            })
        })
    },

    removeItem(key) {
        return new Promise((resolve, reject) => {
            if (!key) {
                reject('key is empty ！！！')
                return
            }
            storage.removeItem(key, event => {
                console.log('delete value:', event.data)
                event.result === 'success' ? resolve() : reject('删除失败~')
            })
        })
    },

    length() {
        return new Promise((resolve, reject) => {
            storage.length(event => {
                console.log('storage length :', event.data)
                event.result === 'success' ? resolve(event.data) : reject('获取长度失败~')
            })
        })
    },

    getAllKeys() {
        return new Promise((resolve, reject) => {
            storage.getAllKeys(event => {
                console.log('storage length :', event.data)
                event.result === 'success' ? resolve('props: ' + event.data.join(', ')) : reject('获取所有key失败~')
            })
        })
    }
}
export default appToken

• 点击态(按钮、列表、链接)

• 设备标识（iPhone X适配）

weex.config.env.deviceModel

• 计算属性和 class 绑定（判断机型，适配屏幕）

• 生命周期