小编半个月接到开发任务,使用uniapp+vue 开发一款安卓的app。由于之前一直没有过uniapp的的实际开发经验所以只能一边摸索一边开发。
首先我们要准备Hbuilder 编辑器生成一个uniapp + vue2版本的项目,然后我们使用Hbuilder启动项目至谷歌浏览器我们先看看效果

好的我们可以看到非常简洁的页面hello 没有world。
然后我们需要创建一个自己模块,也是一个vue单页

这里可以看到结构基本上是跟vue一致,也支持
scss
写法,不同的也可以看到这里的根节点变成了view
这里我们需要参考一下文档了uni-app
然后我们再开发中要注意的是uniapp的生命周期与vue的有所不同

我后这边我们来看路由页面pages.json,没啥特殊要求的照着用就行
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
然后跳转路由uniapp有自己的方法,自己按需使用。
uni.navigateTo(OBJECT)
uni.redirectTo(OBJECT)
uni.reLaunch(OBJECT)
uni.switchTab(OBJECT)
uni.navigateBack(OBJECT)
这样我们就可以先画页面了go~
网友评论