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>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • 最近用weex开发了新浪众测app的iOS端(因开发时间紧迫,前期仅开发了iOS端,年后会继续开发Android)...
    TRYao阅读 1,658评论 8 17
  • 引子 这篇文章是笔者近期关于Weex在iOS端的一些研究和实践心得,和大家一起分享分享,也算是对学习成果的总结。文...
    一缕殇流化隐半边冰霜阅读 12,009评论 53 165
  • 1:上拉加载更多使用的函数; 在最开始使用的是loading这个组件;在短链接的情况下就会出现;滑动就加载;无论是...
    吴高亮阅读 645评论 0 1
  • 首先你需要必备的网站教程: 1.weex官网教程:http://weex.apache.org/cn/guide/...
    微微小笋阅读 385评论 0 0
  • 2016年4月21日,阿里巴巴在Qcon大会上宣布开源跨平台移动开发工具Weex,Weex能够完美兼顾性能与动态性...
    晴天咚咚阅读 2,882评论 1 15