uni-app初体验

2017年学过vue,后来零零散散的学了js,css,html等东西
现在前端看来趋势还是不错的.后面可能会转过来
看了五六遍uniapp官网. 我听同事说到uniapp是nvue写的.后来觉得这玩意前端真的需要不断学习.啥都不知道还乱说.nvue 还真的是抄的reactnative

image.png

cn.pornhub.com//彩蛋

抽离全局变量
1.js 新建js文件 . 
const serverUrl = "https://isdk.zaoyx.com/api/"; //测试环境
export default{
    serverUrl,
}
引入在
<script>
    import common from "../../common/common.js"
</script>

2.在app.vue 挂载属性 ,类中直接 this.serverUrl
Vue.prototype.severUrl = "https://isdk.zaoyx.com/api/"; //测试环境

抽离css代码:
新建css文件并写入index.css文件,在需要引入的地方
<style>
    @import url("index.css");
</style>

3.自定义component
创建name = 自定义组件的名字
export 设置data
然后再需要引入的类里面引入这个组件名

项目里面主要用到的是flex布局.
一些官方提供的组件,
下拉刷新和上拉加载组件,
内置的网络请求组件,
video组件,
自己也自定义了个把组件.
segement组件等
以下为三个tab的效果图,做了一个详情页面,只有第三个页面是严格按照其他项目的UI来设计的,前面两个页面是大致类似的.

uniapp.gif
uniapp2.gif image.png image.png image.png

关于微信适配和真机的效果我感觉还是比较满意的.
总结:和Flutter比较之下,感觉uniapp 体验还可以.并不是想象那么差.
要是想搞一套app+小程序(主要是微信小程序),觉得这样的技术还是有优势的.简单的交互还是可以满足的.
对于深层的硬件交互和依赖原生的部分nvue还没试当然也是有很多的不足的地方


前端还是很有趣的.后面php搞完再深入搞一波.

image.png