美文网首页
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