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>
网友评论