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）

<template>
    <div>
         <!-- <wxc-minibar :title="title"
                   :background-color="backgroundColor"
                   :text-color="textColor"
                   :right-text="rightText"
                   :show="show"
                   :use-default-return="false"
                   @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
                   @wxcMinibarRightButtonClicked="minibarRightButtonClick" :bar-style="barStyle"></wxc-minibar> -->
        <wxc-minibar :background-color="backgroundColor">
            <image slot="left"
             :src="leftImageData"
             style="height: 58px;width: 70px;" @click="minibarLeftButtonClick"></image>
            <text style="font-size: 36px;" :style="textColor" slot="middle">{{title}}</text>
            <image slot="right"
            :src="rightImageData"
            style="height: 32px;width: 40px"
            @wxcMinibarRightButtonClicked="minibarRightButtonClick"></image>
        </wxc-minibar>
        
    </div>
</template>

<script>
import { WxcMinibar } from "weex-ui";
export default {
  components: {
    WxcMinibar
  },
  props: {
      leftImageData: {
          type: String,
          default: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8BAMAAADI0sRBAAAAElBMVEUAAABmZmZnZ2eAgIBmZmZmZmb8PkZWAAAABXRSTlMAlqMCeO2WwHwAAAA3SURBVDjLYxgFAw9E8MoyhjrgkxYNVcCrOcgAr2blUc1DQzNYmoDho9qHpHYFcrI/ovAYBQMLAAQNF5+vSNttAAAAAElFTkSuQmCC"
      },
      rightImageData: {
          type: String,
          default: ""
      },
    title: {
      type: String,
      default: ""
    },
    backgroundColor: {
      type: String,
      default: "#ffffff"
    },
    textColor: {
      type: Object,
      default: {
        color: "#666666"
      }
    },
    rightText: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: true
    },
    // 是否要重写leftClick方法（false不会走go(-1)）
    isGo: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      key: 123
    };
  },
  methods: {
    minibarLeftButtonClick() {
      this.$emit("leftClick");

      if (this.isGo) {
        this.$router.go(-1);
      }
    },
    minibarRightButtonClick() {
      this.$emit("rightClick");
    }
  }
};
</script>

<style scoped >
</style>

数据存储

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

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

<template> 
    <div class="ui-btn">
        <text class="ui-btn-text">下载</text>
    </div>
</template>
<style scoped>
    .ui-btn{
        opacity: 1; /*必须添加*/
    }
    .ui-btn:active{
        opacity: .5;
    }
</style>

设备标识（iPhone X适配）

weex.config.env.deviceModel

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

<template>
    <div :class="['wrapper', isipx?'w-ipx':'']">
    </div>
</template>
<script>
    export default {
        data () {},
        computed:{
            isipx:function () {
                return weex && (weex.config.env.deviceModel === 'iPhone10,3' || weex.config.env.deviceModel === 'iPhone10,6');
            }
        },
    }
</script>
<style scoped>
    .wrapper{
        /* 正常样式 */
    }
    .w-ipx{
        /* iPhone X 样式 */
    }
</style>

生命周期

<script>
  module.exports = {
    data: {},
    methods: {},
    init: function () {
      console.log('在初始化内部变量，并且添加了事件功能后被触发');
    },
    created: function () {
      console.log('完成数据绑定之后，模板编译之前被触发');
    },
    ready: function () {
      console.log('模板已经编译并且生成了 Virtual DOM 之后被触发');
    },
    destroyed: function () {
      console.log('在页面被销毁时调用');
    }
  }
</script>

Weex开发总结

推荐阅读更多精彩内容