什么是uni-app

什么是 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)

猜你喜欢

转载自blog.csdn.net/AyayaOVO/article/details/106903268