美文网首页
uniapp + vue 开发安卓app初体验

uniapp + vue 开发安卓app初体验

作者: 小小Bug你别跑 | 来源:发表于2022-11-04 14:46 被阅读0次

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

image.png
好的我们可以看到非常简洁的页面hello 没有world。
然后我们需要创建一个自己模块,也是一个vue单页
image.png
这里可以看到结构基本上是跟vue一致,也支持scss写法,不同的也可以看到这里的根节点变成了view这里我们需要参考一下文档了uni-app
image.png
然后我们再开发中要注意的是uniapp的生命周期与vue的有所不同
image.png
我后这边我们来看路由页面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~

相关文章

网友评论

      本文标题:uniapp + vue 开发安卓app初体验

      本文链接:https://www.haomeiwen.com/subject/ciaytdtx.html