Weex開發(fā)總結(jié)

2018年01月21日文章、多段投放策略
16年文章、安卓接入Weex
18年文章、Weex發(fā)布策略
19年文章、weex hotreload
demo：GSYGithubAppWeex
demo：嚴選
Weex運行在iOS客戶端
18年6月、iOS開發(fā)嵌入Weex
Weex官網(wǎng)
單頁面->多頁面
WeexUI
BUI-Weex

1、創(chuàng)建項目前一定想清楚，是多界面項目（navigator跳轉(zhuǎn)），還是單界面項目（路由跳轉(zhuǎn)）。涉及到跳轉(zhuǎn)方法和跳轉(zhuǎn)樣式。
2、認真閱讀官方文檔

開發(fā)界面（個人設置、修改密碼、意見反饋、幫助中心）
相關(guān)記錄：

1、weex文件中配置iOS和安卓json
2、項目安裝相關(guān)工具需注意
3、升級/預加載方案；iOS/Android文件下載
4、多頁面配置（多個JS文件）
5、less使用
6、mixin 函數(shù)混入
7、文件夾結(jié)構(gòu)
8、不使用注入原生方法registerComponent
9、icon-font使用
10、home文件夾中包括template.html、style.css、app.vue單獨創(chuàng)建文件和imgs文件夾
11、百分比不能使用
12、插件：·Vue 2 Snippets ·Vue VSCode Snippets ·Vetur
13、路由跳轉(zhuǎn)動畫
14、beforeEnter
15、iPhone安全距離適配（移動端控制界面）
16、圖片使用base64
17、交互方法：·請求頭 ·用戶信息
18、beforeEach全局安卓路由跳轉(zhuǎn)不好使
19、less不支持嵌套 定義變量可以
20、交互方法：加密問題
21、安卓網(wǎng)絡請求需要增加contentType
22、獲取屏幕寬高
23、iOS Swift注入方法注意參數(shù)前加下劃線 _
24、keep-alive不能使用
25、webView只設置高 不要設置寬
26、無網(wǎng)絡情況如何處理？

  • 網(wǎng)絡請求方法封裝
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>
  • 數(shù)據(jù)存儲
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
  • 點擊態(tài)(按鈕、列表、鏈接)
<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('在初始化內(nèi)部變量，并且添加了事件功能后被觸發(fā)');
    },
    created: function () {
      console.log('完成數(shù)據(jù)綁定之后，模板編譯之前被觸發(fā)');
    },
    ready: function () {
      console.log('模板已經(jīng)編譯并且生成了 Virtual DOM 之后被觸發(fā)');
    },
    destroyed: function () {
      console.log('在頁面被銷毀時調(diào)用');
    }
  }
</script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 最近用weex開發(fā)了新浪眾測app的iOS端（因開發(fā)時間緊迫，前期僅開發(fā)了iOS端，年后會繼續(xù)開發(fā)Android）...
    TRYao閱讀 1,828評論 8贊 17
  • 引子 這篇文章是筆者近期關(guān)于Weex在iOS端的一些研究和實踐心得，和大家一起分享分享，也算是對學習成果的總結(jié)。文...
    一縷殤流化隱半邊冰霜閱讀 12,386評論 53贊 165
  • 1:上拉加載更多使用的函數(shù); 在最開始使用的是loading這個組件;在短鏈接的情況下就會出現(xiàn);滑動就加載;無論是...
    吳高亮閱讀 771評論 0贊 1
  • 首先你需要必備的網(wǎng)站教程： 1.weex官網(wǎng)教程：http://weex.apache.org/cn/guide/...
    微微小筍閱讀 484評論 0贊 0
  • 2016年4月21日，阿里巴巴在Qcon大會上宣布開源跨平臺移動開發(fā)工具Weex，Weex能夠完美兼顧性能與動態(tài)性...
    晴天咚咚閱讀 2,992評論 1贊 15

友情鏈接更多精彩內(nèi)容