什么是 uni-app
1 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。 官方的体验例子:
2 uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势 。
uni-app的特点
周边生态丰富
学习成本低
开发成本低
跨端数量更多
平台能力不受限
性能体验更优秀
使用规范
* 页面组件我们要遵循Vue 单文件组件 (SFC) 规范
* 组件标签靠近微信小程序规范
* 接口能力(JS API)靠近微信小程序规范
* 数据绑定及事件处理靠近 Vue.js 规范,同时补充了App及页面的生命周期
* 为兼容多端运行,建议使用flex布局进行开发
开发工具
推荐使用官方提供的HBulderX编辑器
下载地址:https://www.dcloud.io/hbuilderx.html
小程序的调用请求
调用微信小程序的 request 请求
wx.request({
url: ‘https://www.example.com/request’, //仅为示例,并非真实接口地址
data: {
text: ‘uni.request’
},
header: {
‘custom-header’: ‘hello’ //自定义请求头信息
},
success: (res) => {
console.log(res.data);
this.text = ‘request success’;
}
});
使用 uni-app 的 request 请求
uni.request({
url: ‘https://www.example.com/request’, //仅为示例,并非真实接口地址
data: {
text: ‘uni.request’
},
header: {
‘custom-header’: ‘hello’ //自定义请求头信息
},
success: (res) => {
console.log(res.data);
this.text = ‘request success’;
}
});
学习建议
-
别用html的标签,用uni-app提供的组件(感觉和微信小程序好像)
-
使用组件提供的属性和方法
-
ref就h5支持,所以尽量用id代替
-
用v-if别用v-show 在非h5端不支持
-
非h5端不支持组件按需加载(如下)
-
推荐组件之间通讯借助vuex,不然在非h5端的话,会出现props数据改变,但子组件的没对应改变
-
用vuex时 除了h5端 别的端得设置Vue.prototype.$store = store;(注意框架内置了vuex,不用你额外下载npm)