看完这篇，你也能轻松开发一个App

Xwaiy
117 阅读7分钟

哈喽，大家好，欢迎回到小码农岛！在公众号：小码农岛 后台回复 idea，免费送你激活码，快来领取吧，机会难得哦！（仅供学习用，企业开发建议付费订阅）

最近收到好多小伙伴的提问：

"一个项目要开发小程序、H5、App，这代码得写好几遍吧？"

"有没有什么框架能一次开发，处处运行的？"

"听说Vue能开发小程序，是真的吗？"

今天我就给大家推荐一个：uniapp！这是一个基于Vue的跨端开发框架，写一次代码就能发布到各个平台，彻底解决"一个项目写多遍"的痛点。用过的小伙伴都说真香！

为什么要选uniapp？

你们想啊，要是有个工具，让你写一次代码，想发布到哪儿就发布到哪儿，多爽？UniApp就是干这个的！

微信小程序？一键搞定！H5？分分钟的事！App？也不在话下！

最妙的是啥？你只要会Vue，就能直接上手！这不就是我们梦寐以求的"躺平神器"吗？

搭建开发环境

首先呢，要下载个HBuilderX，这就是咱们的主力开发工具了。

官网地址在这：www.dcloud.io/hbuilderx.h…

HBuilder X官网

小提示： 如果你点链接发现打不开，可能是网络调皮或者链接迷路了。检查下你的网络，或者手动把链接复制到浏览器地址栏，再试一次。 下载完之后呢，咱们要做几件舒服的事：

先选个养眼的主题

主题设置： 选择 【工具】 然后点击 【主题】

我喜欢暗色，毕竟咱们经常熬夜coding

主题设置

调整下字体（代码看着舒服，心情也好）

字体设置： 选择 【工具】 然后点击 【设置】

字体设置

装几个实用插件（工具->插件安装）

插件安装： 选择 【工具】 然后点击 【插件安装】

安装插件

HBuilderX内置了很多常用插件，如果不够，你还可以自己去插件市场下载安装。

前往插件市场

创建第一个项目

新建项目

新建项目肯定选Vue3的uniapp项目啦（都2024年了，紧跟时代潮流）。打开HBuilder X，新建一个基于Vue3的项目，选择在Chrome浏览器中预览。

新建项目： 选择 【文件】 然后点击 【新建】 最后点击 【项目】

创建项目

新建Vue3项目：

新建Vue3项目

启动项目： 选择 【运行】 然后点击 【运行到浏览器】 最后选择 【在Chrome浏览器中预览】

启动项目

打开开发者模式： 按下F12，切换手机预览模式

开发者模式

项目结构

项目结构

项目会包含几个主要部分：

  • components：存放可复用的组件。
  • pages：存放各个页面。
  • static：存放图片、视频等静态资源。
  • main.js：Vue的初始化入口文件。
  • App.vue：配置App全局样式和监听。
  • pages.json和manifest.json：配置页面路由和应用信息。
  • uni.scss：内置的常用样式变量

我们运行项目之后，默认展示的是index.vue里面的内容

当我们打开这个页面时，可以看到 script 标签内默认使用的是 Vue 2 的选项式 API。现在，让我们来创建一个新的页面，使用 Vue 3 的组合式 API 来编写。

开始编写uniapp页面

新建页面

在HBuilderX中新建页面，会自动创建同名目录，并在pages.json中添加配置。

新建页面 目录 pages.json

页面标签

view和text

<!-- div改名叫view啦 -->
<view>
  <text>我是文本</text>
</view>

<!-- 图片这么放，简单吧 -->
<image src="/static/logo.png"></image>

页面配置

{
  "navigationBarTitleText": "我是标题",
  "navigationBarBackgroundColor": "#ffffff",
  "enablePullDownRefresh": true
}

所有页面的配置都在pages.json文件里。你可以设置导航栏标题、背景色等。如果不知道怎么写，可以到官网看看：uniapp.dcloud.net.cn/collocation…。

  • pages：配置单个页面，path是页面的所在路径，style是它的样式配置。
  • globalStyle：全局页面统一样式配置。

现在我们来建两个页面：index.vue和order.vue。

页面展示顺序

配置项中的第一个页面，就是整个项目的首页（启动页）。

运行项目，首先看到的是index.vue的内容。

首页内容 为啥？因为它的配置在最前面。

把order.vue的配置放到最前面，保存后，项目就会先展示order.vue的内容。

单页面配置

单个页面的配置，主要是配置style属性。

  • navigationBarTitleText：导航栏标题文字内容。
  • navigationBarBackgroundColor：导航栏背景颜色。
  • navigationBarTextStyle：导航栏标题颜色及状态栏前景颜色，默认black，只支持black/white。
  • navigationStyle：导航栏样式，默认default，只支持default/custom。custom就是自定义导航栏。
  • enablePullDownRefresh：是否开启下拉刷新，默认false。

首页页面配置

实现效果

单页面配置小贴士：

  1. navigationStyle默认是default，设为custom就是自定义，不会有默认导航栏。

  2. enablePullDownRefresh默认是false，不刷新。需要刷新数据时，设为true。

全局页面配置

单页面没配置样式时，就会展示全局页面的样式。

  • navigationBarTextStyle：导航栏标题颜色及状态栏前景颜色，只支持black/white。

  • navigationBarTitleText：导航栏标题文字内容。

  • navigationBarBackgroundColor：导航栏背景颜色。

  • backgroundColor：下拉显示出来的窗口的背景色。

比如：index.vue没配置style样式，默认展示全局页面的配置。

底部导航这么玩

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的"
      }
    ]
}

底部导航栏得在pages.json里配置tabBar属性。

tabBar中的list是个数组，最少2个、最多5个tab，按数组顺序排序。

  • color：tab上的文字默认颜色。
  • selectedColor：tab上的文字选中时的颜色。
  • position：tabBar位置，默认bottom，可选top。
  • fontSize：文字默认大小。
  • list：tab列表。
  • pagePath：页面路径，必须在pages中先定义。
  • text：tab上按钮文字。
  • iconPath：图片路径。
  • selectedIconPath：选中时的图片路径。

这里设置index.vue、message.vue、user.vue三个页面为底部导航栏。

页面跳转

在App中，页面跳转是常有的事。uniapp提供了uni.navigateTo()和uni.navigateBack()等方法来实现页面跳转。 页面跳转主要用这几个：

  • uni.navigateTo()：普通页面跳转
  • uni.switchTab()：跳转到底部导航栏的页面
  • uni.navigateBack()：返回上一页
// 想去哪就去哪
uni.navigateTo({
    url: '/pages/order/order?id=123'
})

// 要回首页就这样
uni.switchTab({
    url: '/pages/home/home'
})

记住：跳转时想带参数，就在url后面加个?，比如：/pages/detail?id=1

组件使用

内置组件随心用

想了解内置组件文档？uniapp.dcloud.net.cn/component/。

内置组件有很多，这里只列举几个常用的。

按钮

<button size="default" type="primary">按钮</button>
<button size="mini" type="warn">按钮</button>
  • size：尺寸，只有default和mini两个选项。
  • type：类别，有primary、default、warn三个选项。

input框

<input class="uni-input" style="border: 1px solid gray;" placeholder="请输入用户名" />
<input class="uni-input" :password="true" placeholder="请输入密码" />
<input class="uni-input" type="number" placeholder="请输入数字" />
  • type：text、number、idcard。
  • placeholder：输入框为空时占位符。
  • disabled：是否禁用。
  • maxlength：当type为Number时，最大输入长度，设置为-1时不限制最大长度。

轮播图：swiper

<swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
    <swiper-item>
        <view class="swiper-item uni-bg-red">1</view>
    </swiper-item>
    <swiper-item>
        <view class="swiper-item uni-bg-green">2</view>
    </swiper-item>
    <swiper-item>
        <view class="swiper-item uni-bg-blue">3</view>
    </swiper-item>
</swiper>
  • indicator-dots：是否显示面板指示点。
  • indicator-active-color：当前选中的指示点颜色。
  • autoplay：是否自动切换。
  • duration：滑动动画时长，默认500。
  • interval：自动切换时间间隔，默认5000。

想要更多组件？uni-ui都给你备好了！

<uni-card title="小码农岛">
    关注我，带你躺平！
</uni-card>

uni-ui是基于vue组件的、flex布局的跨全端ui框架，不包括内置组件，是内置组件的补充。

uni-ui官方文档：uniapp.dcloud.net.cn/component/u…。

是不是感觉uniapp特别亲民？它就像是一个贴心的老朋友，帮我们把复杂的事情变得简单。用它开发，就像是在跟老朋友聊天一样轻松自在！

生命周期

最常用的是onLoad，页面加载时就会触发，特别适合用来获取参数。比如从列表页跳到详情页，就可以在onLoad里获取商品id,可以这么写：

// 列表页跳转
uni.navigateTo({
    url: '/pages/detail?id=666'
})

// 详情页接收
onLoad: function(option) {
    console.log('商品id是：' + option.id)  // 输出：666
}

除了onLoad，还有这些常用的生命周期：

  • onShow：页面每次显示都触发，比如从其他页面返回时
  • onHide：页面隐藏时触发，比如跳转到其他页面时
  • onUnload：页面卸载时触发，比如关闭页面时

写在最后

如果你还在为面试八股文头疼，别担心！在本公众号：小码农岛 中回复 66，我会免费送你一份《面试八股文》，助你轻松应对面试，拿下心仪的 Offer！快来领取吧，别错过哦！



OK，今天的分享就到这里。大家对此有何见解？欢迎在评论区分享您的观点。最后非常感谢大家的支持！如果您觉得这篇文章写的不错，帮忙"点赞、分享、在看"。你们的支持是我写作路上最大的动力。我们下期再见!

avatar
文章
阅读
粉丝