uni-app刚开始的印象
接触uni-app的原因
主要是找了公司实习,之前学的是vue,公司觉得我有培养的体质,就给我开了实习底薪,够最低生活还有点结余。让后我就来做uni-app项目了。哎,主要是去年考研去了,今年没考上也不想调剂,没有项目经验,实习经验,只能先找家靠谱的公司先学学技术去了。
uni-app感受
就是一个跨端的多平台开发
缺点,程序运行效率不如原生的开发(废话,不然原生开发就被淘汰了)
优点:学过vue上手很快,官方的示例案例很好,创建项目的时候有个Hello uni-app,初学者可以尝试下来用一下,你会发现基本所有的基础功能都有实现,作为初学者,那就直接照着官方的案例走就可以了
学习建议
如果有一定vue基础的同学,或者看视频要开倍速的,说明你已经可以开始通过看文档来学习了。视频可以先看两三集,看看项目最开始是怎么配置的,后面就可以通过结合官方案例和文档来自己学者玩。
uni-app学习记录
终于开始说代码的事情了
项目目录介绍
pages存放的是页面文件,static存放的是静态文件(例如图片),unpackage里面好像是打包的,暂时没用到,pages.json里面是页面路径文件,有点像vue里面的router,里面可以使用tarbar也是微信里面的东西。
数据绑定和按钮绑定
官方的案例上面说的很清楚就是和vue是一样的。v-bind: (简写为:)还有差值表达式也是一样的{{}}
页面直达
有时候我们不想写跳转事件,也不想改变首页页面的顺序,就可以通过在pages.json 里面设置 condition 配置,在微信小程序编译器里面通过设置编译模式切换页面直达
"condition":{
//当前激活的模式
"current":0,
"list":[{
"name":"swiper",
"path":"pages/detail/detail"
},{
"name":"test",
"path":"pages/test/test"
}]
}
input使用
<input :value="detailText" type="text"/>
可以绑定,但是是单向数据绑定,即修改数据不能改变数据源。如果要使用双向数据绑定
<input v-model="detailText" type="text"/>
控制台输出
测试了一下,log可以使用,但是官方有这句话:
注:App 端 debug 方法等同于 log 方法。
所以可能在真机编译上的时候,要用debug,但是这些都是小问题。
插件安装
先把常用的插件安装一下,但是感觉暂时还用不到,先记录一下遇到的坑:less编译插件安装
为什么要手写css/less
我不太清楚前端写ui是否都是通过ui框架来写,但是我用过element-ui,用了之后你就知道什么叫做带着镣铐跳舞,element-ui只是实现了些基本功能,但是如果遇到特殊的需求的时候,你就得自己写css。简单来说就是ui框架只是简化重复内容的编写,但是前端必须要回自己写css。
如何配置Hbuilder中的less
插件市场搜索安装less,然后将打开less的编辑页面。
"extensions": "less",
"key": "ctrl+s",//保存关键快捷键,和保存文件设置一个键位
"showInParentMenu": false,
"onDidSaveExecution": true//快捷键启用
还有一个坑,就是less文件要能成功编译,就是不能有语法错误,我之前就是less有语法错误,没有成功编译,折腾了半天之后发现是我less文件没写对
css文件无法在微信小程序中实现
源代码:
<view class="content">
<text>{{detailText}}</text>
<input v-model="detailText" type="text"/>
<button type="default" @click="clickTest()">点击事件</button>
</view>
解决办法:在外面包裹一个page
<page>
<view class="content">
<text>{{detailText}}</text>
<input v-model="detailText" type="text"/>
<button type="default" @click="clickTest()">点击事件</button>
</view>
</page>
然后css文件就可以了,不知道为什么
路径跳转
uni-app提供了一些路由跳转的方法
navigateTo不能跳转到tarbar的页面,跳转到其他页面不报错
methods: {
routerJump(){
uni.navigateTo({
url: '../detail/detail'
})
}
}
然后也可以携带参数
methods: {
routerJump(){
uni.navigateTo({
url: '../detail/detail?name=uniapp&id=1'
})
}
}
但是这个不好,因为是用相对位置跳转路由的,如果项目文件位置出现了变动,那么就要全部都改一遍。
然后查了很久的csdn,最后发现好像是多端开发,就没有router的必要,比如微信小程序的tarBar。所以要我们自己写路由跳转的方法。
`${}‘语法,注意是反引号,我这里makedown写不出来。注意是反引号
语法介绍
然后具体模拟的方法就看这个了介绍的很详细,而且不熟练ES6语法的也可以借此机会熟悉一下,我就做到第一步,基本解决了我的问题。今天就学这么多,累了。