关于weex 开发
1.安装weex
在开发时,如果需要从头开始部署项目,需要安装weex 然后使用weex构建项目(此步骤在官方文档中有,不再描述)
如果是多页面开发,在初始化构建项目时,选择不使用vue-router(使用weex create app时,会有此选项)
在创建项目的最后一步(weex create app的最后一步)会询问你使用npm 安装还是yarn安装依赖,在此步骤时,我选择npm或者yarn安装依赖后都会出错,所以我选择第三项步进行安装,然后进入文件目录 执行
npm i
,自己手动安装依赖在安装过程中出现的错误,多数都可以解决,读取他的报错信息,不会的就百度,百度看完前十页,如果还解决不了就讨论
2.关于weex 中样式和标签问题
样式单位中目前只能使用 px
image 标签使用时一定要定义宽高,注意使用
resize
的属性,并且image标签只能够使用px
3.关于weex stream发其post请求示例
stream中get方法提交的参数必须组织出来放到url中
stream中post方法提交的参数需要转换成
key=value&key=value
的形式,可以使用utils/utils.js
中的toParams
方法来转换post请求时注意添加 headers ,
{"Content-Type": 'application/x-www-form-urlencoded'}
//post请求
stream.fetch({
url:'/login/login',
method:'post',
type:'json',
headers:{"Content-Type": 'application/x-www-form-urlencoded'},
body:utils.toParams({
name: u,
password: p,
ip: '192.168.191.1',
mac: '00:00:00:00:00',
platform: 2,
version: 'Version_0.1',
address: '',
device: SystemUtils.getExplore(),
system: SystemUtils.getOS()
})
}, function(ret) {
if(!ret.ok){
// me.getJsonpResult = "request failed";
console.log('chucuo')
}else{
console.log(JSON.stringify(ret));
// me.getJsonpResult = JSON.stringify(ret.data);
}
})
4.关于weex stream
进行了一次简单的封装,主要是简单封装了get方法和post方法,详细代码查看
utils/req.js
将基础的url单独抽出来配置在
utils/baseConfig.js
,详细代码查看utils/baseConfig.js
将api接口 单独抽出来配置在
utils/api.js
,详细代码查看utils/api.js
一个简单的调用示例demo
//post请求
//引入所需要的配置文件
import utils from '../utils/utils.js'
import $_http from '../utils/req.js'
import api from '../utils/api.js'
import SystemUtils from '../utils/SystemUtils.js'
//methods里面的方法
postUserData(u,p){
let that = this
let url = api.LOGIN_URL //配置在api中的url
let params = {
name: u,
password: p,
ip: '192.168.191.1',
mac: '00:00:00:00:00',
platform: 2,
version: 'Version_0.1',
address: '',
device: SystemUtils.getExplore(),
system: SystemUtils.getOS()
}
let successFunc = function(d){
let data = JSON.parse(d)
if(data.meta.success){
console.log(data.data.uid)
that.setItem('uid',data.data.uid,(e)=>{
if(e.result==='success'){
that.jumpPage()
}
})
}
}
$_http.post(url,params,successFunc)
}
//get请求
import $_http from "../utils/req.js";
import api from "../utils/api.js";
getTypeData() {
let that = this;
let url = api.TYPEONE_URL;
let sccuessFunc = function(d) {
let typeData = JSON.parse(d);
that.typeDataList = typeData.data;
};
$_http.get(url, {}, sccuessFunc);
}
5. 本地图片路径
- 本地图片路径基于 web端运行时的相对路径,如果运行的项目为
dist/index.js
,在与dist
同级下有个images
的文件夹,那么在index中引入图片的路径为../images/*.png
6. 传值问题
正向传值:可以在navigator中直接push,如
url: utils.getJumpBaseUrl("WorkPage.js?id=123"),
在下个页面使用以下方法收取参数var bundleUrl = this.$getConfig().bundleUrl;this.id = utils.getParameterByName("id", bundleUrl);
反向传值:使用
BroadcastChannel
进行通信,
资料
//父页面
var self = this;
// 定义BroadcastChannel,用于响应子页面发来的广播
const broadcast = new BroadcastChannel('testChannel')
broadcast.onmessage = function (event) {
self.title = event.data;
}
//子页面,发送消息,并pop
goBack(){
// 发送通知消息
const broadcast= new BroadcastChannel('testChannel');
broadcast.postMessage('this is amessage.');
navigator.pop()
}
7. stroage问题
- stroage.getItem是异步